IE carnage! v5, 5.5, and 6 all look totally different

August 30, 200719 yr

Hi

First off, I am a PHP dev so pretty new to the whole XHTML / CSS scene. I am determined to learn properly, but in the past due to time restrictions and demanding designers I have had to resort to table layouts to get things to do what was wanted.

Anyways I have made a start on my first PROPER table-less layout, and I am already in a state of panic.

http://antimac.meloncreative.co.uk/ebusiness/index.php

I have it up and running in Firefox, Safari, IE 5, 5.5, and 6. So far Safari and Firefox have been pretty good and have got it looking as it should, but IE has managed to break every page in a different way, which again is totally different over the 3 different versions.

Now I know you should post all the source, but literally there are so many things broken over the whole site that I dont really know where to start! Its a centered layout, with a floating div on either the left OR right as a skyscraper, and a css rounded corners container for the content.

Some pages the skyscrapers are broken, others the rounded corner container bits are all over the place, plus the whole wrapper container which is a block colour sometimes works, sometimes distorts and is too big, but I am convinced thats because of something inside it going wrong.

I am going to start on the "whatwedo" page, as that seems most broken, so :

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>The Event Business</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>


<div id="wrap" class="pagecolor_o">
<div id="header"><img src="images/banner_logo_big.gif"></div>
<div id="nav">
	<a href="index.php"><img src="images/buttons/home.gif" border="0"></a><a href="index.php?view=whatwedo"><img src="images/buttons/whatwedo_on.gif" border="0"></a><a href="index.php?view=about"><img src="images/buttons/about.gif" border="0"></a><a href="index.php?view=clients"><img src="images/buttons/clients.gif" border="0"></a><a href="index.php?view=theteam"><img src="images/buttons/theteam.gif" border="0"></a><a href="index.php?view=contact"><img src="images/buttons/contact.gif" border="0"></a>	</div>
  <div id="sidebar_left" style="background: url(images/sides/whatwedo.gif) no-repeat; height: 347px; width: 79px;"></div><br>	<div id="main_center">

<div class="corners_wrapper size_b position">
	<div class="top_left"><img src="images/container/left_top_corner.gif" width="20" height="20" alt="" /></div>
	<div class="top size_b"><img src="images/container/top.gif" width="100%" height="20" alt="" /></div>
	<div class="top_right"><img src="images/container/right_top_corner.gif" width="27" height="20" alt="" /></div>
	<p class="clear" />
	<div class="innerdiv size_b">
		<img src="images/container/left.gif" width="20" height="1000px" class="insidePNG_left" />
		<img src="images/container/right.gif" width="27" height="1000px" class="insidePNG_right" />
		<div class="content">	
<script language="JavaScript">
<!-- Hide from old browsers

wwd_1aon = new Image(126, 122);
wwd_1aon.src = "images/rollovers/live_on.jpg";

wwd_1aoff = new Image(126, 122);
wwd_1aoff.src = "images/rollovers/live.jpg";

wwd_2aon = new Image(126, 122);
wwd_2aon.src = "images/rollovers/bespoke_on.jpg";

wwd_2aoff = new Image(126, 122);
wwd_2aoff.src = "images/rollovers/bespoke.jpg";

wwd_3aon = new Image(126, 122);
wwd_3aon.src = "images/rollovers/incentive_on.jpg";

wwd_3aoff = new Image(126, 122);
wwd_3aoff.src = "images/rollovers/incentive.jpg";



// FUNCTIONS
function
img_act(imgName) {
imgon = eval(imgName + "on.src");
document [imgName].src = imgon;
}
function
img_inact(imgName) {
imgoff = eval(imgName + "off.src");
document [imgName].src = imgoff;
}
// END HIDING FROM OLDER BROWSERS --></script>

<img src="images/whatwedowords.gif" style="padding-top: 8Px; padding-left: 15px; padding-right: 40px; float: left;">

