Hi guys, first post so be gentle. I've a fair bit of experience with HTML and basic CSS, but never had much to do with DIV's until today. I'm coding a site for a friend and am struggling to get cross-browser compatibility and continuity when using nested DIV's.

 

Here is where I currently am, for what I want Internet Explorer is displaying OK, I can work with that as I know my next step, but FireFox is displaying oddly. I've tried all sorts of other things to no avail. Please check http://homepage.ntlworld.com/t0mbop/ to see what I mean. The positioning of the word "kayligh" is meant to be there, but the background that is present in IE is NOT there in FireFox. You will need to open the link in both windows to see what I mean. I want the background to appear in both so I can continue to the next step!

 

Here is my code so far:

 

<html>
<head>
<title>Atlantis Aquatics</title>

<style type="text/css" >
body
{
background-color: #73c2ec;
text-align:center;
margin:auto;
}
#header
{
background: url(logo1.png) center;
background-repeat:no-repeat;	
background-position: top;
height:	181px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
#main
{
background: url(background-main.png) center;
background-repeat:repeat-y;
background-position:top;
width:950px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
#nav
{
padding-left: 27px;
padding-top: 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
text-align:left;
width: 195px;
float:left;
}
#content
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
text-align:left;
float:left;
}
table.atlantis 
{
border-width: 1px;
border-style: solid;
border-color: #019cdf; 
border-collapse: collapse;
background-color: white;
width: 100%;
}
</style>

</head>
<body>
<div id="header"></div>
<div id="main">
<div id="nav">
<table class="atlantis" cellpadding="5">
<tr style="background-color: #019cdf;">
<td height="26" valign="center" style="font:Arial, Helvetica, sans-serif; color: #FFFFFF;">product categories</td>
</tr>
<tr >
<td valign="top">links here</td>
</tr>
</table>
</div>
<div id="content">kayligh
</div>
</div>
</body>
</html>

 

logo1.png is the header, and background-main.png is a small slither of white with a drop shadow either side repeating to give the effect it does in IE, but it doesn't appear in FireFox. If I remove the "float" tags the div with "kayligh" in drops below the table div and the background displays in BOTH browsers. If I float the DIV's to get them side by side the background disappears in FireFox.

 

Any help is appreciated!

 

Tom.

Hi Tom,

It seems that you need to extend the css rules of the div#main selector with some height value and everything will be fine.

Hi Tom,

It seems that you need to extend the css rules of the div#main selector with some height value and everything will be fine.

 

Thanks Zoli, managed to sort it dynamically with "overflow: auto;" on the #main DIV!

 

Job's a good'en

Thanks Zoli, managed to sort it dynamically with "overflow: auto;" on the #main DIV!

 

Job's a good'en

 

Glad to hear it! (I love the overflow: auto; property) Always comes in useful