Sorry forgot to provide the site demo - http://design.sodesires.com/tictap/

With Regards - Jaime

-----Original Message-----
From: JW [mailto:[EMAIL PROTECTED] 
Sent: Friday, 10 September 2004 4:17 PM
To: Mailing List :: WSG | CSS
Subject: Sliding Door Menu Tweaking problem in Mac IE

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
******************************************************

Reply via email to