<a href="index.php?view=whatwedo_live" onmouseover="img_act('wwd_1a')" onmouseout="img_inact('wwd_1a')"><img src="images/rollovers/live.jpg" border="0" name="wwd_1a"></a>
<a href="index.php?view=whatwedo_bespoke" onmouseover="img_act('wwd_2a')" onmouseout="img_inact('wwd_2a')"><img src="images/rollovers/bespoke.jpg" border="0" name="wwd_2a"></a>
<a href="index.php?view=whatwedo_incentive" onmouseover="img_act('wwd_3a')" onmouseout="img_inact('wwd_3a')"><img src="images/rollovers/incentive.jpg" border="0" name="wwd_3a"></a>
		</div>
	  </div>
	<p class="clear" />
	<div class="bottom_left"><img src="images/container/left_bottom_corner.gif" width="20" height="27" alt="" /></div>
	<div class="bottom size_b"><img src="images/container/bottom.gif" width="100%" height="27" alt="" /></div>
	<div class="bottom_right"><img src="images/container/right_bottom_corner.gif" width="27" height="27" alt="" /></div>
</div>


</div>

</div>

<div id="footer">
<span class="footer_left">Copyright the event business ltd. 2007</span>
<span class="footer_center">call 01295 268111</span>
<span class="footer_right">email. info@theeventbusiness.co.uk</span>
</div>

</body>
</html>

CSS

body,
html {

	font-family: helvetica;
	margin:0;
	padding:0;
	background-color : #ffffff;
	color : #000000;
	text-align : center;
	margin-top : 20px;
	margin-bottom : 20px;
	vertical-align : middle;
}
body {
	min-width:750px;
}
#wrap {
	margin:0 auto;
	width : 800px;
	max-width : 800px;
	min-width : 800px;
	height : 100%;
	margin-right : auto;
	margin-left : auto;
	margin-top : 0px;
	margin-bottom : 30px;
	text-align : left;
	display: table;
	/* border: 1px black solid; */

}
.pagecolor_o {
	background-color : #f47c31;
}
.pagecolor_p {
	background-color : #49176d;
}
.pagecolor_g {
	background-color : #bec0c2;
}
#header {
	width: 800px;
	background-color : #ffffff;
	text-align: right;
	padding:0;
	padding-bottom: 40px;
}
#nav {
	width: 100%;
	height: 36px;
	background-color : #ffffff;
	text-align: center;
	/* border: 1px black solid; */
}
#footer {
	width: 800px;
	padding:5px;
	background-color : #ffffff;
	border: 1px #ffffff solid;
	margin-right : auto;
	margin-left : auto;
	position: relative;
	font-size: 12px;
}
#main_left {		
	float:left;
	margin-right: auto;
	margin-left: 25px;
	margin-top: 50px;
	margin-bottom: 50px;
}
#main_right {		
	float:right;
	margin-left: auto;
	margin-right: 50px;
	margin-top: 50px;
	margin-bottom: 50px;
}
#main_center {		
	float:right;
	margin-left: auto;
	margin-right: 140px;
	margin-top: 50px;
	margin-bottom: 50px;
}
#main_full {
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 50px;
	margin-bottom: 50px;
}
#sidebar_left {
	background-color : #f47c31;
	float:left;
	width:79px;
	height: 508px;
	margin-top: 50px;
	margin-left: 25px;
	/* background: url("images/side_banner.gif") no-repeat; */
}
#sidebar_right {
	background-color : #f47c31;
	float:right;
	width:79px;
	height: 508px;
	padding: 10px;
	margin-top: 50px;
	/* background: url("images/side_banner.gif") no-repeat; */
}

.footer_left {
padding-right: 50px;
color: #f49031;
}
.footer_center {
color: #f49031;
}
.footer_right {
padding-left: 50px;
color: #602969;
}

