CODEWITHSUNDEEP
htmlcssinternet-explorer
user1908902
user1908902

Reputation: 9

CSS IE Compatibility Issues

I'm new to programming in general, especially CSS. I am currently working on a new website for train enthusiasts. I'm doing it from scratch so that I can get some experience in HTML, CSS, PHP, MySQL, etc.

Anyways, I've run into a problem. I've searched Google for a solution, but haven't been able to find one. My CSS seems to be compatible with every web browser on the market EXCEPT Internet Explorer. I don't really know how to explain the problem unless you check it out for yourself. It's as if my header and left menu are the only styled elements, but my content and right menu are pushed to the right and not styled. Check this link in IE and another browser respectively. You'll see the difference.

So my question is this: How do I fix it? I know it must be an IE bug since it works in every other browser, but I don't know what it could be! If I need to post my CSS script, let me know. Thanks in advance for any help you guys can offer!

Upvotes: 0

Views: 1779

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78520

In your style sheet you have a superfluous width:100% on a div element (block level elements naturally have a width that fills their container). IE is interpreting this 100% as that of #container. You can correct the styling issue in IE7 (theoretically) by removing this width:100% at line 119 of styles.css. I theorize that this is cased by how IE7 interprets display:inline-block

I must warn you, however, that ensuring compatibility with IE 7 and lower is a major pain in the arse and totally not worth it. :)

Upvotes: 1

TDsouza
TDsouza

Reputation: 938

Which version of IE are you using to test it?? I checked it on Firefox, IE9,8 and 7. looks fine on IE8 and IE9. While there are few issues on 7. You could use conditional commenting to fix issues in 7. create a new css file specially for IE7 and then use a code like the following in your header

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->

now play around with ie7.css till things look better. The good thing about this method is you can fix issues in IE without interfering with other browser rendering. You could also use "ietester" and debug bar to determine what exactly is wrong. im not able to find the exact link right now but google should help.

You could read more about conditional commenting here http://www.quirksmode.org/css/condcom.html

Upvotes: 0

Related Questions