IE6 and floating divs problem

timehAndGod · 05-24-2008, 04:26 AM

I am working on a website for my youth group, and have come across an issue with IE6. (No suprises there)

My website performs as expected in FF, IE7, Safari, but IE6 just had to throw up some barriers. Have a look at this screenshot: http://img355.imageshack.us/img355/6869/58894489vn8.jpg

Here is the source:

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" />
<meta http-equiv="X-UA-Compatible" content="IE=8" /><title>Location - Epic Youth</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}

html, body {
	background-color:#000000;
	margin:0;
	padding:0;
	border:0;
	font-size:16px;
	font-family:Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}

a {
	color:#FFFFFF;
	text-decoration:underline;
}
a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}
a:visited {
	color:#FFFFFF;
	text-decoration:underline;
}

div.outer {
	margin:0;
	padding:0;
	margin-left:110px !important;
	width:667px;
}

div.title {
	padding-left:16px;
	height:209px;
}

div.outermid {
	margin:0;
	padding:0;	
}

div.navcon {
	margin:0;
	padding:0;
	width:193px;
	float:left;
}

div.body {
	margin:0;
	padding:0;
	float:left;
	padding-left: 24px !important;
	width:450px;
}

div.spacermid {
	clear:both;
	margin:0;
	padding:0;
}

/* Nav */

div.navcon div {
	height:31px;
	margin-top: 10px;
}
div.navTopL {
	margin-top:0px !important;
}
div.navcon div a {
	display:block;
	height:31px;
	width:193px;
	background-position:top right;
	background-repeat:no-repeat;
}

a.eventsL {
	margin-top:4px !important;
	background-image:url(../images/navEvents.jpg);
}
a.newsL {
	background-image:url(../images/navNews.jpg);
}
a.locL {
	background-image:url(../images/navLoc.jpg);
}
a.busL {
	background-image:url(../images/navBus.jpg);
}
a.aboutL {
	background-image:url(../images/navAbout.jpg);
}

a.eventsL:hover {
	background-image:url(../images/navEventsH.jpg);
}
a.newsL:hover {
	background-image:url(../images/navNewsH.jpg);
}
a.locL:hover {
	background-image:url(../images/navLocH.jpg);
}
a.busL:hover {
	background-image:url(../images/navBusH.jpg);
}
a.aboutL:hover {
	background-image:url(../images/navAboutH.jpg);
}

/* Nav End */

div.foot {
	height:101px;
	width:522px;
	margin:0 auto;
	padding-top:15px;
}
</style>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/default.js"></script>
</head>

<body>
<div class="outer">

  <div class="title"><a href="index.php"><img src="images/title.jpg" alt="Epic Youth Official Website" border="0" /></a></div>

  
  <div class="outermid">
  
  <div class="navcon">
    <div class="navTopL"><a href="index.php?p=events" class="eventsL"></a></div>
    <div><a href="index.php?p=loc" class="locL"></a></div>
    <div><a href="index.php?p=bus" class="busL"></a></div>
    <div><a href="index.php?p=about" class="aboutL"></a></div>
  </div>
  
  <span style="display:none"><img src="../images/navAboutH.jpg" alt="Preload Image" /><img src="../images/navBusH.jpg" alt="Preload Image" /><img src="../images/navEventsH.jpg" alt="Preload Image" /><img src="../images/navLocH.jpg" alt="Preload Image" /><img src="../images/navNewsH.jpg" alt="Preload Image" /></span>
  
  <div class="body"><strong>Central</strong><br />

Central Epic is located on 95 Mt Eden Road and can be seen on the map below:<br /><br />

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=95+Mount+Eden+Road+auckland&amp;sll=38.004592,-85.060406&amp;sspn=0.012393,0.022659&amp;ie=UTF8&amp;s=AARTsJpHdpU92s2ub5CuOAXQYryVMhmBLA&amp;ll=-36.864584,174.762654&amp;spn=0.012017,0.018239&amp;z=15&amp;iwloc=addr&amp;output=embed"></iframe><br /><br /><br />

<strong>South</strong><br />
South Epic is located on 110 Montgomerie Road and can be seen on the map below:<br /><br />

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=110+Montgomerie+Road+auckland&amp;sll=-36.864584,174.762654&amp;sspn=0.025167,0.045319&amp;ie=UTF8&amp;t=h&amp;s=AARTsJrEPpT1_Wfg8ntNwqiLMC3L2vGPlQ&amp;ll=-36.97753,174.776301&amp;spn=0.006,0.00912&amp;z=16&amp;iwloc=addr&amp;output=embed"></iframe></div>
  
  <div class="spacermid"></div>
  
  </div>

  <center>
    <div class="foot"><img src="images/foot.jpg" alt="Page Footer" /></div>
  </center>
</div>

</body>

</html>

timehAndGod · 05-24-2008, 06:10 AM

I found where the problem lies, and it appears IE6 pops in a extra 3px somewhere. I increased the outer div by 3px and everything then worked as expected!

The problem now is, how do I eliminate this 3px bug? I'm trying to find out where IE6 has put it...

Site if interested: http://epic.isgreat.org/

EDIT: Until I find a solution that works, I'm just going to add 3px to div.outer.

Sman5109 · 05-24-2008, 06:12 AM

Well you see. Dont worry about IE6, and worry about IE7. It will make it much easier.

timehAndGod · 05-24-2008, 06:28 AM

Quote:

Originally Posted by Sman5109

Well you see. Dont worry about IE6, and worry about IE7. It will make it much easier.

Haha yeah it would. Adding that extra 3px hasn't affected layout in any way, so I'll just leave it there and IE6 will be happy!