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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Div has moved in IE, and I can't see why.

    Hi all,

    sorry, but I broke my div layout of..
    http://www.liamsworld.org.uk/bfcgs/index.shtml

    in IE. It's fine in Firefox. I've been looking at it too long and I can't see where I've mucked it up.

    Cheers

    Liam

    Code:
    <!-- Home Page -->
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" /> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    
    
    
    <title>Bracknell Forest Golf Society</title>
    
    <style type="text/css">
    
    body { 
      background-image: url(bggraphics/background2.gif);
      background-repeat: repeat-y; 
      background-position: center; 
      background-color: #e3eccc;
      text-align: center;  
    
    }
    
    #container { 
      position:relative;
      width: 800px; 
      height: 730px;
      margin: 0 auto;
      text-align: center;   
    }
    
    #uppertrim {
      position:relative;
      background-image: url(bggraphics/topcurve2.gif);  
      height: 40px;
    }
    
    #banner {
      position:relative;
      background-image: url(bggraphics/bannerbg2.gif);
      top: 0px;
      height: 110px;
    }
    
    #topmenu {
      position:relative;
      background-image: url(bggraphics/menubg2.gif);
      top: 0px;
      height: 40px; 
      z-index:3;
     }
     
     .topmenu {
      padding-top:6px;
      z-index:2;
      padding-left:100px;
      clear:both;
      
    }
     
     #left {
      background-image: url(bggraphics/leftbg2.gif);
      position:relative;
      float:left;
      top: 0px;
      width: 200px;
      height: 400px;
      z-index:1;
      
    }
    
    .leftmenu {
      padding-top:30px;
      z-index:2; 
      
      }
    
    #content {
      background-image: url(bggraphics/contentbg2.gif);
      position:relative;
      float:right;
      top: 0px;
     
      width: 600px;
      height:400px;
      text-align:center;
      z-index:1; 
    }
    
    
    #footer {
      position:relative;
      background-image: url(bggraphics/bottomcurve2.gif); 
      height: 40px;  
      clear: both; 
     }
     
     #footer p {
     padding-top:12px;
     padding-right:25px;
     font-size:10px;
     text-align:right;
     
     }
     
     
     /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/magic_menu_one.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    
    /* Name Dropdown Menu Begins */
    
    .menu {
    list-style-type:none;
    padding:0;
    margin:0 37px;
    }
    
    .menu ul {
    list-style-type:none;
    padding:0;
    margin:0;
    }
    
    .menu li {
    float:left;
    background:#ccc;
    margin:3px 3px 0 0;
    position:relative;
    }
    
    .menu li.sub {
    
    background:#91a65a;
    border: 2px solid white;
    font-weight: bold;
    
    }
    
    .menu table {
    border-collapse:collapse;
    position:absolute;
    top:0;
    left:0;
    z-index:80;
    font-size:1em;
    font-weight: normal;
    }
    
    .menu li a {
    display:block;
    color:#000000;
    font-family:arial, sans-serif;
    font-size:11px;
    line-height:18px;
    width:125px;
    text-decoration:none;
    text-align:center;
    }
    
    .menu :hover{
    color:#ff0;
    background:#888;
    }
    
    .menu :hover > a {
    color:#ff0; 
    background:#888;
    }
    
    .menu ul, .menu :hover ul ul {
    position:absolute;
    left:-9999px;
    width:128px;
    }
    
    .menu :hover ul{
    left:0px;
    top:18px;
    background:url(transparent.gif);
    } /* the background image is for IE7 */
    
    .menu :hover ul :hover ul {
    padding:0 1px;
    left:125px;
    top:-3px;
    }
    
    /* Name Dropdown Menu Ends */
    
    /* Left Hand Site Menu Begins */
    
    .menuleft {
    list-style-type:none;
    padding:0;
    margin:0 37px;
    }
    
    .menuleft ul {
    list-style-type:none;
    padding:0;
    margin:0;
    }
    
    .menuleft li {
    float:left;
    background:#ccc;
    margin:3px 3px 0 0;
    position:relative;
    }
    
    .menuleft li.subleft {
    color:#ffffff;
    background:#91a65a;
    border: 2px solid white;
    font-weight: bold;
    margin:2px;
    
    }
    
    .menuleft table {
    border-collapse:collapse;
    position:absolute;
    top:0;
    left:0;
    margin-top:30px;
    z-index:80;
    font-size:1em;
    font-weight: normal;
    }
    
    .menuleft li a {
    display:block;
    color:#000000;
    font-family:arial, sans-serif;
    font-size:11px;
    line-height:18px;
    width:125px;
    text-decoration:none;
    text-align:center;
    }
    
    .menuleft :hover{
    color:#ff0;
    background:#888;
    }
    
    .menuleft :hover > a {
    color:#ff0; 
    background:#888;
    }
    
    .menuleft ul, .menuleft :hover ul ul {
    position:absolute;
    left:-9999px;
    width:128px;
    }
    
    .menuleft :hover ul{
    left:0px;
    top:24px;
    background:url(transparent.gif);
    } /* the background image is for IE7 */
    
    .menuleft :hover ul :hover ul {
    padding:0 3px;
    left:125px;
    top:-3px;
    }
    
    /* Left Hand Site Menu Ends */
    
    table.wp{
    border-collapse:collapse;
    text-align:center;
    width: 550px;
    margin-top:10px;
    margin-left: auto;
    margin-right: auto;
    font-size:11px;
    line-height:22px;
    border: 2px solid white; }
    
    
     
     
     
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="uppertrim"></div>
    <div id="banner"></div>
    <div id="topmenu">
    <div class="topmenu"><ul class="menu">
    
    <li class="sub"><a href="http://www.liamsworld.org.uk/bfcgs/">Members A-D</a>
    	<ins><table><tr><td>
    		<ul>
    			<li><a href="players/Allan.shtml">Alex Allan</a></li>
    			<li><a href="players/CAtkins.shtml">Chris Atkins</a></li>
    			<li><a href="players/SBallantine.shtml">Stuart Ballantine</a></li>
    			<li><a href="players/PClarke.shtml">Paul Clarke</a></li>
    			<li><a href="players/LDArcy.shtml">Liam D'Arcy</a></li>
    			<li><a href="players/CDavidson.shtml">Chas Davidson</a></li>
    			<li><a href="players/PDodds.shtml">Phil Dodds</a></li>
    			<li><a href="players/NDougall.shtml">Neville Dougall</a></li>
    			
    		</ul>
    	</td></tr></table></ins>
    </li>
    <li class="sub"><a href="http://www.liamsworld.org.uk/bfcgs/">Members E-K</a>
    	<ins><table><tr><td>
    		<ul>
    			<li><a href="players/BHindle.shtml">Bev Hindle</a></li>
    			<li><a href="players/AHodby.shtml">Andy Hodby</a></li>
    			<li><a href="players/SHollister.shtml">Steve Hollister</a></li>
    			<li><a href="players/DHumphrey.shtml">David Humphrey</a></li>
    			<li><a href="players/AIngram.shtml">Andy Ingram</a></li>
    			<li><a href="players/SJeffries.shtml">Stuart Jeffries</a></li>
    			<li><a href="players/GJones.shtml">Gareth Jones</a></li>
    			<li><a href="players/JJones.shtml">Judith Jones</a></li>
    			<li><a href="players/PKemp.shtml">Paul Kemp</a></li>
    			
    		</ul>
    	</td></tr></table></ins>
    </li>
    <li class="sub"><a href="http://www.liamsworld.org.uk/bfcgs/">Members L-P</a>
    	<ins><table><tr><td>
    		<ul>
    			<li><a href="players/MLambert.shtml">Mike Lambert</a></li>
    			<li><a href="players/KMay.shtml">Kevin May</a></li>
    			<li><a href="players/DMcArthur.shtml">Darren McArthur</a></li>
    			<li><a href="players/SMilne.shtml">Steve Milne</a></li>
    			<li><a href="players/PMoir.shtml">Phil Moir</a></li>
    			<li><a href="players/NMoore.shtml">Nigel Moore</a></li>
    			<li><a href="players/VPaliczka.shtml">Vince Paliczka</a></li>
    			<li><a href="players/MPembroke.shtml">Marcus Pembroke</a></li>
    			<li><a href="players/CPeters.shtml">Chris Peters</a></li>
    			<li><a href="players/MPettit.shtml">Mark Pettit</a></li>
    		</ul>
    	</td></tr></table></ins>
    </li>
    <li class="sub"><a href="http://www.liamsworld.org.uk/bfcgs/">Members R-Z</a>
    	<ins><table><tr><td>
    		<ul>
    			<li><a href="players/PRobinson.shtml">Peter Robinson</a></li>
    			<li><a href="players/MSales.shtml">Matt Sales</a></li>
    			<li><a href="players/RSexton.shtml">Rob Sexton</a></li>
    			<li><a href="players/PTrevis.shtml">Paul Trevis</a></li>
    			<li><a href="players/ATrotter.shtml">Andy Trotter</a></li>
    			<li><a href="players/JTurner.shtml">James Turner</a></li>
    			<li><a href="players/KTyler.shtml">Ken Tyler</a></li>
    			<li><a href="players/JVarley.shtml">Jason Varley</a></li>
    			
    			
    		</ul>
    	</td></tr></table></ins>
    </li>
    </ul></div></div>
    <div id="left"><div class="leftmenu">
    <ul class="menuleft">
    
    <li class="subleft"><a href="index.shtml">Home
    	<ins><table><tr></tr></table></ins></a>
    </li>
    <li class="subleft"><a href="medal_results.shtml">Medal Results
    	<ins><table><tr></tr></table></ins></a>
    </li>
    <li class="subleft"><a href="news.shtml">News
    	<ins><table><tr></tr></table></ins></a>
    </li>
    <li class="subleft"><a href="winter_pairs.shtml">Winter Pairs Update
    	<ins><table><tr></tr></table></ins></a>
    </li>
    
    <li class="subleft"><a href="tee_times_2011.shtml">Tee Times 2011
    	<ins><table><tr></tr></table></ins></a>
    </li>
    
    <li class="subleft"><a href="green_fees_2011.shtml">Green Fees for 2011 
    	<ins><table><tr></tr></table></ins></a>
    </li>
    
    <li class="subleft"><a href="away_days.shtml">Away Days
    	<ins><table><tr></tr></table></ins></a>
    </li>
    <li class="subleft"><a href="">Spare Link
    	<ins><table><tr></tr></table></ins></a>
    </li>
    <li class="subleft"><a href="annual_cup_2011.shtml">Annual Cup 2011
    	<ins><table><tr></tr></table></ins></a>
    </li>
    <li class="subleft"><a href="contact.shtml">Contact
    	<ins><table><tr></tr></table></ins></a>
    </li>
    </ul>
    </div>
    </div>
    <div id="content">
    
    </div>
    <div id="footer"><p>&copy; Bracknell Forest Golf Society 2010-2011</p></div>
    
    </div>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Yes, you has broked it. Get rid of the comment tag at the top and make sure the doctype statement is on the first line.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi..

    sorry solved it as soon as I saw my code layed out here. My page identifier (I'm using SSIs) was marked up before the doc type because I put it above the include.

    Cheers anyway. I'll leave it up in case anyone else does that.

    Liam

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts
    overlapped replies, but thanks Doc.

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, me again..

    at work they still use IE 6, and as it's a works golf society website, the members may well need to see it in 6. It still splits that div though. I checked it in..

    info.info/netrenderer/index.php

    just to make sure it wasn't an issue with the work machines.. but it's not.

    Is there a hack I need to put in somewhere?

    A couple of the site pages are just about done, Winter Pairs and any of the member score cards from the top links, if that is the problem maybe, but the site validates fine..

    http://validator.w3.org/check?uri=ht...alidator%2F1.1

    CSS validates as well, apart from the vertical text for the tables in the member card section. I think that's an outdated method, but I wouldn't think it would be the cause of this.

    Any ideas???

    Cheers

    Liam

  • #6
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    33
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Hello E-Liam

    I don't think a hack is necessary for the moment if you're trying to make the template IE6 compliant with what you have.

    I can't vouch for the missing nav (for the moment), but for the div class named "menuleft": Please define a width that is equivalent to the width of its div parent. In this case, it's the div id called "left" at 200px. With margins assigned to the left and right at 37px each, 126px should fix your floating issue:

    37+37+126 = 200

    In my numerous attempts to comply with IE6, I found it best to never let the browser assume a width, especially with IE6. It'll screw you over more than Vince McMahon with Bret Hart. So it's best to define one. Let me know how that works for you.

  • Users who have thanked Judgment Day for this post:

    E-Liam (11-25-2010)

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts
    HI JD,

    according to netrenderer that's sorted it out. Cheers.

    The only other thing that didn't work in 6 was the drop down menus, but now that the div is back they may well do now. I'll have to wait until I'm back at work to check it live.

    Thanks again

    Liam


  •  

    Posting Permissions

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