1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Issues with I.E

Got a bit of an issue with a website in I.E, works fine in Firefox

         

groundzeroginge1

11:11 am on Jun 21, 2010 (gmt 0)

10+ Year Member



Hi guys, just registered after being over at coding forums for a while thought id give this place a whirl.

Got a bit of an issue with a website in I.E, works completely fine in Firefox. Heres the link

I think its related to the paddings, margins or floats but im not sure.

I don't know how to show you my site because im not allowed to show test sites on here. So I don't know how to go about getting help if I can't show people my problem.

mack

11:17 am on Jun 21, 2010 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Show us the code thats causing the problem, or describe the problem in detail.

Mack.

groundzeroginge1

11:35 am on Jun 21, 2010 (gmt 0)

10+ Year Member



This is the HTML and CSS of the website in question.

HTML 
<!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></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="StyleSheet" href="styles.css" 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_preloadImages.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.oSrc;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&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; 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.length;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.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
  </script>

</head>
<body background="images/backgroundimage.jpg" onload="MM_preloadImages('images/moreinfoinvert.png','images/hgvtrainingbuttoninvert.png','images/theorytestbuttoninvert.png')">
 <div id="firstpixeltop"></div><!-- part 1 of the 2px line at the top of page -->
  <div id="secondpixeltop"></div><!-- part 2 of the 2px line at the top of page -->
  <div id="wrapper"><!-- content wrapper for page -->
  <div id="shadowedgepage"></div><!-- left shadow of white page background down sides -->
   <div id="shadowedgepageright"></div><!-- left shadow of white page background down sides -->
   <div id="page"></div><!--white page css white background -->
   <div id="navigationandlogo"><!-- holds nav logo and call us -->

    <div id="callus"><!-- call us holder and 2px line between call us and nav -->
    <div id="teleimage"></div><!--holds the call us number image --><div id="navigation">
      <ul id="navlist">
<li><a href="#">Homepage</a></li>
<li><a href="index1.html">HGV License</a></li>
<li><a href="#">Theory Test</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About</a></li>
</ul></div> 
     </div>

    <div id="logo"></div>
     <div id="bannerholder">    
<div id="bannerimage"><p>HGV Training,<br/>Your leading Centre<br/>for all your HGV<br/>needs.</p><div id="moreinfobanner"><a href="#"><img src="images/moreinfo.png" border="0px" id="Image1" onmouseover="MM_swapImage('Image1','','images/moreinfoinvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div></div>
<div id="truckholder">
<h2>hgv training</h2>
<h3>hgv license</h3>
<h4>theory test</h4>

<div id="redtruck"><img src="images/redtruck.png" alt="red truck" style="border-style: none" />
<div class="moreinfo"><a href="#"><img src="images/moreinfo.png" alt="more info" id="Image5" style="border-style:none" onmouseover="MM_swapImage('Image5','','images/moreinfoinvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div id="bluetruck"><img src="images/bluetruck.png" alt="blue truck" style="border-style: none" />
<div class="moreinfo"><a href="#"><img src="images/moreinfo.png" alt="more info" id="Image6" style="border-style: none" onmouseover="MM_swapImage('Image6','','images/moreinfoinvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div id="yellowtruck"><img src="images/yellowtruck.png" alt="yellow truck" style="border-style: none" />
<div class="moreinfo"><a href="#"><img src="images/moreinfo.png" alt="more info" id="Image7" style="border-style: none" onmouseover="MM_swapImage('Image7','','images/moreinfoinvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div id="highlights">
 <h5>Highlights</h5>
<div id="highlight1"><p><strong>28.05.2010</strong><br/><br/>Adipiscing elit. Donec 
a risus justo, vehicula 
rhoncus mi. Sed nulla.</p></div>

 <div id="highlight2"><p><strong>10.04.2010</strong><br/><br/>Adipiscing elit. Donec 
a risus justo, vehicula 
rhoncus mi. Sed nulla.</p></div>
 <div id="highlight3"><p><strong>2.04.2010</strong><br/><br/>Adipiscing elit. Donec 
a risus justo, vehicula 
rhoncus mi. Sed nulla.</p></div>
</div>
<div id="content"><h6>Welcome to HGV Training, The leading centre for driver training.</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a risus justo, vehicula rhoncus 
mi. Sed nulla ligula, scelerisque eget adipiscing eu, vestibulum eu nunc. Curabitur convallis 
 <br />
 erat vitae nunc ornare quis sodales lectus sagittis. Praesent eget semper odio. Phasellus 
 <br />
 orci elit, euismod eget porta sit amet, euismod ac risus. Sed faucibus interdum turpis non 
