Blast from the past version 5.2 IE causes problems

Hi from working at home on a bank holiday York UK!

On this page www.davidclick.com i thought i’d resolved all cross browser layout issues but oh no…

A friend who looked at this page at work looked at it through an old version of IE. Now i work on a mac so the only way to get close to see the sight how they did was to download IE version 5.2, apparently there is no later version on the mac.

When i did download it, Yikkes!!! The homepage looks like the screen grab above. So whilst its ok on may browsers its just aint right on ancient versions of IE which alot of public sector offices in the UK still use.

So my question is please… Is there a css fix to stop the div id portfolio overlapping the div id intro?

Heres the offending code…

body {
  background-color:#747170;
  margin:0px;
}

#container {
	width:50%;
	margin-left: auto;
    margin-right: auto;
	background-color:#323C4D;
}



#tree {
  position: absolute;
  margin-left: 65%;
  margin-top: 10%;
  bottom: 0;
  background:  url(../images/tennis.jpg) no-repeat;
  width: 331px;
  height: 400px;
  top: 70px;
  z-index: 10;
  

}
#logo a {
text-decoration: none;
color: #CDCC00;
}

#logo a:hover {
color: white;
}


#logo {
  position: absolute;
  margin-top: -1%;
  padding-top:0px;
  margin-left: 53%;
  width: 500px;
  height: 306px;
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
}

#logo .datestamp {
	font-style:italic;
	font-size:small;
	text-decoration:underline;
	padding-bottom:40px;
}


#logo p {
  font-size:1.25em;
}


#intro {
  position: absolute;
  margin-top: 1%;
  left: 40px;
  background:  url(../images/photographer_11.jpg) no-repeat;
  padding: 0px 0 20px 65px;
  width: 500px;
  color: #fff;
  font-family: Arial,Helvetica, sans-serif;
  font-size: 0.75em;
  font-stretch:semi-expanded;
  font-weight:200;
  
}
#intro .marginzap {
	padding-bottom:-1px;
	margin-bottom:-1px;
	
}

#intro .marginzap2 {
	padding-top:-7px;
	margin-top:-7px;
}



#intro h1 {
padding-top: 0px;
margin-top:0px;
padding-left:5px;
}



#intro a {
text-decoration: none;
color: #CDCC00;
}

#intro a:hover {
color: white;
}

#footer {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 border-top: 1px dotted #AAAAAA;
 background-color: #747170;
 color: white;
 font-family: Georgia, serif;
 z-index: 50;
}
#footer p {
 margin: 0.5em;
 padding: 0;
 z-index: 50; 
} 

#footer a {
text-decoration: none;
color: #CDCC00;
}

#footer a:hover {
color: white;
}
#intro span {
  position: absolute;
  top: -1000px;  
}

#intro p {
  margin: 0px;
  color: #CDCC00;
  font-weight: bold;
  padding: 0px;
  

}

#portfolio ul {
  position: absolute;
  top: 35%;
  left: 40px;
  z-index: 20;
  list-style: none inside;
  width: 482px;
  height: 294px;
  padding-bottom: 20px;

}
/* This is a one line comment in CSS */
#portfolio ul li {
  width: 135px;
  height: 135px;
  float: left;
  margin: 0px 18px 18px 0;
  background:  url(../images/bg_checkered_test_10.gif);
  z-index: 20;
  
}

#portfolio ul li a {
  float: left;
  width: 102px;
  height: 102px;
  margin: 18px 0 0 18px;
  z-index: 20;
}

#portfolio ul li a img {
  border: 0;
  z-index: 20;
  
}



#nav {
list-style-type: none;
position: absolute;
margin-top: 10px;
padding-bottom: 0px;
top:120%;
margin: 0;
  padding: 0;
  background: #CCCC00;
  list-style-type: none;
  width: 767px;    
  float: left; /* Contain floated list items */ 
}

