homepage Welcome to WebmasterWorld Guest from 54.161.192.61
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE double margin bug
abidshahzad4u

5+ Year Member



 
Msg#: 4029355 posted 5:01 pm on Nov 21, 2009 (gmt 0)

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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4029355 posted 7:51 pm on Nov 21, 2009 (gmt 0)

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

5+ Year Member



 
Msg#: 4029355 posted 12:56 pm on Nov 23, 2009 (gmt 0)

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

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4029355 posted 1:26 pm on Nov 23, 2009 (gmt 0)

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

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4029355 posted 5:29 pm on Nov 23, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved