SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Giving priority to one attribute over others inside the same defined tag

    Hi,

    the title of my post seems odd, but the problem is actually very simple. I have the following definition for an anchor element in my css:

    ul#nav1 a:link, ul#nav1 a:visited, ul#nav1 a:active {
    color: #000;
    font-size: 85%;
    font-weight: bold;
    text-decoration: none;
    padding: .4em 1em .5em 1em;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    background: #eec url('../img/ne.gif') no-repeat top right;
    }

    The problem. The background image ne.gif is displayed below the border, as if css gave priority to the border rather than the bg image. Can anybody advise how to resolve this. please not I am already using an image in the html to display the left corner, while the right corner is defined in the css as indicated above.

    Hope someone has a good suggestion, counting on Doug the master of corners, hope you are around mister .

    thanks,

    DH

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there

    Edit:

    Nope, that doesn't work.

    Take the easy option:

    If your nav menu is reasonably small, remove these two lines:

    Code:
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    And then make your background image bigger and then draw in the right and top borders Make it big enough that you don't need to worry about users using big font sizes and you are clear... You said corners, so I assume the only detail is the top right area, in which case you should get resonable compression on a solid area of colour if you are using gifs etc.



    Edit:

    If you like, there is allways the hard way too: http://www.albin.net/CSS/roundedCorners/


    I don't know what you set in a:hover, but guessing your HTML looks like this:

    Code:
    <ul id="Nav">
    <li><a>Text</a></li>
    </ul>
    Give this a try:

    Code:
    ul#nav1 li {
    color: #000;
    font-size: 85%;
    font-weight: bold;
    text-decoration: none;
    padding: .4em 1em .5em 1em;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    }
    
    ul#nav1 a:link, ul#nav1 a:visited, ul#nav1 a:active {
    display: block;
    width: 100%;
    height: 100%;
    background: #eec url('../img/ne.gif') no-repeat top right;
    }
    If you want to change the background image on hover, you can try changing your HTML to this:

    Code:
    <ul id="Nav">
    <li><a><span>Text</span></a></li>
    </ul>
    And then the same styles as above, except for the first one use this selector:

    ul#nav1 a:link, ul#nav1 a:visited, ul#nav1 a:active

    and the second, use this one:

    ul#nav1 a:link span, ul#nav1 a:visited span, ul#nav1 a:active span

    Off the top of my head, but should work

    Douglas
    Last edited by DougBTX; Jul 8, 2003 at 15:28.
    Hello World

  3. #3
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Doug,

    thanks and sorry for the delay in replying. Method 1 is not suitable, as you have indicated, and method 2 is not feasible as the image is used to create corners for a top navigation menu. I am taking a look at 3 and it looks promising even with dynamic font sizes, thanks for the feedback.

    DH


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
  •