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 9 of 9

Thread: help with menu

  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with menu

    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>&#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
    Last edited by phucker; 12-16-2007 at 06:36 AM.

  • #2
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.......

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Last edited by IHMUN; 12-16-2007 at 06:37 AM.

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i just put in the whole html and css file, it was just the part i thought i was having trouble with

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i fixed those errors and it didnt fix the problem, but that is a handy tool to have.

    thanks

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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