malesuada. Phasellus eget risus metus, nec pretium nibh. Etiam non nisl ipsum. Fusce mollis 
ligula a diam cursus sed pulvinar tellus bibendum. Mauris ac nulla sit amet tortor adipiscing 
ultrices sed id sapien. Nunc tristique felis et nunc semper mattis. Etiam sem magna a massa. </p></div>

<div id="moreinfo2"><a href="#"><img src="images/moreinfo.png" alt="more info" id="Image2" style="border-style: none" onmouseover="MM_swapImage('Image2','','images/moreinfoinvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>

<h1>Services Overview</h1>
<div id="leftlist">
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>
<div class="line2"></div>
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>

<div class="line2"></div>
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>
<div class="line2"></div>
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>
<div class="line2"></div>
</div>

<div id="rightlist">
<ul class="truckholder">
<li><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>
<div class="line2"></div>
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>
<div class="line2"></div>
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>

</ul>
<div class="line"> </div>
<div class="line2"></div>
<ul class="truckholder">
<li class="truckholder"><a href="#">this is a test</a></li>
</ul>
<div class="line"> </div>
<div class="line2"></div>


</div>
<div style="clear:both;"></div>
<div id="buttonholder">

<div id="theorytest"><a href="#"><img src="images/theorytestbutton.png" alt="theory test" id="Image8" style="border-style: none;" onmouseover="MM_swapImage('Image8','','images/theorytestbuttoninvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
 <div id="hgvtraining"><a href="#"><img src="images/hgvtrainingbutton.png" alt="hgv license" id="Image4" style="border-style:none" onmouseover="MM_swapImage('Image4','','images/hgvtrainingbuttoninvert.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
 <div id="moreinfo6"><a href="#"><img src="images/moreinfo.png" alt="more info" id="Image3" style="border-style: none" onmouseover="MM_swapImage('Image3','','images/moreinfoinvert.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
 <div class="line3"> </div>
<div class="line4"></div>
<div id="footerbottom"><ul><li><a href="#">HGV Training | </a></li><li><a href="#">HGV Theory | </a></li><li><a href="#">Contact | </a></li><li><a href="#">About | </a></li><li><a href="#">HGV License | </a></li><li><a href="#">Sitemap</a></li></ul></div>

</div>

</div>

</div>


    </div></div><!--logo holder -->   
  
</body>
 </html>


CSS 
@charset "utf-8";
/* CSS Document */

#firstpixeltop {
height:1px;
width:auto;
background-color:#dae7f9;
/*background-repeat:repeat-x;*/
}

#secondpixeltop {
height:1px;
width:auto;
background-color:#b6bac0;
/*background-repeat:repeat-x;*/
}

/*Content Wrap For Website*/ 
#wrapper {
/*height:1031px;*/
width:1031px;
background-color:#f4f4f4;
margin: 0 auto;
height:1520px;

} 

#shadowedgepage {
width:8px;
float:left;
height:1520px;
background-image:url(images/leftshadowborder.jpg);

/*background-repeat:repeat-y;*/

}
#shadowedgepageright {
float: right;
width:8px;
height:1520px;
background-image:url(images/rightshadowborder.jpg);
/*background-repeat:repeat-y;*/
}

#page {
background-color:#f4f4f4;
/*float:left;
width:1015px;*/
margin: 0 8px;
overflow:hidden;
height:1px;
background-repeat:repeat-x;}

#navigationandlogo {
/*float:left;
width:1015px;*/
margin: 0 8px;
height:126px;
}

#logo {
background-image:url(images/logo.jpg);

width:369px;
height:118px;
padding-top:10px;}

#callus {
width:646px;
float:left;
background-color:#f4f4f4;
margin-left:369px;
height:69px;}

/*navigation button attributes*/

a {
font:normal 13px Arial;
color:#747d86;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
border:none;
text-decoration:none;
text-transform:uppercase;
padding-right:30px;
float:left;}

a:hover {font:normal 13px Arial;
color:#000000;
font-size:14px;
border:none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
padding-right:30px;
float:left;}


#navlist li
{
display: inline;
list-style-type: none;
background-color:#f4f4f4;
}

