help with menu

phucker · 12-16-2007, 05:26 AM

ok i posted here last week but i have a new problem, of course in firefox this works perfect but it has a glitch in ie.

Code:

body {
	background-image:url(images/glamis2.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#475B85;
	margin: 0px;
	padding: 0px;
	height: 100%;
	background-repeat: no-repeat;
	background-color:#bfae89;
	background-position:top;
}
* {margin: 0px;padding: 0px;}
p {
	padding: 10px 0px 10px 20px;
	display:block;
	color: #6077A9;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
a {
	color:#475B85;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
z {
	color:#6077A9;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
}
#container {
	margin: 0px auto;
	text-align: left;
	width: 900px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#header{
	height:250px;
	width:800px;
	background-repeat: no-repeat;
	background-position:center;
	background-position: top;
	padding: 0px 0px 50px 100px;
}
#content{
	padding-bottom: 40px;
	background-position: top;
	}
#left{
	width:192px;
	float:left;
}
#middle{
	margin-left:220px;
	margin-right:0px;
	width:450px;
	background-position: top;
}
#right{
	width:192px;
	float:right;
}

/********************* menu ****************************/
/* Styles for Menu Items */
/* ======================================================
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/flyout_4level.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.
========================================================= */
.menu { margin: 10px; height: 100px; font-size: 10pt; font-family: system; width: 150px;}
.menu ul { margin: 0pt; padding: 0pt;   z-index: 500; list-style-type: none; width: 1em; }
.menu li { background-color: #BFAE89; float: left; width:150px;}
.menu li.sub { background-color: #BFAE89; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 1pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #D1C4A9; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 10em; color: #857147; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 10em; }
* html .menu a:hover { color: #ccff66; background-color: #999966;  font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; position: absolute; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 8em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }



.menucontent{
	width:170px;
	background-image:url(images/menumiddle.gif);
	padding-top:10px;
	background-repeat: repeat-y;
	background-color: #BFAE89;
	color: #857147;
}
.menuheader h3{
	padding: 10px 0px 0px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	background-color: #BFAE89;
	color:#857147;
	
	width:150px;

}
.menufooter{
	width:170px;
	height:15px;
	background-image:url(images/menubottom.gif);
	color:#BFAE89;
	display:block;
}
.postheader,.menuheader{
	text-transform: uppercase;
	width:200px;
}
/********************* post ****************************/
.post{
	margin-bottom:15px;
	background-position:top;
}
.postheader{
	background-image:none;
	width:550px;
	height:33px;
}
.postheader h1{
  	padding: 7px 0px 0px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bolder;
	font-style: italic;
}

.postcontent{
	background-image:none;
	background-repeat: none;
	padding: 20px 0px;
}
.postfooter{
	background-image:none;
	background-repeat: no-repeat;
	display:block;
	width:450px;
	height:15px;
}
/********************* header ****************************/
#header{
	position:relative;
}
#header ul{
	position:absolute;
	top:240px;
	display:block;
	left:168px;
}
#header ul li{
   display:inline;
	text-align:center;
	margin:auto;
	width:auto;
	border-right: 1px solid #475B85;	
	color:#475B85;
}
.last{
	border-right: 0px none #6b7272 !important;
}
#header ul li a{
	display:inline;
	text-align:center;
	text-decoration:none;
	padding: 0px 10px;
	text-transform: uppercase;
}
#header ul li a:hover{
	text-decoration:underline;
}
/********************* footer ****************************/
#footer{
	width:100%;
	position: fixed;
	bottom: 0 !important;
	height: 40px;
	
}
#footer ul{
	display:block;
	margin-left:190px;
	color:#BFAE89;
}
#footer ul li{
	display:inline;
	text-align:center;
	margin:auto;
	width:auto;
	border-right: 1px solid #6b7272;	
}

#footer ul li a{
	display:inline;
	text-align:center;
	text-decoration:none;
	padding: 0px 10px;
	text-transform: uppercase;
}
#footer ul li a:hover{
	text-decoration:underline;
}
#footer span{
	color:#525757;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align:center;
	width:850px;
	display:block;
	padding: 15px 0px;
}
/********************* menu members ****************************/

.memberheader h3{
	padding: 10px 0px 0px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	background-color: #88B5BF;
	width:360px;
}
.membercontent{
	width:380px;
	background-image:url(images/menumiddle.gif);
	padding-top:10px;
	background-repeat: repeat-y;
	background-color: #BFAE89;
}
.member{
	display:inline;
	float:left;
	margin-left:10px;
}
.member span{
	display:block;
	text-align:center;
	padding: 2px 0px 13px 0px;
	text-transform: uppercase;

}
.member img{
	width:160px;
	height:120px;
	border: solid 2px #999999;	
}
.clear{
	clear:both;
}

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=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title> D.A.N. Racing </title>
</head>

