Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-24-2008, 04:26 AM   PM User | #1
timehAndGod
New to the CF scene

 
Join Date: May 2008
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
timehAndGod is an unknown quantity at this point
IE6 and floating divs problem

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 is offline   Reply With Quote
Old 05-24-2008, 06:10 AM   PM User | #2
timehAndGod
New to the CF scene

 
Join Date: May 2008
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
timehAndGod is an unknown quantity at this point
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.

Last edited by timehAndGod; 05-24-2008 at 06:21 AM..
timehAndGod is offline   Reply With Quote
Old 05-24-2008, 06:12 AM   PM User | #3
Sman5109
Regular Coder

 
Join Date: Oct 2006
Posts: 164
Thanks: 5
Thanked 0 Times in 0 Posts
Sman5109 can only hope to improve
Well you see. Dont worry about IE6, and worry about IE7. It will make it much easier.
__________________
Not much, but its something.
Sman5109 is offline   Reply With Quote
Old 05-24-2008, 06:28 AM   PM User | #4
timehAndGod
New to the CF scene

 
Join Date: May 2008
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
timehAndGod is an unknown quantity at this point
Quote:
Originally Posted by Sman5109 View Post
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!
timehAndGod is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:33 AM.


Advertisement
Log in to turn off these ads.