Skip to Main Content


Local Directory Services

CSS Articles

Doubled Float Margins in IE

By: Matthew Hadwen - Customer Street CSS Pro
Comments (3)
Jan
09
Affects Browsers: IE 5.01 to IE 6

If you’ve ever had problems positioning floated elements in IE (Which you probably have because it’s IE) then it could be
because your margins are being doubled. IE doubles the widths of any left and right margins applied to a floated
element. As far as i’m aware this has been the case since at least version 5.01.

Before IE7 came along the solution to this was simply to add an extra hacked line into your stylesheet and halve the
offending margin accordingly
div.block {
width:100px;
height:150px;
float:left;
margin-right:10px;
/margin-right:5px;
}
This would escape the first character of the line margin right making the line look like garbage in all browsers except IE
which will just ignore the escaped character and accept the new margin-right command overwriting the first.

IMPORTANT! This is a very bad way of hacking a stylesheet for IE for all sorts of reasons, future compatibility for one.

Unfortunately IE7 has corrected the double margin issue but will still read the css hack, meaning we now have a margin half the width that we want.

A much better way to work around this problem would be to link to stylesheet using a conditional comment, allowing you to target specific versions of IE.

<!--[if lt IE 7]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

This way you can keep all your required IE code separate from all the well behaved browsers :)

If you liked that, then try these...

Duplicate Content IE6
At Customer Street we recently encountered a strange problem with duplicate text appearing in Internet Explorer at the bottom of some dynamic listings.

Microsoft Almost Gets It Right!
Here at Customer Street we like to do things right.

Web Semantics And Table-less Forms
For a long time, since I started taking a very active interest in Web Standards and learning CSS I have always queried the methods by which forms, such as contact forms, should be correctly marked up and displayed.

  • Digg
  • del.icio.us
  • Netvouz
  • ThisNext
  • MisterWong
  • BlinkList
  • blogmarks
  • Netscape
  • NewsVine
  • Reddit
  • Slashdot
  • Spurl
  • StumbleUpon
  • Technorati
  • YahooMyWeb
1 Star2 Stars3 Stars4 Stars5 Stars
2.5
after 4 Votes
Back to Top

3 Comments

On Thu 24 Jan James wrote :

Alternately you can just stick a display:inline before the float and the problem goes away. Causes no problems in any browser as the display:inline is overridden by the float turning the object back into a block level element. Plus your CSS will validate and you have one less http request reducing the load on your sever.

On Tue 29 Jan Matthew Hadwen - Customer Street CSS Pro wrote :

Sweet, cheers for that James, I like neat and tidy solutions like that. Just tried it out and haven’t found any problems so far. Though I still feel that an IE 6 stylesheet is a good idea in many cases where invalid IE hacks would be the only other alternative.

On Tue 12 Feb Alex wrote :

‘display: inline’ is the method I use too as it reduces the likelihood that you will need CSS hacks, or alternate (IE Specfic) stylesheets, which is always better as James says. Who knows when IE will finally things ’standard’!

Leave a comment

Back to Top

Trade Directories

click on the image to view the trade specific directory;