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,643
    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

  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,643
    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.

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
  •