PDA

View Full Version : Drop line menu for IE6 !!



geedub
Jul 6th, 2009, 03:40 PM
I have a menu I made but when i view it in EI6 its really screws it up and not sure how to fix these bugs works fine on new browsers on pcs, Safari and Firefox!!

here is the menu on the server
HTML Code:
http://www.cranshawmiddleton.co.uk/waxworks/index_ie6.html
Could anyone spot anything i missed and more importantly should know I am a beginner really!!



<!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" />

<style>

@charset "UTF-8";

* {
margin: 0;
padding: 0;
}

body {
background-color:03112c;
}

h1 {
font-size: 1em;
text-indent: -1000px;
height: 76px;
width: 236px;
margin-bottom: 15px;
overflow: hidden;
}

h2 {
color:#FFFFFF;
font-family:Helvetica, Arial, sans-serif;
font-size:1.2em;
font-weight:bold;
}


p {
color:#FFFFFF;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
line-height: 1.2em;
}


#wrapper {
width: 898px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
}

#masthead {
width: 846px;
height:102px;
background-image:url(images/mastheadbg.jpg);
background-repeat:repeat-x;
margin: auto;
padding: 0px;
}

#maincontent {
width: 846px;
margin-left:20px;
margin-right:20px;
padding: 0px;
height: 30px;
}


#copy_block {
float:left;
margin:10px;
width:370px;
margin-left: 40px;
}

#body_area {
height:348px;
width:898px;
margin:auto;
padding: 0px;
}



#footer {
clear:both;
padding:10px;
text-align:center;
}



a:link {
color:#FFFFFF;
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
line-height: 1.2em;
text-decoration: none;
}


a:visited {
color:#999999;
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
text-decoration: none;

}

a:hover {
color:#FFCC00;
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
text-decoration: none;

}

/* ----------------------------- home panels ----------------------------- */


#lefthomepanel {
width:411px;
height:249px;
background-image:url(images/Temptigerpanel.png);
margin:10px;
margin-right: 40px;
float:right;
}



/* ----------------------------- home panels ----------------------------- */









/* ----------------------------- start #nav ----------------------------- */

#navwrap {
background-color:#db241e;
width: 846px;
margin: auto;
padding: 0;
height: 43px;
}

/* menu container / wrapper*/
.nav {
font-family: arial, sans-serif;
width:791px;
position:relative;
font-size:9px;
background: ff0000;
z-index:100;
margin: auto;
padding: 0;
max-height: 43px;
}


.nav ul {
position: relative;
width: 800px;
max-height: 43px;

}


/* list colour*/
.nav ul li {
float:left;
display: inline-block;
height: 43px;
}

/*list colours and postitions */
.nav ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
height:43px;
color: #FFCC00;
background:url(../../graphics/drop.gif) bottom right no-repeat;
font-size:11px;
text-align: center;

}


/*postition of hover/first level*/
.nav ul li ul {
visibility:hidden;
position:absolute;
left:0;
}
.nav ul li ul li {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
color: #FFCC00;
font-weight: bold;
}

/*background of list hover*/
.nav ul li:hover a,
.nav ul li a:hover {color:#FFCC00; background:url(drop-line-bg.jpg) #000000;}


/*drop down menu*/
.nav ul li:hover ul,
.nav ul li a:hover ul {visibility:visible; width:900px;background:transparent; overflow:hidden;}



/* drop down colours */
.nav ul li:hover ul li a,
.nav ul li a:hover ul li a {
display:block;
background: url(images/drop-line-bg.jpg) #000000;
color:#003399;
padding-left: 10px;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

/* dropdown rollover colours */
.nav ul li:hover ul li a:hover,
.nav ul li a:hover ul li a:hover {
background: url(images/drop-line-bg-dark.jpg);
color: #003399;
}

/*----------------------------- start #nav ids ----------------------------- */
#home {
background: url(http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-homeover.jpg);
}

#figures {
background: url(http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-figuresover.jpg);
}

#whatsnew {
background: url(http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-whatsnewover.jpg);
}

#plan {
background:url(http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-planyourvisitover.jpg) no-repeat;
}

#schools {
background:url(images/TEMP-schoolsover.jpg) no-repeat;
}
#tickets {
background:url(images/TEMP-ticketsover.jpg) no-repeat;
}
#specialoffers {
background:url(images/TEMP-specialoffersover.jpg) no-repeat;
}

.nav li a img {
border: none;
/*vertical-align: top; /* for IE6 */
}

.nav img {
display: inline-block;
list-style:none;
}

.nav li a:hover {
visibility: visible;
}

.nav li a:hover img {
visibility:visible;
}

.nav li a:hover img/**/ {
visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #nav ids ----------------------------- */




</style>


</head>
<body>


<div id="navwrap">

<div class="nav">
<ul>
<li><img src="http://www.cranshawmiddleton.co.uk/waxworks/images/left-nav-cap.jpg" alt="HOME" border="0" /></li>
<li><a title="" href="index.html" id="home"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-home.jpg" alt="" border="0" /><!--[if IE 7]><!--></a><!-- <![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li>


<li><a title="" href="#nogo" id="figures"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-figures.jpg" alt="FIGURES" border="0" /></a>
<ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="sportingheroes.html" title="SPORTING HEROES">SPORTING<br/>HEROES</a></li>
<li><a href="regalroom.html" title="REGAL ROOM">REGAL ROOM</a></li>
<li><a href="celebcity.html" title="CELEB CITY">CELEB CITY</a></li>
<li><a href="corrie.html" title="CORRIE">CORRIE</a></li>
<li><a href="rockfactory.html" title="ROCK FACTORY">ROCK FACTORY</a></li>
<li><a href="00heaven.html" title="00 HEAVEN">00 HEAVEN</a></li>
<li><a href="chamberofhorrors.html" title="CHAMBER OF HORRORS">CHAMBER<br/>OF HORRORS</span></a></li>
<li><a href="moviestars.html" title="MOVIE STARS">MOVIE STARS</a></li>
<li><a href="hollywoodgiants.html" title="HOLLYWOOD GIANTS">HOLLYWOOD<br/>GIANTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</ul>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a title="" href="#nogo" id="whatsnew"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-whatsnew.jpg" alt="WHAT'S NEW" border="0" /></a></li>
<li><a title="" href="#nogo" id="plan"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-planyourvisit.jpg" alt="PLAN YOUR VISIT" border="0" /></a></li>
<li><a title="" href="#nogo" id="schools"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-schools.jpg" alt="SCHOOLS & GROUPS" border="0" /></a></li>
<li><a title="" href="#nogo" id="tickets"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-tickets.jpg" alt="BUY TICKETS" border="0" /></a></li>
<li><img src="http://www.cranshawmiddleton.co.uk/waxworks/images/right-nav-cap.jpg" alt="" border="0" /></li>
<li><img src="http://www.cranshawmiddleton.co.uk/waxworks/images/redspace.jpg" alt="" border="0" /></li>
<li><a title="" href="#nogo" id="specialoffers"> <img src="http://www.cranshawmiddleton.co.uk/waxworks/images/TEMP-specialoffers.jpg" alt="SPECIAL OFFERS" border="0" /><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</ul>
</div>
</div>

</body>
</html>

Kodah
Jul 7th, 2009, 02:23 PM
According to the validator (http://validator.w3.org) you have omitted and/or mismatched several tags in the html.

IE has problems with invalid code