IE9 Image Shift Issue

Hi Guys,

I’ve been toiling away for the better part of the evening over an issue that I just can’t seem to pin point. I could really use some help.

What happens is that the div class “buttoncont” seems to be shifting downward by about 5 pixels which isn’t a lot but noticeable enough. I have attached an image of it. The issue only manifests itself in IE 9 when compatibility mode is turned OFF. It displays properly in chrome, firefox, and safari.

I’m really scratching my head on this one…Any help is greatly appreciated

I have included the HTML and CSS code below

CSS:


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #2E3239;
	background-image: url(images/bgmain.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;	text-align: center;

}
.footer, .push {
height: 4em;
}
div {
	text-align: left;
}
#head {
	width: 998px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 36px;
	padding-bottom: 21px;
}
.logo {
	background-image: url(images/logo.gif);
	background-repeat: no-repeat;
	float: left;
	height: 57px;
	width: 361px;
}
a{outline:none;}
#menu {

	float: left;
	height: 57px;
	width: 611px;
}
a.mn:link {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #2E3239;
	display: block;
	padding-top: 19px;
	padding-bottom: 6px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #549850;
	text-decoration: none;
	float: left;


}
a.mn:visited {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #2E3239;
	display: block;
	padding-top: 19px;
	padding-bottom: 6px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #549850;
	text-decoration: none;
	float: left;


}
a.mn:hover {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #5E6167;
	display: block;
	padding-top: 19px;
	padding-bottom: 6px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #006600;
	text-decoration: none;
	float: left;


}
.spm {
	display: block;
	float: left;
	height: 30px;
	width: 60px;
}
.headmain {
	height: 317px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
}
.clear {
	clear: both;
	height: 0px;
	width: 0px;
}
#promo {

	width: 998px;
	margin-right: auto;
	margin-left: auto;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	line-height: 33px;
	color: #FFFFFF;
	margin: 20px 0px 0px 192px;
	padding: 0px;
}
.promtxt {
	float: left;
	height: 110px;
	width: 660px;
}
.buttoncont {
	float: left;
	width: 298px;
	
	padding-top: 23px;
}
a.get:link {
	background-image: url(images/getstarted.gif);
	background-repeat: no-repeat;
	display: block;
	height: 75px;
	width: 298px;
	cursor: pointer;
	background-position: left top;

}
a.get:visited {
	background-image: url(images/getstarted.gif);
	background-repeat: no-repeat;
	display: block;
	height: 75px;
	width: 298px;
	cursor: pointer;
	background-position: left top;

}
a.get:hover {

	background-image: url(images/getstarted.gif);
	background-repeat: no-repeat;
	display: block;
	height: 75px;
	width: 298px;
	cursor: pointer;
	background-position: left bottom;
}
.plan1 {
	float: left;
	height: 235px;
	width: 320px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;


}
.plan2 {
	float: left;
	height: 235px;
	width: 326px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #DADADA;

}
#content {
	height: auto;
	width: 998px;
	margin-right: auto;
	margin-left: auto;
}
.plan3 {

	float: left;
	height: 235px;
	width: 348px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #DADADA;
}
.plantitle {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 20px 12px 13px 2px;
width: 280px;
margin-right: auto;
margin-left: auto;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #549850;
font-size: 19px;
font-weight: normal;	white-space: nowrap;

}

