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!””/></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 ””/></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 ....