I'm hoping for a little help. I'm designing a site and it was all going very well until i remembered (i should never have forgotten) to test the site in IE6 on XP. I found a very strange bug that i'm having difficulty identifying and fixing.
The site can be found at:
www.etechrepair.co.uk/rectory and the problem page can be seen by clicking on "Food service" on the top links. As you will see if you're using IE6 on XP, the whole #wrapper DIV seems to shift left about 20px or so on the foodservice.html page and others, but the homepage (index.html) is fine. I've looked through my CSS and can't see anything immediately obvious.
There are two css files i'm using, main.css and page.css
main.css is for the whole site and the homepage only uses main.css
page.css is for pages with some kind of content and foodservice.html uses both main.css and page.css
I tried attaching page.css to the homepage to see if the problem was caused by it but the homepage still looked fine.
I've got a feeling the problem might lie in the floats and margins i'm using but don't have enough understanding of them as yet to be able to identify the problem with the pages in IE6.
Can someone have a look and see if there is anything obvious causing the problem? I'm really stuck with this one and my guesswork hasn't fixed the problem yet!
main.css:
[code]html img {
margin: 0 auto;
padding: 0;
border:none;
}
body {
background-image:url(../si
te-images/
backgrad.j
pg);
background-repeat:repeat-x
;
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:83%;
}
h3{
padding:0px;
margin:0px;
font-size: 100%;
}
td{
border:0px;
padding:0px;
margin:0px;
}
p{
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
a:link {
text-decoration: none;
border-style:none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
form{
margin-top:3px;
}
#wrapper {
width:756px;
margin: 0 auto;
background-color: #FFFFFF;
}
#header {
margin:0 auto;
width: 756px;
height: 144px;
background:url(../site-ima
ges/header
_bg.jpg) no-repeat;
}
#top-menu
{
width:464px;
padding-top: 119px;
padding-left: 260px;
}
#logo-base {
width:210px;
height:37px;
background-color:#FFFFFF;
padding-left: 21px;
position: absolute;
top: 144px;
}
#content {
background-color:#FFFFFF;
width:756px;
float: left;
}
#footer {
margin:0 auto;
width:756px;
height: 203px;
background:url(../site-ima
ges/footer
-grad.jpg)
repeat-x;
clear:both;
}
.footer-divider {
float:left;
width:2px;
height:203px;
background:url(../site-ima
ges/footer
-divider.j
pg) repeat-x;
}
#footer-left{
width:194px;
height:170px;
float:left;
padding:18px;
color:#FFFFFF;
text-align:left;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:700;
font-size:15px;
padding-top: 15px;
}
#footer-middle{
width:270px;
height:183px;
float:left;
padding:10px;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:11px;
}
#footer-right{
background:url(../site-ima
ges/footer
-logos.jpg
) no-repeat;
width:216px;
height:189px;
float:left;
padding:7px;
}
#sidegrad-left {
position: absolute;
width: 21px;
height: 437px;
background: url(../site-images/sidegra
d-left.jpg
) no-repeat;
margin-left: -21px;
}
#sidegrad-right {
width: 21px;
height: 437px;
background: url(../site-images/sidegra
d-right.jp
g) no-repeat;
position: absolute;
margin-left: 756px;
}
.telfaxemail {
font-size:12px;
}
label{
font-size:10px;
}
input{
padding-left:3px;
margin:0px;
height:20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
textarea{
width:170px;
height:50px;
border:0px;
margin-left:5px;
}
.textbox {
background-image:url(../si
te-images/
textbox_bg
.gif);
border:0px;
height:19px;
width:165px;
background-repeat: no-repeat;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
margin-left:5px;
}
.forcesmall{
font-size:10px;
text-align:right;
}
.rowheight{
height:25px;
}
.submitbutton{
width:70px;
height:23px;
margin-top:3px;
margin-left:5px;
}
#corner-left {
background:url(../site-ima
ges/footer
-corner-le
ft.gif) no-repeat;
float:left;
height:12px;
width:12px;
margin-left:-18px;
margin-top: 5px;
}
#corner-right {
background:url(../site-ima
ges/footer
-corner-ri
ght.gif) no-repeat;
float:right;
height:12px;
width:12px;
margin-top: 184px;
margin-right: -9px;
}
#home-link {
position: absolute;
z-index: 5;
top: 20px;
margin-left: 34px;
}
#bottom-space{
height: 20px;
clear: both;
}
.right-blurb{
font-size: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
color: #325034;
font-weight: normal;
}[/code]
page.css:
[code]#left-panel {
float: left;
font-size: 100%;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin-top: 60px;
margin-left: 23px;
width: 220px;
margin-bottom: 300px;
}
#left-panel ul
{
list-style-type: none;
font-weight: bold;
padding: 0;
margin: 0;
}
#left-panel li
{
width: 219px;
line-height: 22px;
text-transform: capitalize;
margin-bottom: 5px;
}
#left-panel a
{
display: block;
background-image: url(../site-images/menu.pn
g);
background-repeat:no-repea
t;
font-size: 140%;
padding-left: 40px;
text-transform: uppercase;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#left-panel a:link, a:visited
{
color: #840000;
text-decoration: none;
}
#left-panel a:hover
{
background: url(../site-images/menu.pn
g) 0px -60px;
color: #FFFFFF;
}
.selected-line{
background: url(../site-images/menu.pn
g) 0px -60px;
}
#right-panel {
width:455px;
float: right;
margin-right: 35px;
margin-top: 25px;
font-size: 130%;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 50px;
color: #325034;
}
.product-box {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #F2A673;
float: right;
width: 400px;
margin-bottom: 20px;
}
.product-description {
font-size: 1em;
font-weight: bold;
float:right;
margin-top: 50px;
color: #38593A;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-align: right;
}
.product-picture {
float:left;
padding-bottom: 5px;
}
#page-title {
text-align: right;
width: 430px;
height: 30px;
background-image: url(../site-images/bottomd
ivider_hor
iz.gif);
background-repeat: no-repeat;
padding-right: 40px;
float: right;
background-position: 0 100%;
padding-bottom: 25px;
padding-top: 15px;
}
#topcorners{
position: absolute;
width: 187px;
height: 14px;
background-image: url(../site-images/menu-to
p.jpg);
background-repeat: no-repeat;
margin-left: -30px;
}
#bottomcorners{
position: absolute;
width: 187px;
height: 14px;
background-image: url(../site-images/menu-bo
ttom.jpg);
background-repeat: no-repeat;
margin-left: -30px;
}
#left-bottom{
position: absolute;
background-image: url(../site-images/foodser
vice-botto
m.jpg);
background-repeat: no-repeat;
width: 230px;
height: 248px;
margin-top: -265px;
margin-left: 5px;
}
.subheading {
color: #CD6E1A;
font-size: 160%;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.menu-oneline{
padding-top: 17px;
height: 43px;
}
.menu-twoline{
padding-top: 7px;
height: 53px;
}
/*LIGHTBOX CSS*/
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{
left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {
background-image: url(../lightbox/images/pre
vlabel.gif
);
background-repeat: no-repeat;
background-position: left 15%;
}
#nextLink:hover, #nextLink:visited:hover {
background-image: url(../lightbox/images/nex
tlabel.gif
);
background-repeat: no-repeat;
background-position: right 15%;
}
#imageDataContainer{
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
#imageData{
padding:0 10px;
color: #FF6600;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}[/code]
foodservice.html:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Rectory Foods</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
loadImages
.arguments
; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
a[i])&&x.o
Src;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
arent.fram
es.length)
{
d=parent.frames[n.substrin
g(p+1)].do
cument; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.
layers.len
gth;i++) x=MM_findObj(n,d.layers[i]
.document)
;
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
uments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=
3)
if ((x=MM_findObj(a[i]))!=nul
l){documen
t.MM_sr[j+
+]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="css/page.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-size: 120%;
font-weight: bold;
color: #325033;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="logo-base"><img src="site-images/logo_base
.jpg" alt="" width="211" height="37" /></div>
<div id="header">
<div id="home-link"><a href="index.html"><img src="site-images/home-link
.gif" alt="" style="border:none;" /></a></div>
<div id='sidegrad-left'></div>
<div id='sidegrad-right'></div>
<div id="top-menu">
<table class="topmenu" border="0" cellpadding="0" cellspacing="0" width="464">
<!-- fwtable fwsrc="topmenu.png" fwpage="Page 1" fwbase="topmenu.jpg" fwstyle="Dreamweaver" fwdocid = "739719146" fwnested="0" -->
<tr>
<td><img src="menu-images/spacer.gi
f" width="56" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="3" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="86" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="2" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="97" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="3" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="85" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="3" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="76" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="1" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="52" height="1" border="0" alt="" /></td>
<td><img src="menu-images/spacer.gi
f" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="export.html"><img src="menu-images/menu_expo
rt.jpg" alt="" name="menu_export" width="56" height="24" border="0" id="menu_export" onmouseover="MM_swapImage(
'menu_expo
rt','','me
nu-images/
menu_expor
t_f2.jpg',
1)" onmouseout="MM_swapImgRest
ore()" /></a></td>
<td><img src="menu-images/spacer.gi
f" width="3" height="24" border="0" alt="" /></td>
<td><a href="foodservice.html"><i
mg src="menu-images/menu_food
service_f2
.jpg" alt="" name="menu_foodservice" width="86" height="24" border="0" id="menu_foodservice" /></a></td>
<td><img src="menu-images/spacer.gi
f" width="2" height="24" border="0" alt="" /></td>
<td><a href="manufacturing.html">
<img src="menu-images/menu_manu
facturing.
jpg" alt="" name="menu_manufacturing" width="97" height="24" border="0" id="menu_manufacturing" onmouseover="MM_swapImage(
'menu_manu
facturing'
,'','menu-
images/men
u_manufact
uring_f2.j
pg',1)" onmouseout="MM_swapImgRest
ore()" /></a></td>
<td><img src="menu-images/spacer.gi
f" width="3" height="24" border="0" alt="" /></td>
<td><a href="cashandcarry.html"><
img src="menu-images/menu_cash
carry.jpg"
alt="" name="menu_cashcarry" width="85" height="24" border="0" id="menu_cashcarry" onmouseover="MM_swapImage(
'menu_cash
carry','',
'menu-imag
es/menu_ca
shcarry_f2
.jpg',1)" onmouseout="MM_swapImgRest
ore()" /></a></td>
<td><img src="menu-images/spacer.gi
f" width="3" height="24" border="0" alt="" /></td>
<td><a href="wholesale.html"><img
src="menu-images/menu_whol
esale.jpg"
alt="" name="menu_wholesale" width="76" height="24" border="0" id="menu_wholesale" onmouseover="MM_swapImage(
'menu_whol
esale','',
'menu-imag
es/menu_wh
olesale_f2
.jpg',1)" onmouseout="MM_swapImgRest
ore()" /></a></td>
<td><img src="menu-images/spacer.gi
f" width="1" height="24" border="0" alt="" /></td>
<td><a href="retail.html"><img src="menu-images/menu_reta
il.png" alt="" name="menu_retail" width="52" height="24" border="0" id="menu_retail" onmouseover="MM_swapImage(
'menu_reta
il','','me
nu-images/
menu_retai
l_f2.png',
1)" onmouseout="MM_swapImgRest
ore()" /></a></td>
<td><img src="menu-images/spacer.gi
f" width="1" height="24" border="0" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="page-title"><img src="site-images/food-serv
ice.jpg" alt="" width="232" height="32" /></div>
<div id="left-panel">
<ul>
<li><a href="foodservice/fs-cooke
d.html" class="menu-oneline">COOKE
D</a></li>
<li><a href="#" class="menu-twoline">VALUE
ADDED/ COATED</a></li>
<li><a href="#" class="menu-oneline">RAW</
a></li>
</ul>
</div>
<div id="right-panel">
<p class="right-blurb">Rector
y Foods is a specialist poultry supplier with more than 30 years experience in the poultry industry.</p>
<p class="right-blurb">We are able to supply all your needs from raw, cooked, marinated, breaded and battered poultry products.</p>
<p class="right-blurb">As a Rectory Foods customer, you will benefit from our expertise, enthusiasm and contacts across all markets. With the caterer in mind, we have developed our own Food Service brand Woodbury Farm.</p>
<p class="right-blurb">The Woodbury Farm product range has been carefully selected to offer the very highest quality at the most competitive price.</p>
<p class="right-blurb">The Woodbury Farm brand is designed to meet the changing needs of the caterer and delivering quality and service at competitive prices.</p>
</div>
<div id="footer">
<div id="footer-left">
<div id="left-bottom"></div>
Rectory Foods Ltd<br />
The Old School House<br />
Knutsford Road<br />
Holmes Chapel<br />
Cheshire<br />
CW4 7DE<br />
<br />
<span class="telfaxemail">
TELEPHONE: + 44 (0) 1477 544550<br />
FAX: + 44 (0) 1477 549767<br />
E-Mail: <a href="mailto:info@rectoryf
oods.com">
info@recto
ryfoods.co
m</a><br />
</span>
</div>
<div class="footer-divider"></d
iv>
<div id="footer-middle">
CONTACT US:
<form action="#" method="get">
<table width="100%" border="0">
<tr>
<td width="28%" class="forcesmall"><label>
NAME:</lab
el></td>
<td width="72%" class="rowheight" ><input name="NAME" type="text" class="textbox"/></td>
</tr>
<tr>
<td class="forcesmall"><label>
TELEPHONE:
</label></
td>
<td class="rowheight"><input name="TELEPHONE" type="text" class="textbox"/></td>
</tr>
<tr>
<td class="forcesmall"><label>
COMPANY:
</label></td>
<td class="rowheight"><input name="COMPANY" type="text" class="textbox"/></td>
</tr>
<tr>
<td class="forcesmall"><label>
MESSAGE:
</label></td>
<td><textarea name="MESSAGE" id="MESSAGE"></textarea></
td>
</tr>
<tr>
<td> </td>
<td><input name="SUBMIT" type="submit" class="submitbutton" id="SUBMIT" value="Submit" /></td>
</tr>
</table>
</form>
</div>
<div class="footer-divider"></d
iv>
<div id="footer-right"></div>
</div>
<div id="bottom-space"></div>
</div>
</body>
</html>[/code]
Thanks!