.start {
	font-size: 14px;
	font-weight: normal;
}
.price {
	font-size: 20px;
	font-weight: bold;
	color: #549850;

}
.plantext {
	font-family: Arial, Helvetica, sans-serif;
	padding: 20px 0px;
	width: 310px;
	margin-right: auto;
	margin-left: auto;
	border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #E5E5E5;
	font-size: 13px;
	font-weight: normal;

}
.mid {
	vertical-align: middle;
}
.planbut {
	font-family: Arial, Helvetica, sans-serif;
	width: 305px;
	margin-right: auto;
	margin-left: auto;
	font-size: 11px;
	font-weight: bold;
	padding-top: 10px;
	text-align: right;


}
a.lm:link {
	font-weight: bold;
	color: #549850;
	text-decoration: none;
}
a.lm:visited {

	font-weight: bold;
	color: #549850;
	text-decoration: none;
}
a.lm:hover {


	font-weight: bold;
	color: #333333;
	text-decoration: none;
}
a:link {

	font-weight: normal;
	color: #549850;
	text-decoration: underline;
}
a:visited {


	font-weight: normal;
	color: #549850;
	text-decoration: underline;
}
a:hover {



	font-weight: normal;
	color: #000000;
	text-decoration: none;
}
.postit {
	float: left;
	height: 200px;
	width: 338px;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #7A4E24;
	background-image: url(images/postit.png);
	background-repeat: no-repeat;
	background-position: right top; margin-top:5px;

}
.testimonial {
	padding: 30px 30px 10px;
	display: block;
	line-height: 20px;


}
.footergreen {
	background-color: #333333;
	height: 120px;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 10px;
	color: #D9D9D9;
	text-align: center;



}
.text1{
	float: left;	width: 322px;

line-height:20px;padding-top:20px;border:none;padding-right:5px;height:170px}


