SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: IE & CSS

  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE & CSS

    I just finished designing the skin for my site Blogcrowds, I use hover to on the forum description & last post to create the following effect



    in Firefox the background color changes and the text darkens. I know that IE does not support hover outside links but I have seen forums with this effect. So my question is how is this done? but if it means javascript or links with huge paddings I think I will pass.

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2006
    Location
    Halifax, Canada
    Posts
    498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make the entire content of the <td> a link. Something like this:

    HTML Code:
    ...
    <td>
    <a class="forumlink">
    <span class="forumlinkname">Mingle</span>
    <span class="forumlinkdesc">Open forum for any &amp; all topics that do not fit elsewhere</span>
    </a>
    </td>
    ...
    The link needs to be set to display: block.

    Code:
    a.forumlink {display: block; width: 100%; height: 100%; text-decoration: none; background-color: #e6f7ff}
    a.forumlink:hover {background-color: #ddf3fe}
    /* You also need to style the inner text (formlinkname and forumlinkdesc) here */
    Paul Butler.org
    JSSpamBlock - Reduce WordPress spam.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See if this works for you:
    Whatever:hover

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a decent example of implementing :hover in IE using behaviors

    http://4umi.com/web/css/hover.htm

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paulgb
    You need to make the entire content of the <td> a link. Something like this:

    HTML Code:
    ...
    <td>
    <a class="forumlink">
    <span class="forumlinkname">Mingle</span>
    <span class="forumlinkdesc">Open forum for any &amp; all topics that do not fit elsewhere</span>
    </a>
    </td>
    ...
    The link needs to be set to display: block.

    Code:
    a.forumlink {display: block; width: 100%; height: 100%; text-decoration: none; background-color: #e6f7ff}
    a.forumlink:hover {background-color: #ddf3fe}
    /* You also need to style the inner text (formlinkname and forumlinkdesc) here */
    Haven't tried this yet but nice, width:100% height 100% so the link fills the entire td, may have some issue styling individual text but good enough (otherwise I will probably have to use javascript).

    Thanks everyone


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
  •