CSS Clear:both; bug in IE discussion. - GoFuckYourself.com

fris · 03-30-2009, 07:22 AM

#footer {clear:both;}

obviously works in firefox, but in IE, the footer and the section above it moves when you hover.

What fix do you guys use?

position:relative; or the clearfix hack?

03-30-2009, 07:25 AM

* {
margin: 0;
padding: 0;
border: none;
}

Bored · 03-30-2009, 08:27 AM

clearfix hax is not needed. try overflow: hidden; on the parent element

I would need to see a working example to see which IE bug is making it break

IE6 I would assume

Bored · 03-30-2009, 08:28 AM

Otherwise it could be a haslayout issue. Try putting display: inline-block; on certain elements untill you find the one thats causing problems

MetaMan · 03-30-2009, 08:41 AM

lets see the page,

you NEVER have to use hacks in CSS EVER honestly.

if you are forced to use a hack it means the page was coded wrong.

Bored · 03-30-2009, 08:43 AM

For the most part, except for IE6

Although a hack is usually not needed (some might consider IE only stylesheet a hack)

fris · 03-30-2009, 09:20 AM

Quote:

Originally Posted by MetaMan

lets see the page,

you NEVER have to use hacks in CSS EVER honestly.

if you are forced to use a hack it means the page was coded wrong.

http://pudly.com/~chris/default_main.html

scroll down to the bottom where the home submit bookmark and hover over it.

use internet explorer, its fine in firefox.

MetaMan · 03-30-2009, 09:54 AM

ok i had a second to help you on:

/*-----------------------------FOOTER*/
#footer {padding-top:10px;}
#nav {background:#111; height:26px; padding:5px;}
#nav * {display:block; float:left;}
#nav li {border-right:1px solid #3e3e3e; padding:5px 10px; height:15px;}
#nav a {color:#fff; font:normal 17px/18px arial; padding:0 5px;}
#nav a:hover {color:black; background:white;}
.note {background:white; padding:5px; font:normal 11px/12px arial;}

==========
take out #footer {padding-top:10px;} so change to
====================

/*-----------------------------FOOTER*/
#nav {background:#111; height:26px; padding:5px;}
#nav * {display:block; float:left;}
#nav li {border-right:1px solid #3e3e3e; padding:5px 10px; height:15px;}
#nav a {color:#fff; font:normal 17px/18px arial; padding:0 5px;}
#nav a:hover {color:black; background:white;}
.note {background:white; padding:5px; font:normal 11px/12px arial;}

fris · 03-30-2009, 10:13 AM

thx, works now.

potter · 03-30-2009, 10:16 AM

yeah clear both will never cause problems. if you have a problem with IE 6 it's 99.9% of the time going to do with positioning or padding/margin elements somewhere. those are really the only problems ie has with rendering. for the most part it gets everything else right.

MetaMan · 03-30-2009, 10:25 AM

Quote:

Originally Posted by potter

yeah clear both will never cause problems. if you have a problem with IE 6 it's 99.9% of the time going to do with positioning or padding/margin elements somewhere. those are really the only problems ie has with rendering. for the most part it gets everything else right.

also MetaMan is web 2.0 and is never wrong about these things.

03-30-2009, 08:28 AM	#4
Bored Confirmed User Join Date: Feb 2002 Location: Canada Posts: 1,011	Otherwise it could be a haslayout issue. Try putting display: inline-block; on certain elements untill you find the one thats causing problems __________________ If Satan Wore a Hairpeice, there would be HELL TOUPEE!! HTML Porn pbbc fo li

03-30-2009, 08:43 AM	#6
Bored Confirmed User Join Date: Feb 2002 Location: Canada Posts: 1,011	For the most part, except for IE6 Although a hack is usually not needed (some might consider IE only stylesheet a hack) __________________ If Satan Wore a Hairpeice, there would be HELL TOUPEE!! HTML Porn pbbc fo li

03-30-2009, 10:13 AM	#9
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,359	thx, works now. __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

03-30-2009, 10:16 AM	#10
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	yeah clear both will never cause problems. if you have a problem with IE 6 it's 99.9% of the time going to do with positioning or padding/margin elements somewhere. those are really the only problems ie has with rendering. for the most part it gets everything else right. __________________

03-30-2009, 07:22 AM	#1
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,359	CSS Clear:both; bug in IE discussion. #footer {clear:both;} obviously works in firefox, but in IE, the footer and the section above it moves when you hover. What fix do you guys use? position:relative; or the clearfix hack? __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

03-30-2009, 07:25 AM	#2
AntiDrama Guest Posts: n/a	* { margin: 0; padding: 0; border: none; }

03-30-2009, 08:27 AM	#3
Bored Confirmed User Join Date: Feb 2002 Location: Canada Posts: 1,011	clearfix hax is not needed. try overflow: hidden; on the parent element I would need to see a working example to see which IE bug is making it break IE6 I would assume __________________ If Satan Wore a Hairpeice, there would be HELL TOUPEE!! HTML Porn pbbc fo li

03-30-2009, 08:41 AM	#5
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	lets see the page, you NEVER have to use hacks in CSS EVER honestly. if you are forced to use a hack it means the page was coded wrong.

03-30-2009, 09:54 AM	#8
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	ok i had a second to help you on: /-----------------------------FOOTER/ #footer {padding-top:10px;} #nav {background:#111; height:26px; padding:5px;} #nav * {display:block; float:left;} #nav li {border-right:1px solid #3e3e3e; padding:5px 10px; height:15px;} #nav a {color:#fff; font:normal 17px/18px arial; padding:0 5px;} #nav a:hover {color:black; background:white;} .note {background:white; padding:5px; font:normal 11px/12px arial;} ========== take out #footer {padding-top:10px;} so change to ==================== /-----------------------------FOOTER/ #nav {background:#111; height:26px; padding:5px;} #nav * {display:block; float:left;} #nav li {border-right:1px solid #3e3e3e; padding:5px 10px; height:15px;} #nav a {color:#fff; font:normal 17px/18px arial; padding:0 5px;} #nav a:hover {color:black; background:white;} .note {background:white; padding:5px; font:normal 11px/12px arial;}