Margin Problem in IE

Forum Moderators: not2easy

Message Too Old, No Replies

Margin Problem in IE

terrybarnes

12:37 pm on Feb 16, 2009 (gmt 0)

I have a panel whereby I'll be adding a div with an image that is slightly out of the main panel. The problem I'm having is with IE6. The margins appears perfectly correct in all browsers with the exception of IE6 which seems to be adding an extra 20px on the right hand side.

Any help with this problem would be much appreciated.

Here's the basic code:

terrybarnes

12:46 pm on Feb 16, 2009 (gmt 0)

I've used this hack and it seems to have worked - but wondering if there's a way of getting to look correct, cross-browser, without having to hack:

* html .sticker{
margin-right: -20px; }
--></style>

swa66

1:37 pm on Feb 16, 2009 (gmt 0)

Instead of using selector parser hacks (which I consider dangerous), why not use conditional comments ?

That way you can target IE6 without risk to the compliant browsers (it's all a comment in the html to them), and you can easily target specific IE versions to give them a workaround for their bugs).

Tip: don't target IE8 ... it'll have to do with the standards compliant code and hence force Microsoft into making/keeping it compliant.

terrybarnes

2:28 pm on Feb 16, 2009 (gmt 0)

With that do I then create a new stylesheet just for IE6? If so do I have to duplicate my existing stylesheet and then add the IE6 specific things?

swa66

5:05 pm on Feb 16, 2009 (gmt 0)

Conditional comments: [webmasterworld.com...] (2 years old now)

How I use it nowadays:


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

The "style.css" is applied to all browsers, including IE.
The ie6.css and ie7.css files are just applied on top of the style.css to IE6 and IE7 respectively.

Sometimes you run into a stuation where IE6 and IE7 need exactly the same fixes


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

the "lt" is less than (there's a lot of other options), but this one makes sure not to target IE8, which should not need any of the old fixes anyway.

terrybarnes

5:10 pm on Feb 16, 2009 (gmt 0)

Fantastic - thanks for your help with this. Now I fully understand and will definitely use conditional comments rather than hacks