7 replies [Last post]
jamjamjammie
Offline
newbie
Last seen: 15 years 24 weeks ago
Joined: 2007-01-20
Posts: 4
Points: 0

Hi everybody,

I am hoping someone might be able to help me here. I have a weird display bug relating to just IE6. I have tried to search for fixes relating to this problem but nothing I have found seems to cover the issue I am having.

This is a image of what the error looks like:

This is a image of what it should look like:

A working copy of this page can be found at http://www.jamiekemp.co.uk/csserror/index.html

I think this error is caused by the table used to surround my form is being cleared from the two divs that sit on the left. How can i fix this?

Thanks

Jamie

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you try

Can you try #maincontainer{zoom:1;} or #main (to test only)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jamjamjammie
Offline
newbie
Last seen: 15 years 24 weeks ago
Joined: 2007-01-20
Posts: 4
Points: 0

That works. Is there a

That works - Thanks Hugo. Is there a standards way of doing this. As zoom brings up a error when validating. As my code must validate.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Notice Hugo said (to test

Notice Hugo said (to test only)?

This is a test for hasLayout, if I'm not mistaken.

Hugo will be along in a while to explain it to you, he knows more about it than anyone else here Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

jamjamjammie
Offline
newbie
Last seen: 15 years 24 weeks ago
Joined: 2007-01-20
Posts: 4
Points: 0

Ok. Thanks .

Ok. Thanks Smile.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not really more than anyone

Not really more than anyone else but have like many learn't to deal with what is probably the worst thing MS managed to introduce into their mess of a series of browsers.

Essentially and in a nutshell elements rendered by IE require that they tell IE what they are explicitely, IE does not know how to render elements when they carry no information such as width or height (two of the triggers) it seems to struggle to define that object within the scope of the others objects and canvas.

This 'thing' ('Construct') is known as hasLayout and is not part of the specs not is it meant to exist.

certain properties automatically set an element to hasLayout=true such as a floated element, tables, body, these elements are always set to true, but plain old divs are not unless certain other properties are set , as mentioned two of these are width/height setting either of these in IE will trigger hasLayout, as will inline-block, zoom:.

Zoom is propriatary, so will not validate but it's useful as a test since zoom:1; will have no consequences for the page.

With IE6 the accepted and simple method of setting hasLayout was to use the star selector filter * html selector{height:1%;} sadly this isn't recognized by IE7 which also sadly still requires that hasLayout is set at times and often setting width/height is not desirable.

Another method to suit both browsers is to use display:inline-block; but straight after re-state the selector ruleset but with just display:block, this re-sets things for other browsers but is safe as hasLayout once set can't be unset.

The method one chooses is largely down to what suits the circumstances and layout.

Further detailed info on hasLayout can be found if you look for a post by Chris..S who has a link in his sig line to the most thorough independent examination and testing of this hatefull construct that constantly plagues us.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jamjamjammie
Offline
newbie
Last seen: 15 years 24 weeks ago
Joined: 2007-01-20
Posts: 4
Points: 0

Thanks so much for this. I

Thanks so much for this. I understand now why this is happening and so far i have not seen this issue in IE7 so I have just used the first fix. I will keep the second one in mind in the case it does crop up.

Thanks again.

Jamie

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It was ok in IE7 as you have

It was ok in IE7 as you have a min-height rule on #main which is triggering hasLayout, IE6 as we know does not get comlicated rules such as min/max.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me