IE7 OK, but IE6 midaligns header divs

[Mondo-Todd]

Oh, golly.
My pages look fine in IE7, but when viewed in IE6, the div "header-left" displays below the level of the div "header-right" (but still on the left side, and leaving the div "top-nav-bar" where it belongs but lower). I have tried to put all of them into a div called "header-container" to keep them in place, but no dice.

This is exacerbated by my having IE7 installed and not knowing how to see the pages in IE6 (I've seen the results only on others' computers), so any advice on that would be most helpful, too. I must code at home and view at work--ugh!

My html and css are below.

Thanks, friends!
--Mondo-Man

<div id="header-right"></div>
<div id="header-left"></div>
<div id="top-nav-bar">
<div id="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact/index.php">Contact</a></li>
<li><a href="blog/index.php">Blog</a></li>
</ul>
</div><!--end top-nav div -->
</div><!--end top-nav-bar div -->


#header-left {
width:425px;
height:75px;
background:url(images/header-left.jpg);
}
#header-right {
width: 325px;
height: 99px;
background:url(images/header-right.jpg);
border-bottom:#000000 solid 1px;
float: right;
}
#top-nav-bar {
width: 425px;
height: 23px;
border-bottom:#000000 solid 1px;
border-top:#000000 solid 1px;
background:url(images/top-bar.jpg);
}
#top-nav {
text-align: right;
padding: 1px 3px 3px 3px;
margin: 0px;

[regentronique]

You should also test it with FireFox.

Can you give us the pages URL so we can look at it in different browsers?

[Mondo-Todd]

Oh, it works swell in Firefox (good ol' FF). I didn't know if I was allowed to post the site link, but sure--THANKS!

http://www.mondocommo.com

Also, I just set up a test page/css here:
http://www.mondocommo.com/test-page

In this test, I tried to place a div around just the "header-left" and "header-right" divs (was afraid that wouldn't work because the two are different heights, but it renders ok in FF and IE7). Does the test page work in IE6?

[kompreszor]

#header-right {
width: 325px;
height: 99px;
But the image is 325 x 100 IE doesn't like images bigger then the box it fits in.

I find this page to be very useful http://www.positioniseverything.net/explorer.html