.text2{	float: left;	width: 322px;


line-height:20px;padding-top:20px;border:none;padding-left:5px;padding-right:5px}
.foot {

	height: auto;
	width: 998px;
	margin-right: auto;
	margin-left: auto;
}
#footerblack {
	background-color: #549850;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 11px;
	color: #CBDBCB;
	font-weight: bold;
	text-align:center;
	height: 40px;




}
#footerblack a{
	font-size: 11px;
	color: #CBDBCB;
	font-weight: normal;
	text-decoration: underline;
}
body.inner {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #2E3239;
	background-image: url(images/bginner.gif);
	background-repeat: repeat-x;
	background-position: left top;
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #F1F1F1;

}
.bannerinn {
	height: 117px;
	width: 998px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 22px;

}
#contentinn {
	height: auto;
	width: 998px;
	margin-right: auto;
	margin-left: auto;
	background-color: #F1F1F1;

}
.leftbox {
	width: 650px;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #DADADA;
	padding-bottom: 30px;



}
.text {
	padding: 10px;
	line-height: 20px;

}
.rightbox {

	width: 338px;
	float: left;
}
img {
	border: none;
}
.menutitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	background-color: #549850;
	width: 308px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;

}
.menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	width: 308px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	color: #333333;
	background-image: url(images/dots.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	display: block;

}
a.menu:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	width: 298px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 25px;
	margin-right: auto;
	margin-left: auto;
	color: #333333;
	background-image: url(images/dots.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	display: block;
	text-decoration: none;
	cursor: pointer;

}
a.menu:visited {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	width: 298px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 25px;
	margin-right: auto;
	margin-left: auto;
	color: #333333;
	background-image: url(images/dots.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	display: block;
	text-decoration: none;
	cursor: pointer;
}
a.menu:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	width: 298px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 25px;
	margin-right: auto;
	margin-left: auto;
	color: #333333;
	background-image: url(images/dots.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	display: block;
	text-decoration: none;
	cursor: pointer;
	background-color: #E2E2E2;

}
.transfer {
	background-image: url(images/bgtrans.png);
	background-repeat: no-repeat;
	height: 143px;
	width: 321px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: auto;
	margin-left: auto;

}
.transftext {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 80px;
}
h2 {
	font-size: 20px;
	font-weight: normal;
	color: #454849;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.bgyel {
	background-color: #EBE9DC;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
.butg1 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #FFFFFF;
	background-image: url(images/butg1.gif);
	background-repeat: no-repeat;
	text-align: center;
	float: left;
	width: 238px;
	padding-top: 11px;
	padding-bottom: 7px;
}
.butg2 {

	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #FFFFFF;
	background-image: url(images/butg2.gif);
	background-repeat: no-repeat;
	text-align: center;
	float: left;
	width: 166px;
	padding-top: 11px;
	padding-bottom: 7px;
}
.plancontent {
	background-image: url(images/vfvps9.jpg);
	background-repeat: no-repeat;
	height: 317px;
	width: 630px;
	border: 1px solid #549850;
}
.plan0 {
	float: left;
	height: 317px;
	width: 25px;
}
.planvps1 {
	float: left;
	height: 317px;
	width: 282px;
	line-height: 22px;

}
.planvps1a {

	float: left;
	height: 317px;
	width: 35px;
}
.planvps2 {


	float: left;
	height: 317px;
	width: 287px;
}
.pricebox {
	margin-top: 10px;
	padding-top: 10px;
	border-top-width: 8px;
	border-top-style: solid;
	border-top-color: #E5E5E5;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: center;


}
.pricevps {

	font-size: 24px;
	font-weight: bold;
	color: #549850;
}
.domain1 {
	background-image: url(images/domain.gif);
	background-repeat: no-repeat;
	height: 135px;
	width: 633px;
	margin-top: 10px;

}
.domain2 {

	background-image: url(images/domain2.gif);
	background-repeat: no-repeat;
	height: 186px;
	width: 633px;
}
form {
	margin: 0px;
	padding: 0px;
}
.fd1 {
	float: left;
	width: 46px;
	padding-top: 35px;
}
.fd2 {
	float: left;
	width: 372px;
	padding-top: 35px;
	background-image: url(images/bgform1.gif);
	background-repeat: no-repeat;
	height: 49px;

}
.fd3 {
	float: left;
	width: 76px;
	padding-top: 42px;
	background-image: url(images/bgform2.gif);
	height: 49px;
	background-repeat: no-repeat;


}
.fd4 {



	float: left;
	width: 106px;
	padding-top: 35px;
}
.submit {
	background-image: url(images/check.gif);
	background-repeat: no-repeat;
	height: 49px;
	width: 106px;
	border: none;
	cursor: pointer;
}
.domain {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #5A5A5A;
	height: 33px;
	width: 333px;
	margin-left: 20px;
	border: none;
	margin-top: 7px;
	background-color: #FDFDFD;


}
select {
border: 0;
color: #333;
background: transparent;
font-size: 18px;
font-weight: normal;
padding: 2px 2px;
width: 60px;
}

#mainselection {
overflow: hidden;
width: 70px;
background: transparent;
}
.formtext {
	font-size: 24px;
	color: #5A5A5A;
	background-image: url(images/dots2.gif);
	background-repeat: repeat-x;
	background-position: left top;
	text-align: center;
	height: 52px;
	width: 554px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	clear: both;


}
.quotebg {
	width: 98%;
	border: 1px solid #549850;
}
.qu1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	float: left;
	height: 40px;
	width: 200px;
}
.qu2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	float: left;
	height: 40px;
	width: 283px;
	background-image: url(images/contf1.gif);
	background-repeat: no-repeat;

}
.padf {
	padding-top: 10px;
	padding-left: 60px;
}
.impc {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFFFFF;
	height: 27px;
	width: 271px;
	border: none;
	margin-top: 3px;
	margin-left: 3px;

}
.qu3 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	float: left;
	height: 160px;
	width: 283px;
	background-image: url(images/contf2.gif);
	background-repeat: no-repeat;
}
.msg {
	height: 145px;
	width: 265px;
	margin-top: 5px;
	margin-left: 5px;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;

}
.sendquotecontainer {
	text-align: center;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
.sendquote {
	background-image: url(images/getquote.gif);
	background-repeat: no-repeat;
	height: 44px;
	width: 134px;
	border: none;
	cursor: pointer;
}
.bul {
	background-image: url(images/ar.gif);
	background-repeat: no-repeat;
	background-position: left 7px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 12px;
}
.plantexttwo {

	font-family: Arial, Helvetica, sans-serif;
	padding: 20px 0px 20px 5px;
	width: 290px;
	margin-right: auto;
	margin-left: auto;
	border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #E5E5E5;
	font-size: 13px;
	font-weight: normal;
}
.map {
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #545454;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	width: 18%;




}
a.mp:link {
	color: #D9D9D9;
	text-decoration: none;
	display: block;
	padding-bottom: 3px;
}
a.mp:visited {

	color: #D9D9D9;
	text-decoration: none;
	display: block;
	padding-bottom: 3px;
}
a.mp:hover {


	color: #D9D9D9;
	text-decoration: underline;
	display: block;
	padding-bottom: 3px;
}
h4 {
	font-size: 12px;
	font-weight: bold;
	color: #D9D9D9;
	text-decoration: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
}


HTML:


<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="msie.css" rel="stylesheet" type="text/css" />
<![EndIf]-->

</head>

<body>
<div id="head">
  <div class="logo"><a href="#"><img src="images/spacer.gif" alt=" " width="272" height="57" border="0" /></a></div>
    <div id="menu"><a class="mn" href="index.htm">Home</a><span class="spm">&nbsp;</span><a class="mn" href="#"> Solutions</a><span class="spm">&nbsp;</span><a class="mn" href="#">E-MAIL</a><span class="spm">&nbsp;</span><a class="mn" href="#">Support</a><span class="spm">&nbsp;</span><a class="mn" href="#">About 
      Us</a></div>
</div>
<div class="clear"><!--  --></div>
<div class="headmain"><!-- main pic --></div>
<div id="promo"><div class="promtxt">
  <h1><span style="color:#E0FCA7">Free Djdfklsjf</span> fkdsjf <br />
    kljsfks dfjlksj jkfsd kjfd</h1></div>
  <div class="buttoncont"><a class="get" href="#"><!-- get started link --></a></div>
</div><div class="clear"><!--  --></div>
<div id="content">
<div class="plan1">
<div class="plantitle"><span style="float:right"><font class="start">S</font></span>W</div>    
    <div class="plantext">
     <div class="bul">P</div>
    <div class="bul">U </div>
     <div class="bul">D</div>
     <div class="bul">F</div>
      </div>
    <div class="planbut"><a class="lm" href="#">Learn more</a> <img src="images/ar2.gif" alt="Learn more" /></div>
</div>




<div class="plan2">

    <div class="plantitle" style="width:270px">V</div>    
    <div class="plantexttwo"> 
     <div class="bul"> P</div>
      <div class="bul"> W</div>
      <div class="bul"> V</div>
     <div class="bul"> R</div></div>
    <div class="planbut" style="width:290px"><a class="lm" href="#">Learn more</a> <img src="images/ar2.gif" alt="Learn more" /></div>

</div>
<div class="plan3">
<div class="plantitle" style="width:310px"><span style="float:right;line-height:12px;height:27px"><font class="start">F</font></span>Wt</div>    
    <div class="plantexttwo"> 
 <div class="bul"> P</div>
  <div class="bul"> W</div>
   <div class="bul"> V</div>
     <div class="bul"> R</div></div>
    <div class="planbut" style="width:300px"><a class="lm" href="#">Learn more</a> <img src="images/ar2.gif" alt="Learn more" /></div>

</div>
<div class="clear"><!--  --></div>
  <div class="text1">T<br />
    <br />
  </div>
  <div class="text2">Y</div>
  <div class="postit"><div class="testimonial">Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500 typesetting industr typesetting industr typeset. <div style="float:right"><a style="color:#7A4E24" href="#">Read more testimonials</a></div></div></div>
</div><div class="clear"><!--  --></div><br /><br />

<div class="footergreen">
 <div class="foot">
<div class="map"><h4>W</h4> 
<a class="mp" href="#">W</a> 
<a class="mp" href="#">P</a>
<a class="mp" href="#">D</a>
<a class="mp" href="#"> C</a><br />
</div>

<div class="map" style="padding-left:80px">
        <h4>S</h4> 
<a class="mp" href="#">W</a> 
<a class="mp" href="#">P</a>
<a class="mp" href="#">D</a>
<a class="mp" href="#"> C</a><br />
</div>

<div class="map" style="padding-left:80px">
        <h4>S</h4> 
<a class="mp" href="#">W</a> 
<a class="mp" href="#">P</a>
<a class="mp" href="#">D</a>
<a class="mp" href="#"> C</a><br />
</div>

<div class="map" style="padding-left:80px">
        <h4>C</h4> 
<a class="mp" href="#">W</a> 
<a class="mp" href="#">P</a>
<a class="mp" href="#">D </a>
<a class="mp" href="#"> C</a><br />
</div>

</div>
</div>
<div id="footerblack">
<div class="foot">Copyright (c) </div>

</div>

</body>
</html>

Hi welcome to Sitepoint :slight_smile:

Do you have a link so we can see the page with the images as debugging an image without seeing the image is very difficult. :slight_smile: If the page isn’t online then perhaps attach a working zip with images etc.

As an aside a lot of your code is redundant - up to 80% I would hazard a guess.
For example this code:


a.menu:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    width: 298px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    margin-right: auto;
    margin-left: auto;
    color: #333333;
    background-image: url(images/dots.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.menu:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    width: 298px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    margin-right: auto;
    margin-left: auto;
    color: #333333;
    background-image: url(images/dots.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.menu:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    width: 298px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    margin-right: auto;
    margin-left: auto;
    color: #333333;
    background-image: url(images/dots.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    display: block;
    text-decoration: none;
    cursor: pointer;
    background-color: #E2E2E2;
}

That could all be reduced to this:


a.menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    width: 298px;
    padding:5px 0 5px 25px;
    margin: auto;
    color: #333;
    background: url(images/dots.gif) repeat-x 0 100%;
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.menu:visited {color: #333333;}
a.menu:hover {background-color: #E2E2E2;}


You only need to define the differences (apart from text-color in the visited state) so do that for all in the first rule as above.

Your main header is badly constructed as there is no information there - not even alt text because you used a spacer image.


   <div class="logo"><a href="#"><img src="http://www.sitepoint.com/forums/images/spacer.gif" alt=" " width="272" height="57" border="0" /></a></div>

You should either have used the real image and used the alt attribute to provide text content or used the gilder/levin method for image replacement.

There are a lot of other bad practices in the page such as not using lists for menus or other lists of things.

You also seem to have a very old (and broken) sticky footer code in the css but it doesn’t look as though you have implemented the html for it anyway.

None of the above will explain the issue you are having so I need to see the whole page. It’s likely a simple margin or padding issue but is hard to spot with seeing the actual page.

You could remove the xml declaration anyway as that triggers quirks mode in IE6.

Hi Paul,

Thank you for the reply and all the helpful advice. It looks like I have my work cut out for me. In regards to the xml, I did try removing it; however, the issue persists.

I have attached a zip of the files.

Hi,

The problem is that #head doesn’t contain the floated elements and the bottom padding isn’t applied in good browsers. However IE7 auto clears the floats when the parent has haslayout and hence the difference.

You need to be more precise like this:

Firstly remove the IE only stylesheet file as none of the rules are needed that I can see and you certainly wouldn’t give it to all versions of IE anyway.

Once that’s out of the way then make these changes for all browsers.


#head {
    width: 998px;
    margin:0 auto;
    padding-top: 36px;
    padding-bottom: 21px;
[B]    overflow:hidden;
    height:57px;[/B]
}
.headmain {
  [B]  height: 294px;[/B]
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}

.map {
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #545454;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
 [B]   width: 179px;/* was 18%*/[/B]
}


You don’t need the empty clear divs before #headmain as you can simply set #headmain to clear:both itself. Empty clearers are only needed when you want the parent to contain its floated children and in most cases you can do this using overflow:hidden on the parent anyway (+ haslayout for IE7 and below).

As mentioned before your page lacks structure so have a re-think and use lists for menus and p for paragraphs and heading tags for headings.

Paul,

Thank you it seems to have worked for the most part with a little distortion of the text a immediately to the left of the button. It is dropping down slightly and some of the bottom letters are cut off.

I’m going to try and clean everything up (based on your suggestions) and would be very grateful is you could just glance over it and make sure everything is up to speed.

As a side note, I was reading some of your css articles and found them to be very informative. Hopefully I can take it a step further and implement them.

Attach another zip when you’ve cleaned it up and I’ll take another look. I’m a bit busy today but will be around later on in the week.:slight_smile: