IE double margin bug

[abidshahzad4u]

Hi

Most peoples know about IE double margin/padding bug.

I have searched and found some solutions for this but my case is odd one. I am displaying a div within a div. Internal div must be 200 pixels away form the outer one (Margin-Left). FF displays is correctly but IE doesn't. The div is not floated, displayed as block and contains some inner inline elements. If I set float:none, no change appears. If I set display to inline the whole structure messes up and the desired effect not appear (FF shifts downward).

<div class="outerDiv">
<div class="innerDiv">
<ul>
<li><img....></li>
<li><img....></li>
</ul>
</div>
</div>

.outerDiv { display:block; }
.innerDiv { margin-left:100px; display: inline; }

[swa66]

Just add the code that you need for all browsers but IE to your normal stylesheet and ignore IE flat out.
Then for each version of IE that you both care for and has a problem with that code: use a conditional comment and adjust what you need changed. It's working around bugs, so just halving the margin to compensate for the browser doubling it is a very good solution. Since for all other browsers (even future IE versions that should not have that bug anymore), see the conditional comment as a plain comment there's no danger they'll parse it by accident. Leaving them to only see normal sound code without any fixes at all. You rendering will be far more stable into the future.

[abidshahzad4u]

Thanks for reply

It's means that I have to write a lot of fixes for my whole site. As there will be many such issues. Can there is some fix except this?

[SuzyUK]

can I ask what if any the CSS for the <ul> & <li>s are?

is it possible you only have either the padding OR margin set in the <ul> CSS?

[SuzyUK]

sorry I didn't see your later reply, before I posted my question..

Yes there should be a way to fix it without IE specific code, but first we need to isolate the issue and see what is so different about your case. In my experience if it is the double margin bug the well documented fixes should work, if it's not working it's possible it's not the same bug or even a bug at all.

So can you make up a sample of the code, along with ul/li css, are you trying to get the images to display across the way or up and down? Which version of IE? If you use colours as backgrounds to the two divs and the <ul> it might help describe what you're seeing and what you want to see.