PDA

View Full Version : Looks different in Firefox

rharris28
12-23-2006, 11:31 AM
Well my website is, http://www.rharris28.dyndns.org/ I made my whole site out of tables (being such a fool) and got it exactly how i like it but realised how much of a stupid idea it was to use tables because of the problems with inputting data and finding what i want. So ive decided to re-script my site using CSS but have run into a small problem and refuse to carry on until i sort it (im still near the beginning :P) if you look at my website you will see that there is a bar going along the top (the black/gray one) and then a green one under it. In Internet Explorer 7 it all looks fine, just how i used to have it but in firefox the black/gray bar isnt 100% of the page. Which is how i'd like it :)

My HTML is:
<!--START OF HEADER-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<META name="verify-v1" content="9u6uX6mdIuBNO6+EWvyS0gCSYP7MNds6lT/wKkizUms=">
<title>Rharris28</title>
<link href="css.css" rel="stylesheet" type="text/css" />

<!--START OF BBCOUNTER-->

<?php
define("_BBCLONE_DIR", "bbclone/");
define("COUNTER", _BBCLONE_DIR."mark_page.php");
if (is_readable(COUNTER)) include_once(COUNTER);
?>

<!--END OF BBCOUNTER-->

</head>

<!--END OF HEADER SCRIPT-->

<!--START OF BODY-->

<body>

<!--START OF HEADER-->

<div id="header01"></div>
<div id="header02"></div>
<div id="header03"></div>
<div id="header04"></div>
<div id="hea">www.rharris28.dyndns.org</div>

<!--END OF HEADER-->

</body>

<!--END OF BODY-->


And my CSS is:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-image: url(images/bgmain.gif);
margin: 0px;
}

#header01 {
background-image: url(images/header_02.gif);
background-repeat: repeat-x;
background-position: top;
height: 100%;
width: 100%;
}

#header02 {
background-image: url(images/header_01.gif);
background-repeat: no-repeat;
position: absolute;
top: 0%;
left: 19%;
height: 100%;
width: 100%;
}

#header03 {
background-image: url(images/header_03.gif);
background-repeat: repeat-x;
position: absolute;
top: 3%;
left: 0%;
height: 100%;
width: 100%;
}

#header04 {
background-image: url(images/top_logo.gif);
background-repeat: no-repeat;
position: absolute;
top: 40px;
left: 240px;
height: 100%;
width: 100%;
}

#slogan {
position: absolute;
top: 3%;
left: 50%;
height: 100%;
width: 100%;
font-size:9px;
font-color:#afafaf;
}
rharris28
12-23-2006, 11:37 AM
Also, while i remember, when i view my website in different resolutions it all looks messed up (not all aligned how it should be) is there something i can do about that? ive tried positioning in pixels and percentages but the same happens. And is there any reason why theres extra space to the right? (you can scroll left but theres nothing there) i set all the widths for the top bars to 100% so shouldnt that stop that?
althalus
12-23-2006, 11:59 AM
Most of your problems probably come from you having it all positioned absolutely. Try removing it and we'll see where we end up. :)

You rarely need to position anything absolute. In your case, being a header and all you're probably better off without it. :)
rharris28
12-23-2006, 12:03 PM
ok, just removed all "position: absolute;" tags from the CSS and the result isnt exactly what I was after...:D...at least it got rid of the scroll bar problem so thats a good start :)
johnz
12-23-2006, 12:19 PM
try this out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<base href="http://www.rharris28.dyndns.org/" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title> </title>
<style type="text/css">
body, html {
width: 100%;
margin: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-image: url(images/bgmain.gif);
}
#header {
width: 100%;
height: 120px;
background: url("http://i14.tinypic.com/2s96461.jpg") repeat-x;
}
#logo {
width: 368px;
height: 120px;
background: url("http://i17.tinypic.com/33m66fq.jpg");
margin: 0 auto;
}


</style>
</head>
<body>
<div id="header">
<div id="logo">
</div>
</div>


</body>
</html>


like althalus said, you should not use absolute positioning for placing elements throughout your website. also i am not sure why you had the images sliced up so much. the top grey/black bar was seperate from the green bar. i joined them together and made them one image and set that to repeat across the screen. also, the other image was split into two.

what i did in the code was set your header 100% width of the screen and the height of 120px because thats how tall the header image is. then i set the background image to repeat x.

then with your "logo" image i created a div inside the header div, the exact dimensions of the image and gave the div a margin of "0 auto", which centers it horizontally on the page.
rharris28
12-23-2006, 12:35 PM
Wow it 100% worked! Thanks! :D You are getting rep points from me! :D

