PDA

View Full Version : IE6 - Oh how buggy you are!


benzeman
01-01-11, 10:38
Hello!

I had some problems with overflow:hidden in IE6. A quick google found I needed to set width:100% and then all was OK - except the background colours for columns 1 (middle) and 3 (left most) had GONE! I found the problematic code for column 3 - but I can't find any issues with the code for column 1! Its probably really obvious, but I haven't spotted :( (I'm using IE6 from MultipleIE's to check IE6 compatibility). I know that IE6 should really be dead now - but as it isn't I still have to code for its buggyness.

Anyway - here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page | Title</title>
<style type="text/css">
body { margin: 0px; padding: 0px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; background-color: #cccccc; }
#centered { margin: 0 auto; min-width: 600px; width: 90%;}
div { margin: 0px; }
h1, h6 { background-color: #996699; color: #000000; padding: 0.25em; margin: 0px; }
h2 { border-bottom: solid 1px #ff0000; margin-top: 0px;}
p { margin: 0px; }
/* here come's the heavy lifting */
.column-wrap { position: relative; overflow: hidden; width: 100% !important; height: 100%;}
.column-1, .column-2, .column-3 {padding-bottom: 32767px !important; margin-bottom: -32767px !important;}
.column-1 { margin-left: 175px; margin-right: 175px; background-color: #ffcc00;}
.column-2 { position: absolute; right: 0px; top: 0px; width: 175px; background-color: #ff9900; }
.column-3 { position: absolute; left: 0px; top: 0px; width: 175px; background-color: #ff6600; }
</style>
</head>
<body>
<div id="centered">
<div class="header"><h1>Header</h1></div>
<div class="column-wrap">
<div class="column-1-wrapper">
<div class="column-1">
<h2>Column One</h2>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>
<div class="column-2-wrapper">
<div class="column-2">
<h2>Column Two</h2>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>
<div class="column-3-wrapper">
<div class="column-3">
<h2>Column Three</h2>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>
</div><!-- close column-wrap -->
<div class="footer"><h6>Footer</h6>
</div>
</div>
</body>
</html>

Thanks very much!!!
mikeyuk3
01-01-11, 12:04
im not an expert but have you tryed putting your css in a new file to see if that solves the problem?
benzeman
01-01-11, 12:09
I'll do that after I finish (and would have done it already but that would mean posting 2 files which would get confusing :L) - but that won't fix it :(
mikeyuk3
01-01-11, 12:11
ah i see, all i say is good luck xD lol i cant see whats wrong with it but im not great with html and stuff, im a real noob, and i gave up learning it ages ago.
benzeman
01-01-11, 12:18
Well, its IE6 it breaks with - any other browser (Modern IE, Firefox, Safara, Opera, Chrome, Opera mobile...) it works fine :)
mikeyuk3
01-01-11, 12:20
ture good point and i dont know why people dont UPDATE! i think ms should force them to update ie 6 because its stupid you cant eaven have tabs its that old.
benzeman
01-01-11, 12:26
Well tabs aren't the problem - it doesn't support web standards (fully)!!! And its full of bugs. But I need to support it because according to statcounter's global stats (http://gs.statcounter.com/#browser_version-ww-monthly-200912-201012), its still used by 6% of users!
mikeyuk3
01-01-11, 12:47
well if only 6% use it don't support it, because its just a waste of time.
iGoD ReLeNtLeS
01-01-11, 13:50
i too hate this browser, it caused massive problems when i was creating my site and forums. My guessing it it is likely to be one rule it doesn't like and its causing all the others to not be read.

My suggestion would be to remove each rule one by one and replacing it after you have removed it a viewed the page. Then if you do find a rule that is causing a problem, or perhaps more use a CSS if statement.

Alternatively, make 2 CSS files one for IE and one for all other browsers. That is what i solved mine with.


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->


<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
benzeman
01-01-11, 14:02
Honestly can't believe how easy that was!

Corrected code (changes are highlighted with ***'s)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page | Title</title>
<style type="text/css">
body { margin: 0px; padding: 0px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; background-color: #e8e8e8; }
#centered { margin: 0 auto; min-width: 600px; width: 90%;}
div { margin: 0px; }
h1, h6 { background-color: #996699; color: #000000; padding: 0.25em; margin: 0px; }
h2 { border-bottom: solid 1px #ff0000; margin-top: 0px;}
p { margin: 0px; }
/* here come's the heavy lifting */
.column-wrap { position: relative; overflow: hidden; height: 100%;}
.column-1, .column-2, .column-3 {padding-bottom: 32767px !important; margin-bottom: -32767px !important;}
.column-1 { ***position: relative;*** margin-left: 175px; margin-right: 175px; background-color: #ffcc00;}
.column-2 { position: absolute; right: 0px; top: 0px; width: 175px; background-color: #ff9900; }
.column-3 { position: absolute; left: 0px; top: 0px; width: 175px; background-color: #ff6600; }
</style>
</head>
<body>
<div id="centered">
<div class="header"><h1>Header</h1></div>
<div class="column-wrap">
<div class="column-1-wrapper">
<div class="column-1">
<h2>Column One</h2>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>
<div class="column-2-wrapper">
<div class="column-2">
<h2>Column Two</h2>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>
<div class="column-3-wrapper">
<div class="column-3">
<h2>Column Three</h2>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>
</div><!-- close column-wrap -->
<div class="footer"><h6>Footer</h6>
</div>
</div>
</body>
</html>
david891
01-01-11, 14:15
Glad you got it sorted :thumb:
Smifis
01-01-11, 19:18
I've always used float for columns,
Set height to 100%, set width, set float:left, simples.
Faz
01-01-11, 22:27
IE6 is used by so many in offices and schools etc. That's got to be the 60%...
heavywater
01-01-11, 23:37
IE6 is used by so many in offices and schools etc. That's got to be the 60%...
Aye, a lot of bespoke business software is reliant on it for compatibility. Plenty of small businesses (and quite a few larger) aren't going to want to fork out 5k to a few million for new software.
Faz
02-01-11, 12:28
My dad's office(public sector) still use Windows 2000, as well as IE6... they are in the process of upgrading to R2 and Windows 7, with, I suppose, Explorer 8. It's not cheap, mind, and every single person in the building (2000+) is going to be taught how to use Office 2010, in a course over a day. In groups of 10.

Now you know where your taxes go!
benzeman
03-01-11, 12:30
Its 6% (06, or six) not 60%
andyn
03-01-11, 12:52
Its 6% (06, or six) not 60%

Yeah, thankfully. Unfortunately however 6% is still too large a proportion of the user base to ignore for any serious website :<. IE6 is the bane of web developers everywhere.
Faz
03-01-11, 12:59
1 in 20... ouch!!