Internet Explorer is not as awful as you think. Most of it's problems are postions, and yes, it does have a LOT of bugs, but you can't blame everything on IE's "Awful rendering engine." Sometimes, you're coding wrong. It may seem unlikely (try to keep the chant of "IE SUCK, IE SUCKS" to a dull roar, please) that you're coding wrong (Mozilla and Safari display it right, so why doesn't IE, damnit!), but you have to trust me on this one. Heres an example:
One time someone asked me about the CSS for their lists. The lists were horizantal navigation, so they should have been "float:left;" applied to the <li> elements. First thing I see when I'm looking at their CSS:
ul li {display:inline;}
This was leaving space inbetween the <li>s because they had put line breaks inbetween the elements. The person was testing it in Mozilla(a older version) and it was working, but not in IE(GASP?!). It should have been more like this: li { display:block; float:left; } That floats it, and the "display:block;" equated to "list-style:none;"
So remember, test you code in all browsers, and sometimes you can rewrite the CSS to get the same effect in ALL browsers. Yay.
And please, clean out your positioning CSS (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/sample.html">http://www.w3.org/TR/REC-CSS2/sample.html</a><!-- m -->). Please. It helps. Really.
And remember, a general CSS tip: when in doubt, validate your XHTML and your CSS. Weird bugs occur if you accidently forgot that closing tag (or bracket), you know.I've been writing something along these lines : <!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#ieiscrap">http://bonrouge.com/br.php?page=faq#ieiscrap</a><!-- m -->
One time someone asked me about the CSS for their lists. The lists were horizantal navigation, so they should have been "float:left;" applied to the <li> elements. First thing I see when I'm looking at their CSS:
ul li {display:inline;}
This was leaving space inbetween the <li>s because they had put line breaks inbetween the elements. The person was testing it in Mozilla(a older version) and it was working, but not in IE(GASP?!). It should have been more like this: li { display:block; float:left; } That floats it, and the "display:block;" equated to "list-style:none;"
So remember, test you code in all browsers, and sometimes you can rewrite the CSS to get the same effect in ALL browsers. Yay.
And please, clean out your positioning CSS (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/sample.html">http://www.w3.org/TR/REC-CSS2/sample.html</a><!-- m -->). Please. It helps. Really.
And remember, a general CSS tip: when in doubt, validate your XHTML and your CSS. Weird bugs occur if you accidently forgot that closing tag (or bracket), you know.I've been writing something along these lines : <!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#ieiscrap">http://bonrouge.com/br.php?page=faq#ieiscrap</a><!-- m -->