#nav li {
  margin: 0;
  padding: 0;
  float: left;
  display: inline;
}
#nav a {
  float: left;
  width: 100px;
  color: #FFF;
  text-decoration: none;
  line-height: 2.5;
  text-align: center;
  border-right: 1px solid #FFF;
}
#nav #nav_con a {
  border: none;
}
#nav a:hover {
  background: #FF9933;
}
#body_hom #nav_hom a, #body_map #nav_map a,
    #body_jou #nav_jou a,#body_his #nav_his a,
    #body_ref #nav_ref a,
    #body_con #nav_con a {
  background: #BEB06F;
  color: #1A1303;
  font-weight: bold;
}

.boldblack
{
	color:#000;
	font-weight:bold;
}

#container {
	width:80%;
	margin-left: auto;
    margin-right: auto;
	background-color:#cdcc00;
	
}


/CODE]


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>York wedding photographer - davidclick.com Call David Honan 077520 28747</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<meta http-equiv=“Content-Language” content=“en” />
<link rel=“stylesheet” type=“text/css” href=“css/frontpage.css” />
<meta name=“google-site-verification” content=“QuJCWse990KzCSW_6xHnJI8RemJ4uORIrAxU96bO6ug” />
</head>
<body>
<div id=“logo”>
<h2>Hi and welcome to davidclick.com - York’s wedding photographer.</h2>
<p><strong>“York wedding photography with personality”</strong><br/>
If you want a <strong><a href=“web_page/about_me.htm” title=“York wedding photographer”>York wedding photographer</a> </strong>who’s got the personality to keep everyone smiling, willing to give you total control over your pics and delivers drop dead gorgeous Graphistudio wedding albums you’re in luck ;-)</p>
<p>Using the very best of Nikon camera equipment & Elinchrom studio lighting, professional wedding photographic services comes as standard as does a few laughs along the way.</p>
<p>York & Leeds areas covered.</p>
<p>Call David Honan today on 077520 28747 / 01904 410 142 and get your wedding photographer booked for 2010 and 2011.</p>
<p class=“datestamp”>Last updated: 11th May 2010, just after Later Live with Jools Holland.</p>
</div>
<div id=“intro”>
<h1>York wedding photographer www.davidclick.com </h1>
<h2 class=“marginzap”>Tel 01904 410142 / 077520 28747</h2>
<h2 class=“marginzap2”><a href=“web_page/louisa_simon.htm” title=“York wedding photographer examples”>Examples</a> | <a href=“web_page/prices.htm” title=“York wedding photographer prices”>Prices </a>| <a href=“web_page/about_me.htm” title=“York wedding photographer with personality”>About Me</a> | <a href=“york_wedding_photographer_advice.htm” title=“York wedding photography advice”>Advice</a></h2>
</div>
<div id=“portfolio”>
<ul>
<li><a href=“…/web_page/louisa_simon.htm” title=“York wedding photographer - KP Club examples”><img src=“images/thumb/louisa_ready_99.jpg"alt=”“The big kiss ”" /> </a></li>
<li><a href=“…/web_page/thumbnails4.htm” title=“York wedding photographer - Swinton Park examples”><img src=“images/girl2_99.jpg” alt=““ Keep your distance bridesmaids, this is my show ””/></a></li>
<li><a href=“…/web_page/thumbnails2.htm” title=“York wedding photographer - Feversham Arms examples”><img src=“images/thumb/gaze_99_2.jpg” alt=““eyes meet””/></a></li>
<li><a href=“…/web_page/thumbnails5.htm”><img src=“images/thumb/confetti_99_2.jpg” alt=““ Hey stop pouring confetti down my back!&#8221”/></a></li>
<li><a href=“…/web_page/richard_jodie.htm”><img src=“images/thumb/Rj_museum_99_99.jpg” alt=““ ST Mary VIP’s ””/></a></li>
<li><a href=“…/web_page/thumbnails3.htm”><img src=“images/thumb/sophie_smile_99.jpg” alt=““ Dress amazing at any angle :slight_smile: ””/></a></li>
</ul>
</div>
<div id=“footer”>
<p><a href="mailto:david.honan@btinternet.com" title=“eMail York wedding photographer David Honan”>david.honan@btinternet.com</a> | <a href=“web_page/prices.htm” title=“York wedding photographer prices”>Prices</a> | Studio: 5 Drummond House |
College Mews | Heworth Green | York | Y031 7SH | Tel: 01904 410 142 / 077520
28747</p>
</div>
<script type=“text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=‘text/javascript’%3E%3C/script%3E”));
</script>
<script type=“text/javascript”>
try {
var pageTracker = _gat._getTracker(“UA-1376189-4”);
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>



Any insights welcome ....

In short, just forget about this thread, go get some sleep, and go eat.

IE5 is dead, don’t even consider c oding for it. THe AP issues you are experiencing SHOULD be recoded (I’d personally do it (well, I’d never be in this case tbh)) but it’s up to you whether you want to :slight_smile:

It’s working until proven broken :slight_smile:

Thank you for your replies :slight_smile:

So is there no problem with the layout then? Would there be a benefit from applying Ryans suggestion of not having absolute references?

I’m a bit confused, but I think Ryan has a point about the absolute references.

So my question is - will this page www.davidclick.com encounter any rendering issues like the one displyed in the screen grab right at the beginning of this post?

Any insights welcome :slight_smile:

Hi Ryan & thank you for your advice :slight_smile:

In a few hours or so I’m going to get rid of the absolute references with hope I dont enter a world of pain but I see thats what i need to do to solve it once and for all.

Regarding your surprise your surprise at using absolute references my answer is a couple of years ago I used a sitepoint book for a layout think it was Designing without tables. I took certain aspects of it and discarded others but I think on reflection the bits I knocked out have caused the remaining bits not to work so well if you see what I mean.

But before i start replacing the absolute positioning references I would like to be absolutely sure on one thing please… Should I replace all absolute references or just some in particular?

Also would lve to know why its OK in safari, firefox, IE 8 - really thought this layout was sound :slight_smile:

Seriously, why are you concerning yourself with IE5.x? It was superseded in 2001, and its successor’s status as being worthy of concern is hotly debated. It, v.6, is now two major revisions behind the curve itself. Anyone using IE5.x expects to see wonky rendering. Let them. :stuck_out_tongue:

cheers,

gary

You probably work hard on getting things consistent across browsers but IE for the Mac has been dead for years and you’d be wasting your time trying to get it to work in that browser.

Hi, first of all, why have you absoltuely positioned the boxes to hte left? What purpose does that serve? Had you not AP’d it (and floated it instead) you would not be running into this problem :).
PS-add this below to fix double float margin bugs