<body>
<div id="container">
	<div id="header">
		<ul>
			<li><a href="http://www.danracing.com/products.html">products</a></li>
			<li><a href="http://www.danracing.com/services.html">services</a></li>
			<li><a href="http://www.danracing.com/ordering.html">ordering</a></li>
			<li><a href="http://www.danracing.com/contact.html">contact</a></li>
			<li><a href="http://www.danracing.com/about.html">about us</a></li>
			<li class="last"><a href="http://www.danracing.com/friends.html">friends</a></li>
		</ul>
	</div>
	<div id="content">
		<div id="left">
			<div class="menu">
			<div class="menuheader"><h3>Navigation</h3></div>
			<div class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">
<b>»</b>Products<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">
<b>»</b>Exhaust<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
<li>
<a href="#">YFZ450</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Stroker Cranks<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Connecting Rods<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
<li>
<a href="#">YFZ450</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>FCR Carbs<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Camshafts<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
<li>
<a href="#">YFZ450</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Valves and Springs<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
<li>
<a href="#">YFZ450</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Pistons<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
<li>
<a href="#">YFZ450</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Intakes<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Gaskets<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
<li>
<a href="#">Raptor 700R</a>
</li>
<li>
<a href="#">YFZ450</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Lock-Up Clutch<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Services<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Head Porting</a>
</li>
<li>
<a href="#">
<b>»</b>3 Plug Head<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>»</b>Manual Decomp<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">Raptor 660R</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">Swing Arms</a>
</li>
<li>
<a href="#">Machining</a>
</li>
<li>
<a href="#">Building</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">Ordering</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Friends</a>
</li>
</ul>
</div>


			<div class="menuheader"><h3>Helpful Sites</h3></div>
			<div class="menu">
<ul>
<li>
<a href="http://www.bluetraxx.com">Bluetraxx</a>
</li>
<li>
<a href="http://www.raptorforum.com">Raptor Forum</a>
</li>
<li>
<a href="http://www.raptortranny.com">Raptor Tranny</a>
</li>
</ul>
</div>
</div>
</div>

<div id="middle">
			<div class="post">
				<div class="postheader"><h1>Welcome to D.A.N. Racing.</h1></div>
				<div class="postcontent">
				<p align="center">&nbsp;</p>
					<p>Discount Aftermarket Necessities</p>
					<p align="center">&nbsp;</p>
					<p>Making the aftermarkets a little more affordable.</p> 
					
			
				<div class="postfooter"></div>
			</div>
			</div>
	  </div>
	</div>
</div>
	</div>
<div class="postfooter" id="footer">
		
	<span>Copyright © 2007 D.A.N. Racing. All rights reserved.</span>	</div>	

</body>
</html>

if anyone could help that would be awesome. the menu in ie just lets certain parts disappear. I HATE IE

phucker · 12-16-2007, 05:32 AM

oh and here is a link, www.danracing.com/test/index.html

my friend just checked it in ie7 and i found out that there is much worse problems.......

IHMUN · 12-16-2007, 05:32 AM

http://validator.w3.org/check?uri=ht...Inline&group=0

Try fixing those errors first.

phucker · 12-16-2007, 05:39 AM

ok i just put in the whole html and css file, it was just the part i thought i was having trouble with

phucker · 12-16-2007, 05:54 AM

ok i fixed those errors and it didnt fix the problem, but that is a handy tool to have.

thanks

Excavator · 12-16-2007, 05:58 AM

That's a pretty complicated menu with all the  stuff.
I think you would do well to rename that first .menu to #menu_container or something and style it seperately from your .menu sections. Then go through and make sure your </div>'s are all ending in the right places.

phucker · 12-16-2007, 06:29 AM

ya i know, it is the only menu i could find that worked at all in ie. i will try your suggestions tomorrow. if you guys have any more things to try please let me know, i am up to try anything.

Apostropartheid · 12-16-2007, 01:57 PM

The best way to do this is to find a cross-browser compatible solution. This code will be so difficult to maintain there'll be no point.

phucker · 12-16-2007, 04:04 PM

well, i wont have to add items very often, once or twice a year so it will be easy. i just have to find what needs to be tweaked and where, i think it has to do with either a position or a visibility. something along those lines, i had one position that i changed from relative to absolute and it fixed many problems in ie and firefox.