Negative Margins IE8 Issue

1 Views

I’m trying to have our WordPress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8’s lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.

URL: http://trekcore.com/blog

Read More

The CSS controlling that separation is here: 

#secondary {
float:right;
width:300px;
margin-right:-320px;
}

Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. you should validate your html markups, 35 Errors and 11 warnings wont help.

    in the meanwhile, try this fix :

    .negative-margin-element {
    zoom: 1; /* ie hax*/
    position: relative; /* ie forced behavious*/
}

  2. You are using HTML5 elements and IE8 does not understand them and will ignore them and you can’t apply CSS to them because IE8 won’t know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8’s DOM tree and set them to block level.

    You can write your own code and CSS to do the same thing but the shiv is convenient.