#navigation {
padding-left:30px;
padding-top:15px;
width:616px;
height:47px;
background-color:#f4f4f4;}

/* end -navigation button attributes - end */

#teleimage {
background-image:url(images/callus.jpg);
margin-left:66px;
width:336px;
height:66px;}

#bannerimage {
background-image:url(images/bannerimage.png);
width:962px;
margin-left:19px;
float:left;
background-color:#f4f4f4;
height:420px;}

#footerbottom {
}

#truckholder #buttonholder #footerbottom ul li {
list-style-type:none;
font-size:11px;
color:#7c7c7c;
font-weight:normal;
font-family:Verdana, Geneva, sans-serif;
background-image:none;
margin:0;
padding:0;
display:inline;
}

#bannerimage p { 
margin: 0;
 padding: 0;
padding-top:107px;
padding-left:72px;
 font-size:34px;
 color:#ffffff;
 letter-spacing:1px;
 font-weight:lighter;
 text-shadow: #5a6168 1px 1px 2px;
 font-family:arial, sans-serif;
 }

#moreinfobanner {
padding-left:72px;
padding-top:27px;}

#footerbottom ul li a {
list-style-type:none;
font-size:11px;
color:#7c7c7c;
font-weight:normal;
text-transform:capitalize;
font-family:Verdana, Geneva, sans-serif;
background-image:none;
margin:0;
padding:0;
display:inline;
}

#footerbottom ul li a:hover {
list-style-type:none;
font-size:11px;
text-transform:capitalize;
color:#000000;
border:none;
font-weight:normal;
font-family:Verdana, Geneva, sans-serif;
background-image:none;
margin:0;
padding:0;
display:inline;
}

#bannerholder {
/*float:left;
width:1015px;*/
margin: 0 8px;
height:420px;
background-color:#f4f4f4;
}

#truckslot {
/*float:left;
width:1015px;*/
margin: 0 8px;
height:228px;
background-color:#f4f4f4;
}

#truckholder {
margin-top:30px;
background-image:url(images/truckholder.jpg);
width:962px;
margin-left:19px;
float:left;
background-repeat:no-repeat;
background-color:#f4f4f4;
height:239px;}

#truckholder h2 {
 margin: 0;
 padding: 0;
 padding-top:34px;
 float:left;
 padding-left:80px;
 font-size:22px;
 font-weight:900; 
 text-shadow:#FFFFFF 1px 1px 2px;
 text-transform:uppercase;
 font-family:Century Gothic, sans-serif;
 }

#truckholder h3 {
 margin: 0;
 padding: 0;
 padding-top:34px;
 float:left;
 padding-left:180px;
 font-size:22px;
 font-weight:900; 
 text-shadow: #FFFFFF 1px 1px 2px;
 text-transform:uppercase;
 font-family:Century Gothic, sans-serif;
 }

#truckholder h4 {
 margin: 0;
 padding: 0;
 padding-top:34px;
 float:left;
 padding-left:191px;
 font-size:22px;
 font-weight:900; 
 text-shadow: #FFFFFF 1px 1px 2px;
 text-transform:uppercase;
 font-family:Century Gothic, sans-serif;
 }

h5 {
 margin: 0;
 padding: 0;
 font-size:22px;
 color:#474747;
 letter-spacing:1px;
 font-weight:lighter;
 text-shadow: #FFFFFF 1px 1px 2px;
 font-family:helvetica, sans-serif;
 }

#redtruck {
border:none;
float:left;
padding-top:20px;
padding-left:105px;}

#bluetruck {
border:0;
float:left;
padding-top:20px;
padding-left:222px;}

#yellowtruck {
border:0;
float:left;
padding-top:20px;
padding-left:220px;}

.moreinfo {
border:none;
padding-top:6px;

padding-left:5px;}

.moreinfo a {
border:none;
}

#theorytest {
border:0px;
margin:0px;
padding:0px;
float:left;
padding-top:18px;
}

#hgvtraining {
border:0px;
margin:0px;
padding:0px;
padding-left:4px;
float:left;
padding-top:18px;
}

#footer {display:block;

list-style-type:none;

width:962px;

padding-top:0;}

#footer ul {display:inline;

list-style-type:none;

width:962px;
text-align:center;
padding-top:0;}

#footer ul li {display:inline;

list-style-type:none;

width:962px;
text-align:center;
padding-top:0;}

#moreinfo6 {
border:0;

padding-left:57px;
float:left;
padding-top:18px;
}

