Page Renders wrong in IE6

**prijke** · 02/04/2010, 09:22

Hi All,

This page http://test.tv-wijdewormer.nl/bestuu...ommissies.html renders wrong in IE6 for a reason I am unable to determine (css novice, sorry ;-)

I know it is not a real TL question, it is a CSS question, so if someone's able to help me GREAT. The page uses the gridpx.css from TL to define smaller content boxes. Maybe it has something to do with multiple classes being assigned by TL? I really don't know. Can you help me?

If not, what is the best forum to post css / browser issues to get great help?

Thanks anyway.....

Best regards,
Paul

**hunter58** · 02/04/2010, 13:26

Hi

First of al use a validator services for your CSS and (X)HTML. You will see there are several problems with your CSS. Start with correcting these. Second I think this has to do with the boxmodel IE is using. Try to avoid setting margin and padding in the same style. Use the wrapper DIV to separate these. Further more a quick scan gave me the impression you are setting the width in a style equal to the available width. This is not correct. The width setting is for the content space only. You have to add, margin, border and padding to the width to get the total width.
It looks to me this exceeds the available space, which forces the content area down.

success

**prijke** · 02/04/2010, 14:00

Originally Posted by hunter58

First of al use a validator services for your CSS and (X)HTML. You will see there are several problems with your CSS. Start with correcting these.
success

I think these are css errors from typolight then... it is the mediabox.

Originally Posted by hunter58

Try to avoid setting margin and padding in the same style. Use the wrapper DIV to separate these.

Can you give me an example of what you mean?

Originally Posted by hunter58

Further more a quick scan gave me the impression you are setting the width in a style equal to the available width. This is not correct. The width setting is for the content space only. You have to add, margin, border and padding to the width to get the total width.

Can you please show me where I do that? I think indeed if it exceeds, it flow to the bottom... but I can't find where I do that. What tool do you use to discover these?

Thanks Hunter, I really appreciate this!

**tsarma** · 02/04/2010, 17:03

Hi there,
have you tried giving
A) #main a padding-left : 240px; INSTEAD of margin-left : 240px; works? if not try

B)
#main {
padding-left : 240px;
}
* html #main {
margin-left : -3px;
}
Hope it kills the bug.

**Vera** · 02/04/2010, 19:34

I think Hunter did it just by looking at your code. Width and height for any block level element consists of 7 (yes, 7) separate parts:

Code:

margin | border | padding, width, padding | border | margin

. All of these together make up the width. This comes with some problems: Setting the witdh to 100% only works if none of the other parts take up any space. If the width is 100% and border is 1px, then the total width will be 100%+2px.

Anyhow, I'm sure you probably knew some or all of what I just explained. I just hoped to have clarified Hunters post

ops:

@markhurd: Thanks, I should have mentioned that; this thread is about IE6 rendering differently.

**markhurd** · 02/04/2010, 19:59

IE6 actually computes the box model (the 7 parts that determine width, as Vera mentioned) differently than anything else.
http://en.wikipedia.org/wiki/Internet_E ... _model_bug

There are quite a few workarounds for it, if you determine it's the issue. Just search for "box model hack"

**hunter58** · 02/05/2010, 01:12

Originally Posted by Vera

I think Hunter did it just by looking at your code. .

Thanks for the clarification. That is exactly what I did. In the code I found percentages and pixels mixed together for width , border, margins and padding. The code was shouting to me : box problem!!

**prijke** · 02/05/2010, 16:19

Hi All,

Thanks sofar.... I found that adding display:inline to floated elements should solve double margins... And also i tried using a script calles IE8.js which claims to set IE6 acting like a compiant browser....

Not helping a lot still.... Although most look fine, there is the issue that the content of main is pushed below cause it is still too wide (according to IE6)

I think I understand most of what you are saying, I am still struggling identifying the problem.... Does anyone know where in my code I am violating the total width of the content?

Thanks again everybody.... Even if this is NOT a Typolight issue (I guess).

**prijke** · 02/05/2010, 17:54

I kinda solved it...

It was because of the gridpx.css. This had floating boxes I used, ot 700 and 340 px wide. I added the following:
.breed {_width:695px;}
.smal {_width:335px;}

And now the page shows viewable in IE6. Still not perfect, but IE6 can read the stuff now. It is good enough for now, considering there are not that many IE6 users anymore (max. 20% according to marketshare.... still a lot!)

Regards,
Paul