I was having some issues with text that I solved using ems, but now I am trying to tackle how to get IE7 to handle margins like all the other browsers do. IE7 puts the

    not as far down as the browsers do. Here is the CSS for the

      banner .option li {

      width:120px; margin-bottom:12px; margin-top:20px; float:left; font-size:11px; text-align:left; list-style:none; }

      The top margin lands the list in the correct spot in most browsers, but with IE7 it is as if the margin top was 10px instead of 20px. Is there a hack for making this particular margin different in IE7 and keeping the above CSS for all other browsers?

      Thanks! Chris

4 answers


I'd recommend using conditional comments to target IE7 specifically.

<!--[if IE 7]>
<style type="text/css" media="screen">   
    banner.option li {
        margin-top:30px or whatever;

Other browsers will just see this as a comment and ignore it completely.

Answered almost 10 years ago by Rob Nixon
  • I put the above snippet (with the correct CSS) in my header and didn't have any luck. Is there something I am missing with conditional comments? Chris Strom almost 10 years ago
Marcel 57

A hack you could youe is *+html in front of your selector, and then add "30px" for IE7, or you may use conditional comments to add a IE specific stylesheet. But maybe you'd check if you did something wrong on the "global reset". I would check your CSS again before adding hacks.

Answered almost 10 years ago by Marcel
  • I have never used the *+html technique - is there anyway you could provide a little more insight on how to do that? Thanks for the help! Chris Strom almost 10 years ago

the ul.option has a 15px top margin and no padding, hence the li's top margins will be 'poking through' to give the 20px margin in most browsers, I suspect IE7 isn't handling the margin collapse in the same way, probably ignoring the li's top margins and using the ul's top margin instead.

what I would do for cross browser consistency is put the margin you need on the ul and then set the floated li's top margins to zero.

if you do want to margin the li's from the ul, then you'll need a border or 1px of top padding to give them something to 'push' against.

Answered almost 10 years ago by Tony Crockford

Or if you're feeling really bold, you can use Default Style which essentially removes all Browser specific styles and gives you a clean start to style using CSS.

There are some pitfalls to be aware of, but this is a really quick way to get cross browser appearance to match quickly.

Answered almost 10 years ago by Discorax