SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [CSS TABS] Rounded corner on the right hand side doesn't appear???

    When I test the hover state of the mainMenu, I don't see the rounded cornered on the tab on the right hand side of the screen, all I see is a non-rounded corner on the right hand side of the tab. Could someone please tell me how to fix this? I am using XHTML 1.0 Strict as the doctype. Thanks in advance.

    Code CSS:
    #mainMenu {
        float:left;
        width:100%;
        font-size: 14px;
        list-style:none;
    }
     
    #mainMenu li {
        display: inline;
    }
     
    #mainMenu a:link, #mainMenu a:visited {
        background: url('images/tab-left.gif') no-repeat left top;
        margin-right: 1px;
        padding: 5px 4px 5px 5px;
        text-decoration:none;
        color: #000;
    }
     
    #mainMenu a:link span, #mainMenu a:visited span {
        background: #DADADA url('images/tab-right.gif') no-repeat right top;
        color:#000;
        margin-right: 1px;
        text-decoration:none;
        padding: 5px 4px 5px 5px;
    }
     
    #mainMenu a:hover {
        margin-right: 1px;
        color: #000;
        text-decoration: none;
        background: bottom left;
        padding: 5px 4px 5px 5px;
    }
     
    #mainMenu a:hover span {
        margin-right: 1px;
        color: #000;
        text-decoration: none;
        background: bottom right;
        background: #C2C1C1;
        padding: 5px 4px 5px 5px;
    }

    Code HTML4Strict:
    <ul id="mainMenu">
    	<li><a href="#"><span>Home</span></a></li>
    	<li><a href="#"><span>Partner Profiles</span></a></li>
    	<li><a href="#"><span>Photos</span></a></li>
    	<li><a href="#"><span>Careers</span></a></li>
    	<li><a href="#"><span>Client Base</span></a></li>
    	<li><a href="#"><span>News</span></a></li>
    	<li><a href="#"><span>Contact</span></a></li>
    	<li><a href="#"><span>Sitemap</span></a></li>
    </ul>

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You have taken out/not specified the background image on hover.

    This:

    Code:
    #mainMenu a:hover {
        margin-right: 1px;
        color: #000;
        text-decoration: none;
        background: bottom left;
        padding: 5px 4px 5px 5px;
    }
    isn't valid. The background shorthand must have either a color or background image value defined. So either remove that line from the hover state or add the background image to that declaration. And if you need both images, then use one for the :hover and the other for the :hover span, just like you have done for the :link and :visited rules.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •