SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    U S
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a DIV a link

    Okay, so I got a link to work like a div by formatting it in CSS to look like a DIV. What I'm trying to do is make an entire div a link, so I made a link appear as a DIV, because I don't think you can make a div act as a link. I got it to work right in IE, but not Firefox. The problem it has in Firefox is that it doesn't stretch 100%. Only absolute widths seem to work. Here's an example of the code:

    Code:
    #areasechead a {text-decoration: none; font-weight: bold; width: 100%; text-align: center; margin: 0; padding: 2px;}
    #areasechead a:hover {text-decoration: none; font-weight: bold; color: white; width: 100%; text-align: center; margin: 0; background-color: #88a688;}

  2. #2
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is what you mean

    a.areasechead{
    text-decoration: none;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 2px;
    display:block;
    background-color:black;
    }

    a.areasechead:hover {
    text-decoration: none;
    font-weight: bold;
    color: white;
    width: 100%;
    text-align: center;
    margin: 0;
    background-color: #88a688;
    }

    <a href=".htm" class="areasechead">This is a link</a>

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yep, IE incorrectly allows you to assign a width on inline elements like links and spans. To get it working properly across all browsers you have to change the link's display value to "block", as mumford1 said.


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
  •