Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] How to get <a> to Accept Width

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #26916

    Hi everyone,

    I’m having the hardest time with this and I’m wondering if I’ve already got the solution but it may not work. I’ve got a CSS driven menu on this site:

    http://www.citruscreativestudio.com/tes … /adobevet/

    Basically, I have a background image for the menu <a> and then a rollover image on the :hover.

    Code:
    #menu ul {
    padding:30px 0 10px 0;
    margin:0;
    }

    #menu li {
    margin:5px 0px 5px 0;
    padding:0;
    }

    #menu li a {
    padding:9px 0px 0 40px;
    background-image: url(‘images/menu.jpg’);
    background-repeat: no-repeat;
    font-family:helvetica;
    font-size:18px;
    color:#fff;
    line-height:30px;

    }

    #menu li a:hover {
    background-image: url(‘images/menu_hover.jpg’);
    background-repeat: no-repeat;
    font-family:helvetica;
    font-size:18px;
    color:#fff;
    text-decoration:none;
    }

    But as you can see, the image gets cut off where the text is ends. The only way I was able to successfully make the image go all the way to the right was to add padding. But as the links are different sizes, that creates problems with the longer items. I tried using a width property on the li, ul and a’s themselves and it had no affect.

    I originally tried to use sprites, but the same problem was occurring; the width just wouldn’t go the full length of the background image. Honestly, I’m not all that good with sprites so maybe I was doing it wrong :)

    Can someone point me in the right direction? Thanks!

    p.s. I know, I know… I tried to argue against using papyrus for the main heading as well :P

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.