a img {
margin: 0px;
padding: 0px;
float:none;}

img a {
margin: 0px;
padding: 0px;
float:none;}

#moreinfo2 {
border:0;
padding-top:22px;
padding-bottom:32px;
padding-left:359px;}

#highlights {
width:317px;
float:left;
padding-top:51px;
height:482px;}

#highlight1 {
margin-top:13px;
background-image:url(images/guytruck.png);
width:317px;
background-repeat:no-repeat;
margin-bottom:11px;
height:140px;}

#highlight1 p {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000000;
width:176px;
padding-top:20px;
height:107px;
padding-left:145px;
}

#highlight2 p {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding-top:20px;
color:#000000;
width:176px;
height:107px;
padding-left:145px;
}

#highlight3 p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000000;
padding-top:20px;
width:176px;
height:107px;
padding-left:145px;
}

#highlight2 {
background-image:url(images/truck.png);
width:317px;
background-repeat:no-repeat;
margin-bottom:11px;
height:140px;}

#highlight3 {
background-image:url(images/guytruckoutside.png);
width:317px;
background-repeat:no-repeat;
margin-bottom:11px;
height:140px;}

#content {
width:645px;}

#content h6 {
 margin: 0;
 padding: 0;
 padding-top:294px;
 width:400px;
 padding-left:359px;
 font-size:22px;
 color:#474747;
 letter-spacing:1px;
 font-weight:lighter;
 text-shadow: #FFFFFF 1px 1px 2px;
 font-family:helvetica, sans-serif;
 }

h1 {
 margin: 0;
 padding: 0;
 padding-top:39px;
 width:400px;
 padding-left:359px;
 font-size:22px;
 color:#474747;
 letter-spacing:1px;
 font-weight:lighter;
 text-shadow: #FFFFFF 1px 1px 2px;
 font-family:helvetica, sans-serif;
 }


#truckholder ul {
line-height:0px;
}


#truckholder ul li { 
background-image:url(images/bullet1.gif);
background-repeat:no-repeat;
list-style-type:none;
padding:5px 0px 0px 30px;
line-height:0px;
font-weight:bold;
color:#1db4c9;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-position:0px 0px; 
height:7px;
margin-top:-10px 0px 0px 0px;
}

#truckholder li a { 
background-repeat:no-repeat;
list-style-type:none;
padding:5px 0px 0px 0px;
text-transform:lowercase;
line-height:0px;
font-weight:bold;
color:#1db4c9;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-position:0px 0px; 
height:7px;
margin-top:-10px 0px 0px 0px;
}

#truckholder li a:hover { 
background-repeat:no-repeat;
list-style-type:none;
padding:5px 0px 0px 0px;
text-transform:lowercase;
line-height:0px;
font-weight:bold;
color:#000000;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-position:0px 0px; 
height:7px;
margin-top:-10px 0px 0px 0px;
}

.line {height:1px; 
display:block;
margin:0px 0px 0px 45px;
list-style-type:none;
width:264px;
background-color:#e5e5e5;
}

.line2 {height:1px; 
display:block;
margin:0px 0px 0px 45px;
list-style-type:none;
width:264px;
padding:0px;
background-color:#fbfbfb;
}

.line3 {height:1px; 
display:block;
margin-top:46px;
float:left;
width:962px;
background-color:#e5e5e5;
}

.line4 {height:1px; 
display:block;
clear:both;
margin-bottom:28px;
width:962px;
padding:0px;
background-color:#fbfbfb;
}


#content p { margin: 0;
 padding: 0;
 padding-top:22px;
 width:600px;
 padding-left:359px;
 font-size:12px;
 color:#7c7c7c;
 font-family:Verdana, Geneva, sans-serif;}
 
#leftlist {width:280px;
float:left;}
 
#rightlist {width:280px;
float:left;}

#buttonholder {
width:962px;
clear:both;
height:32px;}




Thanks guys.

SevenCubed

2:09 pm on Jun 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1) Are you having a problem with a specific version of IE? What version are you using that it isn't displaying properly in? If it's the beast (IE6) then it's almost surely an overflow situation.

2) What developer tools (preferably browser based) are you using to evaluate your CSS -- if any?

I've had a look at your CSS using FireFox developer plugins that I use daily and can see many issues with overlapping elements. Too many to be able to narrow it down to a single issue. It's probably a combination of many little things that's making IE go eek!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026