It sounds so simpe how you explained it and the way you coded it, how come i couldnt do that in the first place!?!? :P

Edit: couldnt give you any more rep johnz seen as i gave you some earlier for an answer in another thread which helped me out a lot, will give you some once i can
johnz
12-23-2006, 12:37 PM
no problem. and thank you
if you take a minute sometimes to think about what you are trying to do and understand how to use css it becomes pretty simple. as you keep using it and doing different things it will become easier to do thing that you want to do. good luck. :cheers:
net-connect
12-23-2006, 12:51 PM
My web site (http://bigspring.awardspace.com/index/) also looks different in Internet explorer. the font is very big
rharris28
12-23-2006, 01:24 PM
net-connect: try using px (pixels) instead of %, should help, if not, try another measurement

and ive run into another problem. i used the code that johnz gave me to sort everything out and changed the part in the CSS which centered the logo (margin: 0 auto; ) because i didnt want it centered. I changed this code to "margin-left: 240;" to that i can position it along the header from left and it works fine in IE but in FF it just stays in the top left corner instead of moving along.
johnz
12-23-2006, 01:28 PM
in your css you have: margin-left: 240;

you are missing the "px" after 240.

it should be: margin-left: 240px;
rharris28
12-23-2006, 01:36 PM
wow, i spent about 15 minutes trying to work that out...and then you spot it in seconds! Thanks!
net-connect
12-23-2006, 01:48 PM
i do not see what u mean?
rharris28
12-23-2006, 02:21 PM
i do not see what u mean?

look at your font sizes in your CSS file, mainly the first one, near the top and you will notice that they are (a number) then % (e.g. 14%) try changing the % for px and see if that helps
johnz
12-23-2006, 02:23 PM
yes you are using percentages for your font sizes. i would recomend using "pt" or "em" for font sizes.
rharris28
12-23-2006, 02:23 PM
sorry to bother you guys again, but does anybody know how to make divs align to the right of each other? I currently have 6 divs that i want at the right of each other inside of a div but they all currently go downwards, i cant seem to make them do what i want
johnz
12-23-2006, 02:26 PM
float: left;
johnz
12-23-2006, 02:35 PM
rharris, i see that you are repeating a lot of your properties in your css file. if those 6 divs share the same properties you can set it up in the stylesheet that way.

since your 6 nav divs are inside the "topnav" div you can set all their properties by using "#topnav div". so instead of what you have you can do something like this:


#topnav {
width: 100%;
height: 41px;
float: left;
}

#topnav div {
height: 41px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-bottom:7px;
float: left;
}

#navt1 {
background-image: url(images/header_05.gif);
width: 131px;
}

#navt2 {
background-image: url(images/header_06.gif);
width: 129px;
}

#navt3 {
background-image: url(images/header_07.gif);
width: 129px;
}


#navt4 {
background-image: url(images/header_08.gif);
width: 131px;
}

#navt5 {
background-image: url(images/header_09.gif);
width: 130px;
}

#navt6 {
background-image: url(images/header_10.gif);
width: 127px;
}
net-connect
12-23-2006, 02:36 PM
i changed and now both fonts are big!!
johnz
12-23-2006, 02:41 PM
i changed and now both fonts are big!!

of course they are going to be big when you have it set to 74px. like i said, use either "pt" or "em" for your font sizes. and average font sizes are 10pt or 12pt not 74!!
rharris28
12-23-2006, 03:10 PM
johnz, you ARE the man!

I did what you suggested :D Thanks, do you know (im pretty damn sure you will) a way to center all of those 6 navt divs that are inside of the topnav? when/if i center them it should all align up with the header (the little green line on the nav with the bottom of the header)
johnz
12-23-2006, 03:27 PM
do you have a jpg of the way you want you site to look?
rharris28
12-23-2006, 03:32 PM
yeh, i made this yesterday but used tables.

http://i18.tinypic.com/2aexco1.jpg

Link edited
johnz
12-23-2006, 03:35 PM
that link does not work.
rharris28
12-23-2006, 03:40 PM
link edited (http://i18.tinypic.com/2aexco1.jpg)
rharris28
12-23-2006, 07:26 PM
i got it all how i like it so far in internet explorer but in fire fox its messed up, the grey bar with the green indent is pushed up behind the navigation bar which means the grey box under it is half hidden. if i bring it down by using "margin-top: blahblahblah;" it looks fine in fire fox, but then is messed up in internet explorer because i just brought it down by however pixels. is there anyway to sort this because im stumped.