HTML Forum

**dente** · 08-03-2011, 08:47 AM

Hello,

Im having a problem with my website when viewing it on IE.
Firefox, Google Chrome and mobile phones are doing fine.

At the index pages you can see prices for my products but when using IE, the prices are more to the left and not in the grey spot where they should be like in firefox and other browsers..

I dont know what the problem is.. can someone help me out with this?

Thank you very much!

Website is in my signature

**serandfae** · 08-03-2011, 01:46 PM

What version of IE? I just checked it in IE7 and it's fine. If it's 6, don't bother. Sounds like that doubled-margin when floating in the same direction bug. I mean, if you just gotta, put a conditional comment in for the class the prices are in with a fix just for IE6 to behave, but no one anymore really fixes for it.

tim

**oberonplatform** · 08-04-2011, 05:27 AM

Try to activate the compatibility mode in IE

**dente** · 08-04-2011, 07:11 AM

Hello,

Thank you very much for looking.
Im using IE8 and the prices are not showing correctly
I also dont know how to activate compatibility mode in IE

Could you please tell me how to do it?

Again, thank you very much.

**lizciz** · 08-05-2011, 04:08 AM

I don't have access to IE8 right now so I can't see the issue. Just looking at your code, the only thing I can think of that may (or may not) help is to add a clearing div after your inline blocks.

HTML Code:

<div class="aligncenter">
   <div class="price">69.</div>
   <div class="point"><span>99</span><span>/month</span></div>
   <div style="clear:both;"></div><!-- THIS LINE IS NEW -->
</div>

**dente** · 08-06-2011, 10:02 AM

Thank you for looking at the code.
I tried adding a clearing div, but still no luck, it didnt change.
Is there maybe another solution for it?

Thank you again

**serandfae** · 08-06-2011, 09:06 PM

OK, finally got to look at it in IE8. I keep 7 on the home comp still because I debug for it far more than 8.

So you have a margin problem that's pushing some of the content to the next line. Looks OK in other browsers, so what you do is put in a conditional comment for IE8 that calls a stylesheet with just the fix for the affected class: the fix being a left margin less than what's in the regular stylesheet.

tim

**artViper** · 08-07-2011, 12:18 AM

If it's really the double-margin bug, you will need to add

display:inline

into the CSS rule for the element in question. Best would be do have this in an own CSS file for IE.

**serandfae** · 08-07-2011, 03:58 AM

Yeah, but that bug is pretty specific to IE6; never seen it in 8. But you are correct in saying that the correction should be specific to IE (in this case IE8) in its own CSS file called on by conditional comments.

Cheers, BTW, zum SEOMensch aus München! It's been years since I went to the Hofbräuhaus or the Deutsches Museum!

tim

**LadynRed** · 08-10-2011, 02:28 PM

IE8 does NOT have the doubled-margin bug, which had more to do with the way it handled floats than margins.

The problem is that IE8 does not support display: inline-block that you have here:

Quote:

.point {
color: #A1A1A1;
display: inline-block;
padding-left: 2px;
text-align: left;

}

You will need conditional comments and a separate css file to target IE8 and change that to display:inline for that browser only.

It is not necessary, and not the best practice, to be adding extraneous code such as divs just to clear floats, there are better methods.