Forum Moderators: not2easy
Here is the css:
#menu10 {
width: 200px;
margin: 7px 10px 10px 7px;
}
#menu10 li a {
display: block;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
* html #menu10 li a {
height: 36px;
}
#menu10 li a:link, #menu10 li a:visited {
color: #FFF;
background: url(../i/menu10.gif);
padding: 8px 0px 5px 10px;
font: bold 12px Arial, Helvetica, sans-serif;
}
#menu10 li a:hover {
color: #FF9834;
padding: 8px 0px 5px 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
Source Code:
<div id="menu10">
<ul>
<li><a href="../moving-quote-maryland.html" title="Link 1">Free Moving Quote </a></li>
<li><a href="../packing-crating-services.html" title="Link 2">Packing and Crating </a></li>
<li><a href="../moving-documents.html" title="Link 3">Moving Documents </a></li>
<li><a href="../moving-tips.html" title="Link 4">Helpful Moving Tips </a></li>
<li><a href="../faqs.html" title="Link 5">Frequently Asked Questions </a></li>
<li><a href="../maryland-moving-company.html" title="Link 5">About</a></li>
</ul>
</div>
Secondly, what browsers did you test in?
Which browsers does the menu mess up in?
What's the mess up?
[edited by: Xapti at 6:10 am (utc) on June 27, 2007]
however it's your use of the
* HTML hackIf you weren't using a Doctype the page would have been rendering in Quirks mode, in IE this means that the Box Model reverts to the faulty implementation - the height/width of elements include padding and borders, instead of the recommended method where height/width = content + padding + borders
see: Choosing the best Doctype for your site [webmasterworld.com].
and just another small observation, everything after the "voice family" parse error hack, but still in the same ruleset is ignored by IE5.x so that means your
text-decorationin short, you will to find a way to feed ONLY IE5.x the 'wrong' value once you apply a proper Doctype
e.g. Using the SBMH
menu10 li a {
text-decoration: none;
display: block;
padding: 8px 0px 5px 10px;
height: 23px; /* required height, 36px, minus top/bottom padding */
}#menu10 li a {
\height: 36px; /* for IE5.x only = required height */
he\ight: 23px; /* reset for other browsers */
}
or you could put it in a conditional comment..
main CSS
...
#menu10 li a {
text-decoration: none;
display: block;
background: url(menu10.gif);
height: 23px;
padding: 8px 0px 5px 10px;
}
...CC: (in head of document not in the main CSS file)
<!--[if lt IE 6]>
<style type="text/css" media="screen">
#menu10 li a {
height: 36px; /* for IE5.x only*/
}
</style>
<![endif]-->
[edited by: SuzyUK at 1:28 pm (utc) on June 27, 2007]
I want to use the following doctype:
<!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">
The page (side menu) renders properly in Firefox (PC) but does not work in IE 6 BUT does work in the standalone version of IE 7 I am using.
I made the changes you suggested (thanks btw) and I still see the same result. All looks fine in Firefox 2.4 and IE 7, but something strange occurs in IE 6.
If you don't mind I would like to sticky you the URL and perhaps you could advise me what I am doing wrong. I know I need to add a "hack" or perhpas make a minor change for IE 6.
you have to remove the
* HTML* html #menu10 li a {
height: 36px;
}IE5.x is now getting it's 36px height via the conditional comment
IE6, with your new Doctype (which is fine) needs the smaller 24px height as it is now in compliant rendering mode, i.e. it follows the same Box Model as all compliant browsers
IE7 was working because it doesn't read the [*html] hack, when it's in compliant rendering mode, this was a parse hack fix in IE7 ;)
Just gotta get the modes sorted, but fwiw I'd say it's the right thing to go to compliant rendering mode (use a proper Doctype), that way most IE Box Model hacks/workarounds are only needed for IE5.x, and you can put them in the conditional comment and forget about them!
- btw you can also put all your workarounds into a separate stylesheet and call the stylesheet from inside the conditional comment if you prefer that
<!--[if lt IE 6]>
<link rel="stylesheet" href="[path]/fix-ie5x.css" type="text/css" media="screen" />
<![endif]-->
cheers
Ciao,
Michael
thanks for replying back
Our site shows it at under 1%, but no idea how it is in general.
