Help with CSS Menu Error in IE

A

Ace Fire6

Member
Joined
Oct 12, 2009
Messages
21
Reaction score
0
Hi there

I am fooling around with a website and the menu I am using was made with CSS. I recently noticed that the site breaks in IE and was wondering if someone could help me. Any help would be greatly appreciated.

Thanks

HTML: 
<html> 
 
<!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> 
<title>Public Test</title> 
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" /> 
</head> 
 
 
 
<body bgcolor="#000050"> 
 
 
 
<ul class="menu"> 
  <li><a href="" class="active"><span>Home</span></a></li> 
 
  <li><a href=""><span>Cows</span></a></li> 
 
  <li><a href=""><span>Jelly</span></a></li> 
 
  <li><a href=""><span>Spam</span></a></li> 
 
  <li><a href=""><span>Contact Us</span></a></li> 
 
  <li><img src = "images/menubg.jpg"/></li> 
</ul> 
 
<center> 
<font face = "Arial, Verdana, Tahoma" color = "#ffffff"> 
<br> 
<br> 
<h1>Heading</h1> 
<p> 
TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE.
</p></font> 
</center> 
<br> 
</body> </html>

and this is the information in the stylesheet:

Code: 
.menu{
 margin:0;
 padding:0;
 height:30px;
 display:block;
 background:url("../images/menubg.jpg") repeat-x; 
 	}

.menu li{
 padding:0;
 margin:0;
 width:200px;
 list-style:none;
 display:inline;
	}
.menu li a{
 float:left;
 padding-left:15px;
 display:block;
 color:rgb(255,255,255);
 text-decoration:none;
 font:12px Verdana, Arial, Helvetica, sans-serif;
 cursor:pointer;
 background:url("../images/topMenuImages.png") 0px -30px no-repeat;
 outline:none;
	}

.menu li a span{
 line-height:30px;
 float:left;
 display:block;
 padding-right:15px;
 background:url("../images/topMenuImages.png") 100% -30px no-repeat;
	}

.menu li a:hover{
 background-position:0px -60px;
 color:rgb(255,255,255);
	}

.menu li a:hover span{
 background-position:100% -60px;
	}

.menu li a.active, .menu li a.active:hover{
 line-height:30px;
 font:12px Verdana, Arial, Helvetica, sans-serif;
 background:url("../images/topMenuImages.png") 0px -90px no-repeat;
 color:rgb (255,255,255);
	}

.menu li a.active span, .menu li a.active:hover span{
 background:url("../images/topMenuImages.png") 100% -90px no-repeat;
	}

html, body {
  margin: 0;
  padding: 0;
}
 
Last edited:
Well, as a starting point we don't have the image you use. Also, perhaps you could give us an idea of what you want it to do and what it isn't doing? Also which version of IE does it break on? What have you tried it on? Perhaps a screenshot?
Also, I can see from most of the HTML that you are a not making full use of CSS.
Avoid using old style things like <font> <center>
Rather use the newer CSS equivalents.
A good place to start is www.w3schools.com
 
I'm not sure in what way it is broken, but when I remove "width:200px;" from ".menu li", the menu looks the same in both Firefox and IE8 (I don't have any other version of IE)
 
I think that may be a good fix, thank you, I will implement the changes asap. Thank you ozziej for alerting me to a newer/better way of controling styles. I was not aware of this because I am a CSS noob and hopefully I will be able to update the code and use some of the things from the site.

UPDATE: Thank you so much, the menu is looking fine now =]
 
Last edited:
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X