#portfolio ul li a, #portfolio ul li{display:inline;}

But rework that left column to not use absolute positioning :slight_smile:

Although, any browser below IE6 I definately would not bother with :wink:

ooph, that page is knee deep in problems. I’m not even sure where I’d begin on cleaning it up…

Since I would assume that here the appearance is ALSO borked in modern versions of Opera and IE7, the problems run pretty deep… Starting in the markup let’s go down the list of issues.

H2 preceeding H1 - that’s called a nonsensical heading order and probably means your source order is wrong, or your

H2’s for content - those are not STARTING individual sections of content, why are you even USING heading tags there?!?

Though really 99.99% of your problems can be gleaned from this one line of code:
<link rel=“stylesheet” type=“text/css” href=“css/frontpage.css” />

Frontpage? Ouch… or are you just calling it that because it’s the main page of the site? If so, are you sharing no styling between pages? If so, why bother with CSS at all?

Going through it you’ve got different layouts on every page - that’s usually considered bad design… It breaks horribly on large font/120dpi systems (like mine)

Though I have to ask, did some “SEO Expert” try to ‘help’ you already? I’m seeing a lot of abuse of title attributes for no good reason in there too - and it would explain the heading tag abuse as well.

Bottom line, I would suggest pitching the whole thing and starting over from scratch as there’s nothing worth saving here…