...

View Full Version : Resolved CSS menu inconsistencies



Stubworth
11-14-2010, 09:06 PM
Hey all, first post, so here goes...

I've got a CSS menu for my website. It works as expected in FF, Opera, Safari and Chrome. In Internet Explorer it fails to display correctly and looks an absolute mess.

Because I'm running XP, I can't test it in the IE9 Beta.

To view the page please visit it in FF & then in IE8 to see the problem. Site URL:

http://www.unibloggr.co.uk

The only page uploaded is index.php, so the links are not supposed to work.

As you will see, in IE8, the menu font style and sizes change when moused over, as well as the menu actually extending past the table it is placed in.

I need to know how to make the IE8 menu conform with how it appears in every browser I've tested it in.

The code is as follows.

The menu_style.css file:


.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #FFFFFF url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;

}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;

}

.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 34.1px;
float: left;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 11px;
color: #242525;
text-decoration: none;

}
.bubplastic.horizontal ul li a:hover {
display: block;
height: 27px;
padding-left: 34.1px;
float: left;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;

}

.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 34.1px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;

}
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
color:#fff;
font-size:11px;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
color:#fff;
font-size:11px;
}
#test li {
display: block;
border: solid 1px red;
}


And the page code...


<html>
<head style="height: 100%;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' href='menu/menu_style.css'>
<title>Generic title</title>
</head>

<body class="bodybackground" style="height: 100%;">
<center>
<table width="979" border="0" cellpadding="0" cellspacing="0" style="height: 100%;" vspace="0">
<tr>
<td height="102" valign="top"><img src="images/header.png" width="979" height="102" alt="cheap discount websites copy writing"/><BR></td>
</tr>
<tr>
<td height="42" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<div class="menu bubplastic horizontal blue" style="size:auto;">
<ul>
<li class="highlight"><span class="menu_r"><a href="index.php" target="_self"><span class="menu_ar">Homepage</span></a></span></li>
<li><span class="menu_r"><a href="about.php" target="_self"><span class="menu_ar">About Us</span></a></span></li>
<li><span class="menu_r"><a href="signup.php" target="_self"><span class="menu_ar">Signup</span></a></span></li>
<li><span class="menu_r"><a href="blogofthemonth.php" target="_self"><span class="menu_ar">Thing of the Month</span></a></span></li>
<li><span class="menu_r"><a href="whyus.php" target="_self"><span class="menu_ar">Why Choose</span></a></span></li>
<li><span class="menu_r"><a href="faq.php" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
<li><span class="menu_r"><a href="help.php" target="_self"><span class="menu_ar">Help/Support</span></a></span></li>
<li><span class="menu_r"><a href="contact.php" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
</ul>
<br class="clearit" />
</div>
</td>
</tr>
<tr>
<td height="403" bordercolor="#FFFFFF" bgcolor="#FFFFFF">Here is some text.</td>
</tr>
<tr valign="baseline">
<td valign="bottom" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><center>
<span class="normaltext">Design Copyright 2010.</span> - <span class="links"><a href="terms.html">Terms and Conditions</a></span> - <span class="links"><a href="privacy.html">Privacy Policy</a></span> - <span class="links"><a href="contact.php">Contact Us</a></span></center></td>
</tr>
</table>
</center>
</body>
</html>


Any ideas/suggestions will be greatly appreciated! :)

DrDOS
11-14-2010, 09:14 PM
You need a doctype statement at the top of your page. IE will absolutely not display these correctly without one. If it still doesn't display correctly you may need other code such as the csshover.htc.

Stubworth
11-14-2010, 09:31 PM
Added the doctype to the page, that's fixed the menu. But now the 100% table is messed up.

Any thoughts how adding doctype info would have broken that?

Stubworth
11-14-2010, 09:46 PM
Fixed.

Chris Hick
11-14-2010, 10:59 PM
Please remember to place your problem as resolved.:thumbsup:


Steps:
go to your first post and hit edit> go advanced>select the resolved prefix in-front-of your title



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum