Need some CSS help | INFJ Forum

Need some CSS help

Discussion in 'Computer Science' started by Alkali Regnant, Nov 16, 2009.

Share This Page

Watchers:
This thread is being watched by 1 user.
More threads by Alkali Regnant
  1. Alkali Regnant

    Alkali Regnant Regular Poster

    Joined:
    Sep 28, 2009
    Threads:
    8
    Messages:
    74
    Likes Received:
    4
    Trophy Points:
    0
    MBTI:
    INFJ
    I can't believe I'm having this problem when I've done this so many times before but I can't find out what's going wrong.

    I have some links that I need to have a background image show up when you hover over them. However only the top part of background image is showing. I've messed with the margins and padding and the only thing that works slightly is if I set the background-position to left (you see half of the image)

    background-image:url(pics/navHover.png);
    background-repeat:no-repeat;
    width:101;
    height:62;

    That is what I'm working with in the css. Can anyone help?
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  2. Sithious

    Sithious Well-known member

    Joined:
    Jun 13, 2009
    Threads:
    39
    Messages:
    1,663
    Likes Received:
    144
    Trophy Points:
    0
    MBTI:
    INFJ
    Buy deagle AWP combo and camp
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  3. OP
    Alkali Regnant

    Alkali Regnant Regular Poster

    Joined:
    Sep 28, 2009
    Threads:
    8
    Messages:
    74
    Likes Received:
    4
    Trophy Points:
    0
    MBTI:
    INFJ
    Eh?
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  4. NeverAmI

    NeverAmI Satisclassifaction
    Retired Staff

    Joined:
    Sep 22, 2009
    Threads:
    197
    Messages:
    8,792
    Featured Threads:
    1
    Likes Received:
    949
    Trophy Points:
    0
    MBTI:
    INFP
    Enneagram:
    5w4
    I am guessing an underlying div is conflicting. Do you have more code you can paste? such as the bar the button belongs to, the css of those as well.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  5. OP
    Alkali Regnant

    Alkali Regnant Regular Poster

    Joined:
    Sep 28, 2009
    Threads:
    8
    Messages:
    74
    Likes Received:
    4
    Trophy Points:
    0
    MBTI:
    INFJ
    Sure

    Code:
    <style type="text/css">
    a:link, a:visted{
    background-image:url(pics/navLink.png);
    background-repeat:no-repeat;
    padding:0px 0px 0px 0px;
    width:101;
    height:62;
    }
    a:active{
    background-image:url(pics/navActive.png);
    background-repeat:no-repeat;
    width:101;
    height:62;
    }
    a:hover{
    background-image:url(pics/navHover.png);
    background-repeat:no-repeat;
    width:101;
    height:62;
    }
    </style>
    </head>
    
    <body>
    <a href="url"><img src="pics/navWelcome.png" width="101" height="62" border="0" alt="Welcome" /></a>
    <a href="url"><img src="pics/navStaffAndContacts.png" width="160" height="62" border="0" alt="Staff and Contacts" /></a>
    <a href="url"><img src="pics/navPreviousEditions.png" width="141" height="62" border="0" alt="Previous Editions" /></a>
    
    
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  6. Zero Angel

    Zero Angel Permanent Fixture

    Joined:
    Dec 2, 2008
    Threads:
    19
    Messages:
    958
    Likes Received:
    66
    Trophy Points:
    0
    MBTI:
    INFJ
    Enneagram:
    Possibly 4w5
    Well, if the images that the <a> tags are enclosing is bigger than the problem that you are having will tend to appear. Although everything looks normal, and this problem should not be appearing. The first thing you could try is to set the <!doctype>, maybe to something like HTML 4.0 Strict (which is what I always use) since sloppily written code tends to break noticably on the strict doctype, allowing you to write code which is more compatible with more browsers.

    Try this CSS code and see if it helps anything.

    You can use a better CSS setup by doing contextual selectors, in addition you can group common attributes
    Code:
    .nav a,.nav a:visited { 
       height: 62px; 
       width: 101px; 
       background-image: url('pics/navLink.png');
       background-repeat: no-repeat;
       background-align: top left;
    }
    .nav a:active {
     background-image: url('pics/navActive.png');
    }
    .nav a:hover {
     background-image: url('pics/navHover.png');
    }
    Code:
    <div class="nav">
    <a href="#">Nav1</a>
    <a href="#">Nav2</a>
    <a href="#">Nav3</a>
    </div>
    If that fails, also try eliminating the "height" and "width" values from the "a" part of your CSS. This will allow the anchor tags to automatically size according to whatever they're enclosing (which is what you would normally want).

    You could also try to reset the CSS properties for all images by doing something like this
    Code:
    img { border-width: 0px; margin: 0px; padding: 0px; }
    If things get wonky, remove the CSS attributes until its unwonky.

    Another thing, I tend to prefer to write CSS backgrounds in shorthand, something like this:
    Code:
    background: #cccccc url('images/whatever.jpg') top left repeat-x;
    Another convenient shortcut is
    Code:
    border: solid #000 1px 1px 1px 5px;
    It's more convenient for one-off things.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    #6 Zero Angel, Nov 17, 2009
    Last edited: Nov 17, 2009
Loading...

Share This Page