div background shows fine in IE but not in FF or Netscape

[Mr. T.]

Hello,

i have a page where i have a white box centered on the screen. Now in IE
everything shows fine, but in FireFox and Netscape the background of the box
isn't white. But all the positioning is more or less OK.

This is the code of my page:

<div class="centraal">
<div class="whitebox">
<img src="images/top_bar.jpg">
<div class="menucontainer">
<div class="menukolom" id="menu">
<!-- in here is a <ul> with my menu, nothing special -->
</div>
<div class="menubottom">
</div>
</div>
<div class="contentbox">
<!-- in here i write my text -->
</div>
</div>
</div>
<div class="bottombar"><img src="images/bottom_bar.jpg"></div>
<div id="footer">
<div class="adresbalk">
<!-- here comes the address -->
</div>
</div>

and these are the different defenitions in my stylesheet

body {
background-color: #E3E3E3;
font-family: Arial;
font-size: 11px;
}

..whitebox {
background-color:#ffffff;
padding-top: 0px;
color:#425967;
}

..centraal {
background-color: #ffffff;
text-align: left;
border: 0px none;
margin-left:auto;
margin-right:auto;
padding: 0px;
width: 650px;
}

..bottombar {
width: 650px;
margin-left: auto;
margin-right: auto;
}

..contentbox {
font-family: Arial;
font-size: 0.95em;
color: black;
width: 510px;
float: right;
}

..menukolom {
padding: 5px;
line-height: 150%;
background-color: #C3D678;
font-family: Arial;
font-size: 1.05em;
font-weight: bold;
color: white;
width: 113px;
margin-left: 3px;
float: left;
}

..menubottom {
background: url(images/bottom_menukolom.gif) no-repeat bottom;
float: left;
width: 123px;
height: 82px;
margin-left: 3px;
}

..menucontainer {
width: 125px;
float: left;
margin-top: 3px;
}

does anyone have an idea what i might be doing wrong that causes the white
content not to be displayed in FF and Netscape?

Thx in advance!

Thomas

P.S. Page can be seen on http://www.techtransfer.ugent.be/voedingsproject/

[Els]

Mr. T. wrote:

Hello,

i have a page where i have a white box centered on the screen. Now in IE
everything shows fine, but in FireFox and Netscape the background of the box
isn't white. But all the positioning is more or less OK.

This is the code of my page:
[snip superfluous part of message because URL is provided below]
does anyone have an idea what i might be doing wrong that causes the white
content not to be displayed in FF and Netscape? P.S. Page can be seen on http://www.techtransfer.ugent.be/voedingsproject/

Add a border to that box, and see why the background isn't displayed.

Hint: floats aren't seen by their parents, and boxes (parent elements)
don't automatically encompass them. You would need to add a clearing
element after the last content but before the closing tag of your
'white box'. For instance <br style="clear:both;">

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Mr. T.]

Hi Els,

thx for the fast reply! the suggestion with the <br> and clear both works
fine!

just one thing that's still bugging me is why the borders aren't as nice as
in IE? In IE i managed to get a nice white border (to the right), but in FF
it doesn't show.

REgards,

Thomas

"Els" <el*********@tiscali.nl> schreef in bericht
news:1v*****************************@40tude.net...

Mr. T. wrote:

Hello,

i have a page where i have a white box centered on the screen. Now in IE
everything shows fine, but in FireFox and Netscape the background of the
box
isn't white. But all the positioning is more or less OK.

This is the code of my page:

[snip superfluous part of message because URL is provided below]

does anyone have an idea what i might be doing wrong that causes the
white
content not to be displayed in FF and Netscape?

P.S. Page can be seen on
http://www.techtransfer.ugent.be/voedingsproject/

Add a border to that box, and see why the background isn't displayed.

Hint: floats aren't seen by their parents, and boxes (parent elements)
don't automatically encompass them. You would need to add a clearing
element after the last content but before the closing tag of your
'white box'. For instance <br style="clear:both;">

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Mr. T. wrote:

"Els" <el*********@tiscali.nl> schreef in bericht
news:1v*****************************@40tude.net...

Mr. T. wrote:

Hello,

i have a page where i have a white box centered on the screen. Now in IE
everything shows fine, but in FireFox and Netscape the background of the
box
isn't white. But all the positioning is more or less OK.

This is the code of my page:

[snip superfluous part of message because URL is provided below]

does anyone have an idea what i might be doing wrong that causes the
white
content not to be displayed in FF and Netscape?

P.S. Page can be seen on
http://www.techtransfer.ugent.be/voedingsproject/

Add a border to that box, and see why the background isn't displayed.

Hint: floats aren't seen by their parents, and boxes (parent elements)
don't automatically encompass them. You would need to add a clearing
element after the last content but before the closing tag of your
'white box'. For instance <br style="clear:both;">

thx for the fast reply! the suggestion with the <br> and clear both works
fine!

just one thing that's still bugging me is why the borders aren't as nice as
in IE? In IE i managed to get a nice white border (to the right), but in FF
it doesn't show.

That's a matter of widths and paddings/margins. In Opera for instance
the three red blocks form a straight block, but more to the right than
in IE, covering the right border of the white box, just like the last
red block does in Firefox. I haven't got time now to dive into your
code, but play a bit with the margins and paddings on those red boxes
and you'll likely be able to solve it. A quick peek showed boxes
floated to the right. Maybe you should put a container around the red
boxes, and have a right padding between that container and the
contentbox. Just maybe though, haven't looked into it much.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -