Layout becomes weird in Firefox

**hadisentosa** · Oct 31, 2004, 10:11

Hi all

I am a newbie in css, and I tried to design my website entirely in css. It works OK in IE but not in Firefox, netscape, etc. If someone could take a quick look at my css and point out the wrong part I would be really grateful.

http://www.wihara.com/Etomite0.6/index.php?id=19

here is the css file :
/* CSS Document */

#header {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #669900;
position: absolute;
height: 100px;
width: 1003px;
left: 0px;
top: 0px;
background-image: url(../../manager/media/images/bg/waterlilies6-fin2.jpg);
background-repeat: no-repeat;

}
#menu {
position: absolute;
left: 0px;
width: 125px;
padding: 20px;
top: 100px;
height: auto;
background-color: #CCFF99;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #669900;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 23px;
text-align: center;

}
#content {
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: dotted;
border-bottom-style: dotted;
border-right-color: #669900;
border-bottom-color: #669900;
position: absolute;
height: auto;
width: 753px;
left: 125px;
top: 100px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #669900;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 23px;
background-color: #FFFFFF;

}
#right {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #669900;
position: absolute;
height: auto;
width: 125px;
left: 878px;
top: 100px;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #CCFF99;
line-height: 23px;

}
#float {
border: 1px dashed #000000;
height: 200px;
width: 200px;
float: right;
background-color: #0099CC;
padding: 8px;
margin: 0px;

}
body {
background-color: #99CC99;
padding: 0px;
margin: 0px;

}
#menu a:hover {

}
#menu a:link {

}
#menu a:visited {
color: #006666;
}

the html is just : <body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="right"></div>

Thank you for your help

p.s Im trying to make a buddhist website, so please help out ! Thanks ^^

**Paul O'B** · Oct 31, 2004, 10:24

Hi,

You need to take into account the broken box model of ie.

have a look at the FAQ sticky thread as it explains it in detail.

Here is the code to fix it but read the fAQ for the explanation

Code:

#header {
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #669900;
 position: absolute;
 height: 100px;
 width: 1003px;
 left: 0px;
 top: 0px;
 background-image: url(http://www.wihara.com/Etomite0.6/man...lies6-fin2.jpg);
 background-repeat: no-repeat;

}
#menu {
 position: absolute;
 left: 0px;
 width: 85px;
 padding: 20px;
 top: 100px;
 height: auto;
 background-color: #CCFF99;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #669900;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 line-height: 23px;
 text-align: center;
}
* html #menu{width:125px;}
#content {
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: dotted;
 border-bottom-style: dotted;
 border-right-color: #669900;
 border-bottom-color: #669900;
 position: absolute;
 height: auto;
 width: 711px;
 left: 125px;
 top: 100px;
 border-left-width: 1px;
 border-left-style: dotted;
 border-left-color: #669900;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 padding-top: 20px;
 padding-right: 20px;
 padding-left: 20px;
 line-height: 23px;
 background-color: #FFFFFF;
}
* html #content{width:753px}
#right {
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #669900;
 position: absolute;
 height: auto;
 width: 85px;
 left: 878px;
 top: 100px;
 padding: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 background-color: #CCFF99;
 line-height: 23px;
}
* html #right{width:125px;}

#float {
 border: 1px dashed #000000;
 height: 184px;
 width: 184px;
 float: right;
 background-color: #0099CC;
 padding: 8px;
 margin: 0px;
}
* html #float{width:200px;height:200px;}
body {
 background-color: #99CC99;
 padding: 0px;
}
#menu a:hover {

}
#menu a:link {
}
#menu a:visited {
 color: #006666;
}

Paul

**hadisentosa** · Oct 31, 2004, 11:51

Wow thanks a lot for helping me out . really appreciate it

let me putting the code then heeh

hmm i need to check out the sticky post

again, thanks !

Updated:

eh the code isnot completely right

i don't know but on the right side there is still like 10px uncovered area with my #right box.
so on very right side, it showed my background instead of being covered with my #right box.

do you know what is wrong

**Paul O'B** · Oct 31, 2004, 13:26

i don't know but on the right side there is still like 10px uncovered area with my #right box.
so on very right side, it showed my background instead of being covered with my #right box.

Are you talking about firefox or IE ?

If you are talking about firefox the I suspect its due to the fact that you have made your page a fixed width and you have your sreen set to 1024x768. Anyone on a higher resolution is going to see a gap the to the right because thats how you've designed it.

In firefox a scrollbar is not shown until its needed therefore firefox is about 20px wider than ie. I think this is the gap you are talking about. Obviously you can't change the size of your layout for each browser.

Youcan force a scrollbar in mozilla with this:

Code:

html{height:100.1%}

Which will make it roughly the same size as ie.

Paul

**hadisentosa** · Oct 31, 2004, 16:28

i made a new css file , it worked on firefox , netscape but a little different on IE. ( little white space between menu & header, etc).

how do I fix this problem ?

thank you very much paul.

you are the man

#header {
background-image: url(waterlilies6-fin3.jpg);
background-repeat: no-repeat;
position: absolute;
height: 100px;
width: 1005px;
left: 0px;
top: 0px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #669900;

}
#menu {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #669900;
position: absolute;
height: auto;
width: 92px;
left: 0px;
top: 101px;
padding: 20px;
background-color: #99CC99;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 23px;
text-align: center;

}

* html #menu{width:132px;}
#content {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
border-right-color: #669900;
border-bottom-color: #669900;
border-left-color: #669900;
position: absolute;
height: auto;
width: 704px;
left: 132px;
top: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 20px;
line-height: 20px;
background-color: #FFFFFF;

}

* html #content{width:744px}

#right {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #669900;
position: absolute;
height: auto;
width: 87px;
left: 878px;
top: 101px;
background-color: #99CC99;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 23px;
padding: 20px;
}
* html #right{width:127px;}
body {
padding: 0px;
background-color: #CCFF99;

}
* {padding:0;margin:0}

**Paul O'B** · Nov 1, 2004, 06:28

Hi,

You need to take care of the box model issue on the height.

Code:

* html #header{height:101px}

The width of your center content need to take into account the borders also:

Code:

* html #content{width:746px;}

Have another look at teh FAQ on the broken box model as you will xonstantly run into these issues if you don't understand them and how to avoid/compensate for them

Paul