Forum Moderators: not2easy
I hope someone can help. I'm being driven mad by the difference between Firefox's treatment of nested Divs and that of Opera, Hippy (my html editor) and IE6.
I've picked up on the potential for Doctype declarations causing problems and am using
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
which validated successfully both for HTML and for CSS.
I'm trying to create a header with nested Divs, after which the main part of my text appears. With Opera and IE6 that's what happens fine with the code below, but with Firefox, the text appears between the two nested divs. Best show you the code.
Here's the relevent CSS stuff
#hdr {
border-style: outset;
border-bottom-style: outset;
border-width: 3px;
width: 100%;
clear: both;
}
#lfthdr { float: left;
}
#righthdr { float: right;
padding-top: 65px;
}
#toplnk {
width: 100%;
height: 30px;
text-align: center;
clear: both;
}
Here's the HTML which makes reference to the above.
<body>
<div id="hdr">
<div id="lfthdr"><img src="images/logo.gif" border=0 height="150" width="650" alt="La Souvigne Logo">
</div>
<div id="righthdr"><a href="refsfr.htm"><img src="images/drapeau.gif" alt="lien vers le français"></a>
</div>
</div>
<p>
<div id="toplnk">
<table WIDTH="100%">
<tr>
<td><A HREF="pricesuk.htm#top"><span class="toplnk2">Rooms & prices</span></A>
</td>
<td><A HREF="bookings.htm#top"><span class="toplnk2">Room Occupancy Charts</span></A>
</td>
<td><A HREF="pricesuk.htm#terms"><span class="toplnk2">Our terms and conditions</span></A>
</td>
<td><A HREF="pricesuk.htm#contact"><span class="toplnk2">Contact us</span></A>
</td>
</tr>
</table>
</div>
<div id="mainpart">
<H2>
No advertisement would be complete without its quotes from satisfied customers.
These were taken from our Visitor's Book.</H2>
I'm probably being dumb, but it really looks to me as if Firefox is refusing to act on the
clear: both;
command in the first (outer) division.
Does anyone know of a workaround, or - more probably what I'm doing wrong!
Sorry about that! Reading the replies in another thread that I didn't think was relevant, I saw the remark that the clear: both; property didn't apply to subsequent elements, but to previous ones.
At least that's what I thought it said! Anyway, I included that as a property for the #mainpart ID selector and lo and behold, it worked. That meant I was also able to eliminate the clumsy table I'd used previously for my top of page links, and just put them in a division on their own. At last it looks the way I wanted. Now to work out how to do the same thing for lower resolution screens.
Sorry also for my gaffe in replying to my own post!
