Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>

  • #2
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well you see. Dont worry about IE6, and worry about IE7. It will make it much easier.
    Not much, but its something.

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •