IE and Negative Margins: An Incitement to Violence
Sometimes living in Seattle is dangerous. When I was living in Boston the impulse to hitch a lift over to Remond and pummel the people responsible for IE, while strong, usually wasn’t strong enough to over come the 3,000 intervening miles.
But just launching IE really sucks the beauty and joy out of the world. For example, if you were playing with laying out a new tab-based CSS interface for a project you’re working on, and you had alighted on a simple yet elegant solution for attaching those tabs to a box using a negative top-margin, you might feel moved to violence when IE6/Win inexplicably freaked out at this relatively simple construct. (for the record IE5/Mac works just fine) I’ve done a bit of goggling, and I’m not turning up any info on a IE6 negative margin bug. Anyone have the scoop?
The behaviour in the context of LM seems to be different (it just screws up the whole left hand column), so here it is on its own page.
A simplified example of the code I was playing with was:
container {
margin: 30px;
border: 1px solid #ccc;
}
#navtabs {
padding: 0;
margin: 0;
margin-top: -20px;
padding-bottom: 20px;
}
#navtabs ul, #navtabs li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
#navtabs a:link, #navtabs a:visited {
background: #eee;
border: 1px solid #ccc;
float: left;
line-height: 14px;
font-size: small;
margin-right: 4px;
padding: 2px 4px 2px 4px;
text-decoration: none;
}
In Mozilla this works as expected (at least as I expect it), in Internet Explorer you should be seeing 3-4 random grey horizontal lines.
The source:
container {
margin: 30px;
border: 1px solid #ccc;
}
#navtabs {
padding: 0;
margin: 0;
margin-top: -20px;
padding-bottom: 20px;
}
#navtabs ul, #navtabs li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
#navtabs a:link, #navtabs a:visited {
background: #eee;
border: 1px solid #ccc;
float: left;
line-height: 14px;
font-size: small;
margin-right: 4px;
padding: 2px 4px 2px 4px;
text-decoration: none;
}