margin !!! IE should die

liunx

Guest
<!-- m --><a class="postlink" href="http://doubleimage.net/">http://doubleimage.net/</a><!-- m -->
In firefox is how it should look. But Nooo in IE the left nav bar and the contnt doesnt space right.Did you fix this? Looks fine to me.No i still looks like **** in iEAH! Sorry... I see what you mean... I'll put my thinking cap on.Use a css-hack to get rid of the extra space in IE. I like using this one:

#sidebar-a {
float: left;
width: 100px;
\width: 100px;
w\idth: 100px;
margin-top:3px;
margin-right:.5em;
margin-bottom:0;
/* Second margin will be displayed in IE */
margin-left:.5em !important;
margin-left:.15em;
padding: 3px;
background:#fff url(/bg_left.gif) repeat-y;
voice-family: "\"}\""; /*Tantek IE 5.5 hack - <!-- m --><a class="postlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html*/">http://www.tantek.com/CSS/Examples/boxmodelhack.html*/</a><!-- m -->
voice-family: inherit;
border: 1px solid #000;
height:100%;
}ahh thx Exurono, there is an easier hack to fix it with IE. When an element is floated IE for some reason doubles the margins because the element is block. However if you make the floated element inline it will work fine for all. So just add


display: inline;

or

* display: inline;


to your floated column (which i believe is what you referring to, though i cant see it as you used the other fix). This will fix it all very easily every time with no need to figure out the rest.Yeah, you were probably butting you head up against the IE double margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/doubled-margin.html">http://www.positioniseverything.net/exp ... argin.html</a><!-- m -->). Internet Explorer doubles the margin on the same side as an element is floated, i.e. a left floated element will get a double left margin in Internet Explorer. The display: inline; fixes the bug as pawky mentioned, but doesn't harm other browsers because floated elements are block level by default.
 
Back
Top