I’ve been coding HTML and CSS for over 9 years now, and the range of quirks and work arounds that you stumble across when trying to overcome cross-browser compatibility and to get the same margins and padding in all browsers still amazes me.
One I found a while back, that I have just rediscovered if the use of a 1px border at the top of the screen. To explain…
I have an HTML page, with a container DIV as follows:-
<body>
<div id=”container”>
</div>
</body>
The styles to control this are:-
#container {position:relative;margin:0px auto 10px auto; width: 980px;border-top:1px solid #004180;}
Without the border-top:1px solid #004180; in Firefox and Safari on Mac and PC there is an extra 10px at the top of the screen that seems to come from nowhere. Which is bizarre…and even more bizarrely is that it works perfectly fine in IE6.
Adding the top border does indeed add 1px, but it closes the top margin. I have no explanation for this, it just works.
Thats that…you work it out 
I gave up trying to figure out why many years ago And if you do figure out why, then please let me know too.
Filed under: Interface, Web Development , cross browser compatibility, css, html
