...

View Full Version : 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.


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;
}





<!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>&#187;</b>Products<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#">
<b>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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>&#187;</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 &#169; 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=http&#37;3A%2F%2Fwww.danracing.com%2Ftest%2Findex.html&charset=(detect+automatically)&doctype=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 <!--[if IE 7]><!--> 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum