SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Very slight CSS issue

    I've just changed the design of my 2 larger (non-commerical) sites.

    However, from the navigation menu I created, I'm getting a clash with the CSS of vBulletin - it's causing left-hand nav links to be underlined when I've tried to stipulate against that in their class description.

    I don't know enough about this to sort it out. Essentially, I'm running the following code:

    Code:
    A.leftLink 
    { BACKGROUND-COLOR: #ffffff; 
    BORDER-BOTTOM: #333333 1px solid; 
    BORDER-LEFT: #ededed 1px solid; 
    BORDER-RIGHT: #999999 1px solid; 
    BORDER-TOP: #ededed 1px solid; display:block; 
    COLOR: #000000; 
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    display:block;
    FONT-SIZE: 9px; PADDING-LEFT: 10px; 
    TEXT-DECORATION: none } 
    
    A.leftLink:hover 
    { BACKGROUND-COLOR: #dbdbdb; 
    BORDER-BOTTOM: #ededed 1px solid; 
    BORDER-LEFT: #999999 1px solid; 
    BORDER-RIGHT: #ededed 1px solid; 
    BORDER-TOP: #999999 1px solid; 
    COLOR: #000000; 
    TEXT-DECORATION: none } 
    


    which is interfered with by the vBulletin CSS - I think this:

    Code:
    BODY A:link {
    COLOR: #666666; TEXT-DECORATION: underline
    }
    BODY A:visited {
    COLOR: #000000; TEXT-DECORATION: underline
    }
    BODY A:hover {
    COLOR: #666666; TEXT-DECORATION: underline
    }
    BODY A:active {
    COLOR: #666666; TEXT-DECORATION: underline
    }
    


    How can I ensure that my left-hand navigation links in the forum are not underlined?

    You can see an example of how the left-hand nav menu normally looks here:

    http://www.comparative-religion.com

    compared to here:

    http://www.comparative-religion.com/forum/index.php

    which should illustrate the underline issue.

    Apologies - I'm very much the trial and error person.
    Internet Business Forums - free business help & advice

  2. #2
    SitePoint Enthusiast DiDoKa's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A.leftLink {
    BACKGROUND-COLOR: #ffffff;
    BORDER-BOTTOM: #333333 1px solid;
    BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block;
    COLOR: #000000;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    FONT-SIZE: 9px;
    PADDING-LEFT: 10px;
    TEXT-DECORATION: none <---- i think the problem is here, see it you forgot the ";"
    }

    also kick out:

    BODY in front of all those BODY links and never forget the ";" at the end.

    Should work.

  3. #3
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that - hm, still showing as underlined, though.
    Internet Business Forums - free business help & advice

  4. #4
    SitePoint Enthusiast DiDoKa's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmhh funny, i tried it on my compu and it worked just fine, but i think i got the code right from your website and there it looks like this:

    body a:link {
    color: #666666;
    text-decoration: underline;
    }
    body a:visited {
    color: #000000;
    text-decoration: underline;
    }
    body a:hover, body a:active {
    color: #666666;
    text-decoration: underline;
    }


    I kicked out all those bodies and seperated this:

    body a:link {
    color: #666666;
    text-decoration: underline;
    }
    body a:visited {
    color: #000000;
    text-decoration: underline;
    }
    body a:hover, body a:active {
    color: #666666;
    text-decoration: underline;
    }

    Then i jumped to:
    A.leftLink { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 9px; PADDING-LEFT: 10px; TEXT-DECORATION: none }

    A.leftLink:hover { BACKGROUND-COLOR: #dbdbdb; BORDER-BOTTOM: #ededed 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #ededed 1px solid; BORDER-TOP: #999999 1px solid; COLOR: #000000; TEXT-DECORATION: none }

    and saw that the ";" was missing so i inserted that.

    and right above that you got this:

    .leftLinkHD {
    BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 12px; FONT-SIZE: 9px; BORDER-LEFT: #999999 1px solid; WIDTH: 100%; COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #808080; TEXT-DECORATION: none
    }

    also missing ";".

    and then, i worked.

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The missing ";" is not a problem if that is the last attribute in the style, however it is nad form to leave it out and does make it harder to maintain and add new attributes so you should put it in.

    I notice that the main styles are set on the selector
    Code:
    A.leftLink 
    {
     ...
    }
    I think vB style on a:link may be over riding this try changing the selector to
    Code:
    A.leftLink, A.leftLink:link
    {
     ...
    }

  6. #6
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies - though it does seem so far that it's a simple conflict that will be unresolved unless I'm able to modify the vB template CSS - and how it is applied - directly. I guess for the moment, underline it is.

    Sincere thanks fot the replies, though.
    Internet Business Forums - free business help & advice

  7. #7
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should have to settle for that, it is simply a matter of understanding how CSS prioritises the selectors and making sure it picks the one you want it too.

    It was late last night but I will have another look at this now that I am awake and I have the cafine levels in my blood streem back to optimal levels

  8. #8
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I've looked, what I said was more or less right. In your styles replace
    Code:
    A.leftLink { 
     BACKGROUND-COLOR: #ffffff; 
     BORDER-BOTTOM: #333333 1px solid; 
     BORDER-LEFT: #ededed 1px solid; 
     BORDER-RIGHT: #999999 1px solid; 
     BORDER-TOP: #ededed 1px solid; display:block; 
     COLOR: #000000; 
     FONT-FAMILY: Arial, Helvetica, sans-serif;
     display:block;
     FONT-SIZE: 9px; PADDING-LEFT: 10px; 
     TEXT-DECORATION: none;
    }
    with
    Code:
    A.leftLink, A.leftLink:link, A.leftLink:visited, A.leftLink:active { 
     BACKGROUND-COLOR: #ffffff; 
     BORDER-BOTTOM: #333333 1px solid; 
     BORDER-LEFT: #ededed 1px solid; 
     BORDER-RIGHT: #999999 1px solid; 
     BORDER-TOP: #ededed 1px solid; display:block; 
     COLOR: #000000; 
     FONT-FAMILY: Arial, Helvetica, sans-serif;
     display:block;
     FONT-SIZE: 9px; PADDING-LEFT: 10px; 
     TEXT-DECORATION: none;
    }
    All that is happening is that the vB styles are taking presidence where you have not supplied the extra pseudo classes for links link, :visited, :active). My change just specifically implements those classes (making them the same as the normal link) so that the vB classes no longer take effect because there is a more specific class available (which is how CSS is meant to work).


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
  •