PDA

View Full Version : Div has moved in IE, and I can't see why.


E-Liam
Nov 20th, 2010, 11:22 PM
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


<!-- 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>
DrDOS
Nov 20th, 2010, 11:31 PM
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.
E-Liam
Nov 20th, 2010, 11:31 PM
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
E-Liam
Nov 20th, 2010, 11:32 PM
overlapped replies, but thanks Doc. :thumbsup:
E-Liam
Nov 23rd, 2010, 07:24 PM
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. :confused:

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=http%3A%2F%2Fwww.liamsworld.org.uk%2Fbfcgs%2Findex.shtml&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%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
Judgment Day
Nov 24th, 2010, 09:01 AM
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.
E-Liam
Nov 24th, 2010, 01:53 PM
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