Okay, this is driving me nuts, and while I'm still researching, I'm
hoping someone here can help.
I'm trying to create a simple page with a navigation menu on the left
side of the main content area. On the right side, I have a content
div that contains an h1 title and a table that I'd like to take up the
full width of the div (but not, of course, run over the navigation
menu).
So I try something like this in my CSS:
#navbar {
float: left;
width: 10em;
}
#content {
margin-left: 11em;
}
And in my HTML, I'll have something like this:
<div id="navbar">Thi s is a test...</div>
<div id="content">
<h1>Test Page</h1>
<table style="width: 100%;">
<tr><th>Colum n 1</th><th>Column 2</th></tr>
<tr><td>Datum 1</td><td>Datum 2</td></tr>
</table>
</div>
In Firefox, this works great. The table takes up the full width of
the content div and appears immediately under the heading, which is
what I want.
However, in Internet Explorer 6, the heading works, and the top of the
title is aligned with the top of the navbar. If I put text in p tags
under the heading, it all lines up nicely. But the table is acting
like it has a clear:left; style specification, which it doesn't. I've
even tried explicitly setting clear:none; to no avail. It's being
rendered so that the top of the table aligns a pixel under the bottom
of the navbar.
I know that IE has lots of little CSS bugs that drive people nuts, but
I can't find what's causing this particular one or how to fix it. I'd
love to change our corporate standard to Firefox, but unfortunately,
that's just not an option.
Anyone have any clues what's going on here and how to coax IE 6 into
rendering the table immediately under the title like it's supposed
to? I'm forcing strict mode (not quirks mode) by using the following
doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Any help is appreciated!
