IE workaround for floats and borders

[strivejason]

Does anyone know how to work around the differences in IE and FF/Netscape when it comes to floats and borders? I've got a DIV that is centered in the screen; within that DIV I have two DIVs that need to be aligned to the right and left. The left div needs to start at 205px relative to the parent and hang down 2px over the parent, whereas the right needs to be aligned to the edge. The page is at [URL unfurl="true"]http://temp.insightstudios.ca/index.php[/url].

It looks fine in IE, but in NN7 or FF, the margins in the header/footer links are too much, and the graphic in the header sits 2px too high.

I don't know how to make parts of my code "invisible" to certain browsers. Maybe I'm just doing it wrong with absolute positioning. Any ideas?

 

[traingamer]

For your logo, try

<div style="position: absolute; left: 205px; width: 50px;[COLOR=red]margin-top: 2px;[/color]"> <img src="index.php_files/logo_top.jpg" alt="Welcome to Offspring!" height="51" width="50"></div>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

Problem?
Box model.
Solution?
Shift IE to standards mode.
A little more?
The <xml> declaration at the top of the html confuses IE and shifts it back to quirks mode even though you added a complete and valid doctype which should help with IE conforming to standards. Removing the xml will help IE6 move back to standards mode and render your page as crappy as FF/NN does.
But why?
Your #top is 51px high and has a 2px border. Therefore it is 53px high, while your image is 51px high just missing that border. IE in quirks mode does not incorporate the border into the height and that's why it looks good.
How to ultimately fix it?
Either make #top 49px high (+2px for border) or make the image 53px high. Or like Greg said, add margin to the image.
Anything else?
Yes. Validate your code. Spot mistakes early and often. Design in FF/NN and then fix errors in IE. That way it's easier. Move all CSS to external sheets, use inline styles only if really necessary. Don't go half way, if you use css for aligning the text, use that always, don't use align="" (that might be solved by validating the page).