I’d like to open this post with a quick tip I learned from Eric Carroll at VisualNotion regarding MSIE CSS weirdness. I invite everyone to leave their own tips on known compatibility issues and their solutions.
It was brought to my attention that MSIE will double the margins of an element that is set to float. In order to resolve this issue, you simply have to give the element’s style “display: inline;”. MSIE wlil render the element properly, and more compatibie browsers such as FireFox, Opera, Konqueror and Safari will simply ignore it since that is how they render it anyway.
Please feel free to leave your own tips and tricks for cross-browser compatibility issues!
3 Responses to “Cross-browser CSS”
January 5th, 2006 at 3:45 pm
admin Says:
Taking from a post by “SuzyUK” on webmasterworld.com:
“What came out of that discussion led us to Microsoft’s site and their proprietary hasLayout property and it seemed pretty conclusive at the end of that thread that, yes, whatever this property actually is, it is indeed the cause of 99% of the more common IE rendering bugs/errors (disappearing, shifting elements).”
Read the full post
January 26th, 2006 at 1:39 pm
eric Says:
Hey, there.
I use a chunk of CSS to reset the browser settings. Before I started using it, I had some headaches with one thing being off in Opera,something else off in Firefox and so on.
Here is what I put at the beginning of all of my CSS file:
/*
Mass Reset
——————————————————————————————————–*/
* { padding: 0; margin: 0; }
body { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
pre, blockquote, form, label, ul, ol, li, dl, fieldset, address { margin: 0; padding: 4px; }
dd, blockquote { margin-left: 40px; }
fieldset { padding: 10px; }
Sometimes, I move/change the settings for list items, but most of time I leave it as is.
February 2nd, 2006 at 6:04 pm
Jordan Dobson Says:
I have found that in IE if you want to change, or even set, the background-color of a div you must make sure to give it a width. especially if there are things inside of it. I had some javascript setting background colors when a radio button was selected and it only worked like 2% of the time in IE without the width set… but 100% in the other browsers. What is up with that!