SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul a: ID background image is skinning all enclosed a: links

    I'm working on this site: http://troas.phillipsdata.com/~vusnnet/ and am having a problem with links in a div showing the same background image as it's enclosing div.

    Once on the site, click LOGIN. You will see a box appear above. What you see is the login form, plus three login buttons below. These links are regular a: links, but because they are inside the div that shows the LOGIN button, the regular a:'s are pulling the background image shown in the enclosing a:.

    The login form on the left side of the page is the same form that should display inside that popup window.

    I already tried creating a new class specifying no background image, but that didn't work. Anybody have any ideas how to solve this?

    Thanks,
    Cory

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I already tried creating a new class specifying no background image, but that didn't work. Anybody have any ideas how to solve this?
    This would work, you just to be more specific with your selectors than the previous styles to override them.

    You need to validate your page as a lot of that markup doesn't make sense, and you should validate to a strict doctype.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Mark said you would need to do something like this:

    Code:
    #globalheader #globalnav  .item-list a{background:transparent}
    Or you could use !important (judiciously) as follows

    Code:
     .item-list a{background:transparent!important}

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but actually what I'm trying to do is make these links text links as opposed to image links. When I make the background:transparent, it simply hides the images and shows nothing. The graphic from the encasing graphical link is still appearing within the window with the above recommended tags inserted.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You only specified the background image as of concern in your first post but I thought you would have got it from my last post as all you have to do is cancel out anything that you don't want.

    Something like this:
    Code:
    #globalheader #globalnav  #login-box a{
        background:transparent;
        color:#ffffff;
        overflow:visible;
        width:auto;
        height:auto;
        float:none;
        display:block;
        text-indent:0;
    }
    #login-box {height:auto;}


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
  •