The screen grab heighlights a number of layout problems I’m getting when viewing this page www.davidclick.com in IE Version 6.0.2900
Would the following changes fix the listed problems…
Problem 1 - footer sitting too high because posible solution - #logo div needs to have more height #logo {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif; height:306px;
margin-left:53%;
margin-top:-1%;
padding-top:0;
position:absolute;
width:500px;
}
Problem 2 - Where it says hi & welcome the top header clips the viewport because there is no padding on the top
The problem with the footer in IE6 is that IE6 doesn’t understand position:fixed at all and without scripting it or using convoluted css the best bet is just to have a normal static footer for ie6 instead.
However because you have absolutely placed the left and right column it is then impossible to have a footer because absolute elements are removed from the flow. The columns will also overlap at small screens sizes anyway because they do not interact with each other.
The columns should be floated and then the footer cleared.
e.g.
<!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" />
<style>
body {
background-color:#747170;
margin:0px;
padding:20px 0 ;
}
#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(http://www.davidclick.com/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 {
float:right;
width: 500px;
margin:0 10% 0 0;
display:inline;
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 {
float:left;
margin:10px 0 0 40px;
display:inline;
background: url(http://www.davidclick.com/images/photographer_11.jpg) no-repeat;
padding: 0px 0 20px 65px;
width: 460px;
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;
font-size:180%;
}
#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;
}
* html #footer{
position:static;
clear:both
}
#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: relative;
z-index: 20;
list-style: none inside;
width: 482px;
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(http://www.davidclick.com/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;
}
</style>
<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="http://www.davidclick.com/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="http://www.davidclick.com/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="http://www.davidclick.com/images/thumb/gaze_99_2.jpg" alt="“eyes meet”"/></a></li>
<li><a href="../web_page/thumbnails5.htm"><img src="http://www.davidclick.com/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="http://www.davidclick.com/images/thumb/Rj_museum_99_99.jpg" alt="“ ST Mary VIP's ”"/></a></li>
<li><a href="../web_page/thumbnails3.htm"><img src="http://www.davidclick.com/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>
</body>
</html>
However perhaps a re-think is needed because you have 2 fixed width columns in a fluid layout which makes no sense. Either have a fixed width centred container to hold the columns or make one of the columns fluid in width (the text column) so that it juts shrinks as required rather than always being 500px wide.
