Double margin bug. display: inline; doesn't work

Arno v. Lumig

Hello,

On my site I'm using divs to make the layout. The problem is that everything shows fine in opera/firefox/mozilla, but internet explorer gives me the double margin between my float: right and the text-div.

Using display: inline; won't work, there is no difference at all. I am using internet explorer 6.

I'll post screenshots below:

Iexplore:

The code I use for the quotebox:

tom69

You could make your frontpage: Cool looking and put 2 buttons on it.

- Opera
- Firefox
- And maybe also IE

Or you could say on your frontpage... best viewed with opera or firefox

Arno v. Lumig

Well, no offence, but that solution is just rubbish... Don't you hate it when you're visiting a site, and then you get that screen "Click HERE to visit my site!!!"... That's absolutely not the solution I'm going to use, sorry...

Thanks for your help tho...

Greetz,
Arno

Kaneda

Would (in general, goes for other people's questions too) be very helpful if one could actually see the site rather than a screendump and some percentage of the code - since the error may not be related to the bit of code you posted at all. Smile

Since we don't have that, the first question to ask would be: Are you in IE strict or quirks mode?

Actually, I'll assume you're in quirks mode, since otherwise, a font-size of "40" or "25", without unit ("px"), won't work properly.

So, that might be the first thing to consider. Add a DOCTYPE to the top of the page to switch IE into strict mode. First step in making it render more predictably. Smile

Then maybe try the "display: inline" fix again.

Arno v. Lumig

Oh... Weird... Validating the source and fixing all errors really fixed the problem. Now I don't even have the bug without display:inline used.

Well, I don't know why it happened, I'm just happy it did Smile

Thanks a lot,
Arno

----------POST BEFORE EDIT----------
Kaneda, thanks a lot for your advice. I did the things you said and also used the W3C validator to validate my site. There were some errors, which I fixed.

The site is http://arno.frih.net/schoolsite
The site is in Dutch, but I don't think that really matters...
Just look at the margin between the text and the quotebox, and you'll probably see what I mean (if you're using iexplore, that is...)

Thanks a lot,
Arno

Kaneda

Glad it worked. On the "weird" part... (you may know this, or know it now)... The most likely thing to have fixed the error is probably the DOCTYPE. As mentioned, without it, IE goes into "quirks mode" (to be compatible with old "IE only" sites) and (among MANY other things) renders with a different box model than other browsers.

IE's old box model: width = content + padding + border (width = "total width")
W3C's box model: width = content (padding and border are added to get the "total width").

Since that's quite a major difference in how to calculate the width of boxes, it's the most likely thing to have caused the problem. Smile