SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Trouble with Inline & Block Elements with W3C CSS Buttons

    Hello,

    I'm working on the site of a friend, and he wants the navbar to have little W3C CSS rollover buttons. The buttons need to be 100 pixels wide, but the anchor element doesn't have a width property, since it's an inline element. Thus, I put the links inside divisions, and set the width property there.

    Now, divisions don't have a hover pseudo-class, and so the links have to do the rollover. But since the links don't fill the entire box, only the text lights up, and not the whole box.

    Help...

    Compuwhiz7

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Use this CSS with your divs and images:
    Code:
    div a {
      display: block;
    }
    This should make the <a> tag take up as much of the <div>'s space as possible .

    Edit:

    And <div>s DO have a :hover pseudo-class; it's just that IE/Windows doesn't implement them

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks!

    Hello,

    Thanks bunches, Vinnie! Your suggestion worked like a charm. Rep given.

    Edit:


    Quote Originally Posted by VBulletin Error
    You must spread some reputation around before giving it to VGarcia again.
    Don't let it go to your head, Vinnie.


    Compuwhiz7


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
  •