CSS Problem in IE

[kurb77]

Basically I am encountering a positioning issue in IE with the upper nav div that in fine in all other browsers except IE. The upper nav is the same width as the bottom header image but in IE the last nav button wraps around underneath the nav div.

Also having trouble figuring out why some of the textual elements on the page float outside their respective divs in IE -ugh.

Someone had mentioned implementing a browser detection css file, I have never really used one before – any ideas on a fix would be greatly appreciated.

website -http://d3596511.u66.dayvision.com/index.php

[kurb77]

Here are two screenshots of how it appears in IE on my system

1. http://cl.ly/2h0W1n2O413C171m0M04
-this one shows how the nav button wraps around underneath

2. 3c1m3E1v211t2W2y3y2x
– this one shows how the footer columns get are misaligned

* any help is greatly greatly appreciated.

[kurb77]

the second link again

http://cl.ly/3c1m3E1v211t2W2y3y2x

[neerukool]

First things first!
I see that you have applied set of 2 stylesheets containing same code. It’s just that 1 is minified. Just keep 1 stylesheet reference – preferably the minfied version.

I also observed that you have not applied CSS-Reset code. If you’re not aware of CSS-Reset, just google it. You’ll get many flavours of CSS-Reset. Simply put that code in the starting part of your main stylesheet. CSS-Reset will solve more than half of your IE problems and you’ll get cross-browser consistency for most of the part.

Please note that you might need to re-style few or many elements after putting the CSS-Reset style.

[Senff]

Various browsers render text a little different. In this case, the text in the buttons is shown larger in IE than in other browsers, even though it’s both set at 15px. However, the fact that the font family is set to “serif” isn’t helping (not a standard font so will revert to the very basic Times New Roman).

I’d say there’s 2 ways of fixing this.

1. Use a conditional style sheet for IE, where the font is set to 13 pixels.
2. Give each button a specific fixed width in pixels.

I personally prefer the second one, as it will eliminate the whole browser incompatibility thing (not just IE) and so the buttons will always be the exact same width in every browser.

[Author]

Posts