I know Sliding Door works in Mac IE but I needed to have 2 menu text colour
and it must validate in xhtml strict.
I suspect the extra span is the culprit for breaking the menu in Mac IE.
<ul id="menu">
<li><a href="#" title="Get in touch with
TicTap"><span>Contact<span>US</span></span></a></li>
</ul>
Extra span here to make the font white - <span>US</span>
I know I could use images but I wish to refrain from it so that I can have
the flexibility to change the menu content and not deal with image off
issues.
Does anyone have a better solution to make it work in Mac IE?
Below is the CSS for the Sliding door
#menu
{
font-family: Verdana, Helvetica, Arial, sans-serif, Geneva;
font-size: 12px;
font-weight: bold;
width: 600px;
float: right;
margin: 0;
padding : 0 20px 0 0;
}
#menu ul {margin: 0; padding: 0;}
#menu li {display: inline; margin: 0; padding: 0;}
#menu a
{
color: #8A761A;
text-decoration: none;
background: url(../../../images/global/menu/left-corner.gif)
no-repeat;
float: right;
padding: 0 0 0 13px;
margin: 0 0 0 6px;
}
#menu a span
{
background: url(../../../images/global/menu/right-corner.gif)
no-repeat right top;
display: block;
float: right;
padding: 1px 13px 2px 0;
margin: 0;
}
#menu a span span /*This is the extra span to set text to another colour*/
{
color: #FFFFFF;
background: none;
display: inline; /* undo block above to set it next to main span */
padding: 0;
margin: 0;
}
#menu #menuSelected a, #menu a:hover {background-position: 0 -25px;}
#menu #menuSelected a span, #menu a:hover span {background-position: 100%
-25px;}
With Regards - Jaime
******************************************************
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