.corners_wrapper { position: relative; padding-left: 20px; padding-right: 27px; }
.size_a { width: 580px; } /* -47px for padding */
.size_b { width: 470px; } /* -47px for padding */
.top_left {	position: absolute;	top: -20px;	left: 0px; width: 20px; height: 20px; }
.top { position: absolute; top: -20px; height: 20px; }
.top_right { position: absolute; top: -20px; right: 0px; width: 27px;	height: 20px; }
.bottom_left { position: absolute; bottom: -27px; left: 0px; width: 20px; height: 27px; }
.bottom { position: absolute; bottom: -27px; height: 27px; }
.bottom_right {	position: absolute;	bottom: -27px; right: 0px; width: 27px; height: 27px; }
.insidePNG_left { position: absolute; left: 0px; }
.insidePNG_right { position: absolute; right: 0px; }
.innerdiv {	position: relative;	overflow: hidden; margin-right: -27px; margin-left: -20px; padding-left: 20px; padding-right: 27px; }
.content { background-color: #ffffff; }
.position { top: 0px; }
.clear { font-size: 0; line-height: 0; height: 0; padding: 0; margin: 0; clear: both; }

/* form */

input.input_contact {
border: 1px solid #918f90;
width: 216px;
height: 20px;
}

textarea.tarea_contact {
border: 1px solid #918f90;
width: 216px;
height: 80px;
}

/* font styles */

.orange_header {
font-weight: bold;
font-size: 11px;
color: #f47c31;
text-decoration: none;
}

.purple_header {
font-weight: bold;
font-size: 11px;
color: #49176d;
text-decoration: none;
}

.purple_label {
font-size: 12px;
color: #49176d;
text-decoration: none;
vertical-align: top;
}

I realise that its a lot to go through, but if anyone can point me in the right direction then I would be mucho grateful! as literally dont know where to start at the mo lol

damnit i HATE ie Why cant everyone just use a proper browser?

August 30, 200719 yr

a really helpful hint would be as follows:

DO NOT TEST IN IE 5 or 5.5

they have a 0% market share - almost nobody uses it any more... you could look at every visitor for a year and you be very lucky to see even 1 ie <6 user.

testing suites should include (by order of importance) IE 6 (35%), FF (35%), IE 7 (20%), Safari(5%), Opera(2%) - all the others account for the remaining 3%, and most are spawn-browsers from IE 6 or FF.

August 30, 200719 yr

Author

Thanks for the tip Need to find a way to get IE7 installed under linux now As 5, 5.5, and 6 all work under wine these days but 7 is still a bit dodge I think.

Fixed a few bits, had to go multi browser stylesheets. Now only really got 2 major errors, and reckon I can sort those as they are the top / bottom margin issues

August 30, 200719 yr

What I do it make my sites work under Firefox, Opera and Safari. I then make it fit in IE last by using conditional comments to make final tweaks.

Here's an example from my own website which works all the way down to IE 5.5. IE 5 is still a mess and I'm not really too bothered about it. I've found that the biggest change between IE6 and 5.5 is mostly the box-layout mode. So after tweaking the dimmensions for some of the elements it usually works all right in IE5.5.

<link rel="stylesheet" type="text/css" media="screen" title="Firefly" href="http://www.thomthom.net/css/v2_1/screen.css" />

August 30, 200719 yr

What I do it make my sites work under Firefox, Opera and Safari. I then make it fit in IE last by using conditional comments to make final tweaks.

Here's an example from my own website which works all the way down to IE 5.5. IE 5 is still a mess and I'm not really too bothered about it. I've found that the biggest change between IE6 and 5.5 is mostly the box-layout mode. So after tweaking the dimmensions for some of the elements it usually works all right in IE5.5.

that's what I do. Fit it to the majority of browsers then just apply a tweek css sheet for IE.

August 30, 200719 yr

IE7 under Linux doesn't work, as it requires an activation sequence to go down (which wont work on a linux PC).. you might get it to work by installing it on a windows machine (NOT WINE) and copying all the referenced DLLs over to the correct places along with the program itself, but even so...

easier just to dual boot or VM.

September 4, 200719 yr

If people are silly enough to still be using IE5 and 5.5 then they deserve not to be able to be able to see the web correctly. Bill Gates isn't exactly supporting WIN95, nor can I get genuine parts for my '76 Mustang. Things move on...

IE carnage! v5, 5.5, and 6 all look totally different

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)