Advanced Search

Results 1 to 4 of 4

Thread: Code is validated (3 Warnings) but still does not work in IE8 but works in Firefox?

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Code is validated (3 Warnings) but still does not work in IE8 but works in Firefox?

    Hi everyone,

    I was hoping someone could help. This code works fine in Firefox but in IE8, it does not display the drop down menus.

    These are the warnings I get by the validator

    7 .menu Redefinition of font-size
    11 .menu ul You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
    38 .menu li ul You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.

    Any ideas? I've merged both the CSS code and the HTML code together.

    cheers,
    Andrew

    Code:
    <style>
    
    
    .menu{
    	border:none;
    	border:0px;
    	margin:0px;
    	padding:0px;
    	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	}
    .menu ul{
    	background:#333333;
    	height:35px;
    	list-style:none;
    	margin:0;
    	padding:0;
    	}
    	.menu li{
    		float:left;
    		padding:0px;
    		}
    	.menu li a{
    		background:#333333 url("images/seperator.gif") bottom right no-repeat;
    		color:#cccccc;
    		display:block;
    		font-weight:normal;
    		line-height:35px;
    		margin:0px;
    		padding:0px 25px;
    		text-align:center;
    		text-decoration:none;
    		}
    		.menu li a:hover, .menu ul li:hover a{
    			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
    			color:#FFFFFF;
    			text-decoration:none;
    			}
    	.menu li ul{
    		background:#333333;
    		display:none;
    		height:auto;
    		padding:0px;
    		margin:0px;
    		border:0px;
    		position:absolute;
    		width:225px;
    		z-index:200;
    		/*top:1em;
    		/*left:0;*/
    		}
    	.menu li:hover ul{
    		display:block;
    		
    		}
    	.menu li li {
    		background:url('images/sub_sep.gif') bottom left no-repeat;
    		display:block;
    		float:none;
    		margin:0px;
    		padding:0px;
    		width:225px;
    		}
    	.menu li:hover li a{
    		background:none;
    		
    		}
    	.menu li ul a{
    		display:block;
    		height:35px;
    		font-size:12px;
    		font-style:normal;
    		margin:0px;
    		padding:0px 10px 0px 15px;
    		text-align:left;
    		}
    		.menu li ul a:hover, .menu li ul li:hover a{
    			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
    			border:0px;
    			color:#ffffff;
    			text-decoration:none;
    			}
    	.menu p{
    		clear:left;
    		}	
    
    		
    
    </style>
    
    <div class="menu">
    <ul>
    <li><a href="index.php" target="_self" >i-Home</a>
    </li>
    <li><a href="games.php" target="_self" >Games</a>
    <ul>
    <li><a href="xbox360reviews.php" target="_self">XBox 360</a></li>
    <li><a href="ps3reviews.php" target="_self">PlayStation 3</a></li>
    <li><a href="pcreviews.php" target="_self">PC</a></li>
    <li><a href="wiireviews.php" target="_self">Wii</a></li>
    </ul>
    </li>
    <li><a href="movies.php" target="_self" >Movies</a>
    <ul>
    <li><a href="blurayreviews.php" target="_self">Blu-ray</a></li>
    <li><a href="dvdreviews.php" target="_self">DVD</a></li>
    <li><a href="imaxreviews.php" target="_self">iMax</a></li>
    <li><a href="moviereviews.php" target="_self">Movies</a></li>
    </ul>
    </li>
    <li><a href="software.php" target="_self" >Software</a>
    </li>
    <li><a href="hardware.php" target="_self" >Hardware</a>
    <ul>
    <li><a href="" target="_self">PC</a></li>
    <li><a href="" target="_self">Apple</a></li>
    <li><a href="" target="_self">Console</a></li>
    </ul>
    </li>
    <li><a href="coolreviews.php" target="_self" >Comics</a>
    </li>
    <li><a href="newreviews.php" target="_self" >New Reviews</a>
    <ul>
    <li><a href="games" target="_self">Games</a></li>
    <li><a href="" target="_self">Movies</a></li>
    <li><a href="" target="_self">Hardware</a></li>
    <li><a href="" target="_self">Comics</a></li>
    </ul>
    </li>
    <li><a href="competitions.php" target="_self" >Competitions</a>
    </li>
    <li><a href="forums.php" target="_self" >Community</a>
    </li>
    <li><a href="news.php" target="_self" >News</a>
    </li>
    <li><a href="test.php" target="_self" >Test</a>
    </li>
    </ul>
    </div>

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,621
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    IE has limited support for the :hover psuedoclass. You can try something like whatever:hover, or simply use javascript to power the dropdowns.

    good luck
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  3. #3
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Adrian, worked perfectly

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,621
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    no problem. you should edit your first post and add the "Resolved" prefix to your thread title.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

Bookmarks

Posting Permissions

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