Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE6 Woes forcing float to clear div 2

Status
Not open for further replies.

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hi,

I have been told I have a floating issue with IE6 on my new website, but I don't have a machine with IE6 anymore to be able to test let alone rectify.

Can someone with IE6 please advise the problem and let me know what I can do to fix it.

Code:
[URL unfurl="true"]http://www.pattayaholidayflats.com/home.shtml[/URL]

Many thanks.

1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
It has to do with ie6 and the box model - it basically adds the padding and margin to your defined widths making your divs wider in ie6 than in in other browsers..

If you make the #page width: 990px rather than 960px, it allows the columns to float side-by-side. (this may break the rest of the layout - didn't really look in any other browsers or with background on.)



Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
dang that IE6 box model rubbish!

Thanks Greg,

Until you guys taught me better I used to think IE was better than other browsers, I still do as at least IE7 fixed alot of the CSS woes.

But it still comes back to haunt me when people use IE6.

OK, at least I know the problem and hopefully can now resolve the issue easily, without having IE6 to test with.

You tend to forget while coding that IE6 adds padding + margin together making the element wider, instead of leaving a gap!

Anyone got an idea on the use of IE6 still, when will it become obsolete like IE5?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Anyone got an idea on the use of IE6 still, when will it become obsolete like IE5?

I wish I knew - we have over 10,000 ie6 users at my company.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
IE6 actually applies the correct box model when you supply a full and valid doctype. Which your page does. So your box model should be the same as with other browsers.

However, the issue might be somewhere else. If you define your two containers' width to fit the #page, all modern browsers will respect that width. In IE6 however, this width might grow, if any of the child elements inside grow beyond the width of their parent. This would most likely explain why the columns no longer fit.

Try and check (you can do it in FF even) to see if any of the elements extend beyond the container. Those elements will grow the container in IE6, which will make it no longer fit.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
really, hmm , ok.

How do I check in FireFox, it looks fine in FF3, is there a 'make it look like IE6 quirks mode' option or something?

is there an easy way to test by adding overflow:hidden?

how do you say width : overflow hidden, height do what you want? or won't that work?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Code:
overflow-x: hidden;
overflow-y: auto;
IE actually supports that code. It might be that after this, some of your elements are chopped off in all the browsers supporting these attributes, because normal value of 'visible' works in a way that child elements that are larger than the container are shown, but are shown outside the container. IE6 shows it by enlarging the container.

In FF, if you have Firebug installed, you can see the space each element occupies. If you see an element that hangs over it's container boundaries, that's your likely culprit.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Nice one Cyril!

I'll get firebug and see how I get on, though the overflow thing would be a quick guide as stuff would get chopped off.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top