SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Non-Member esllou's Avatar
    Join Date
    Apr 2004
    Location
    small tropical isle
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border-top on hover not showing on IE

    is this a known bug?

    #horiz-nav ul li a{
    background-color:#FFB00F;
    padding:2px;
    color:white;
    font-weight:bold;
    text-decoration:none;
    letter-spacing:0.1em;
    border:1px solid white;
    }

    #horiz-nav ul li a:hover{
    background-color:white;
    color:#000;
    border-top:1px solid red;
    }

    red top border showing as expected in FF but nothing at all in IE. I have heightened the division to "give it room to show" and that isn't the issue.

    when I put border:1px solid red; for a:hover, FF shows a neat red box on hover whereas IE shows three out of four borders but NOT the top one!!

    What could be the problem??

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code looks fine, except it's better to use hex colors than the named ones.

    Please show us the HTML and rest of the CSS used in that list.
    Last edited by Kravvitz; Mar 26, 2005 at 13:25. Reason: typo
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Non-Member esllou's Avatar
    Join Date
    Apr 2004
    Location
    small tropical isle
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the html:

    http://www.dailypast.com/test/test.shtml

    and the css

    http://www.dailypast.com/test/style.css

    now, I have it set up for four borders and only three showing in ie...all but the top.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know why but adding position:relative seems to fix it.

    Code:
    #horiz-nav ul li a{
    position: relative;
    background-color:#FFB00F;
    padding:2px;
    color:white;
    font-weight:bold;
    text-decoration:none;
    letter-spacing:0.1em;
    border:1px solid #ffffff;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    Non-Member esllou's Avatar
    Join Date
    Apr 2004
    Location
    small tropical isle
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks kravitz....anyone have any idea what's going on here?

  6. #6
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your horizontal navbar is haunted by the ghost of IE 5.5 Lol

  7. #7
    Non-Member esllou's Avatar
    Join Date
    Apr 2004
    Location
    small tropical isle
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, I think so!!

    DT...any idea what would make a top border not show up in ie?? odd in the extreme!

  8. #8
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by esllou
    yep, I think so!!

    DT...any idea what would make a top border not show up in ie?? odd in the extreme!
    I'm not sure why it's doing it.

    At first I thought it was being clipped by a pixel or two by an above div, but then I looked at it in FF's DOM inspector, and noticed it was in a table cell, and the only thing above it is another table cell.

    Maybe it has something to do with the cellspacing?

    Or more likely Valign, which is set to inherit(by default of top I assume), you might try setting it to middle.

    Either that or perform an exercism. Lol

  9. #9
    Non-Member esllou's Avatar
    Join Date
    Apr 2004
    Location
    small tropical isle
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I went through all the "usual suspects" at the beginning....margins, padding, widening the cell, etc

    didn't try vertical-align:middle but will try it now.

    how infuriating......calling the priest as I write.

  10. #10
    Non-Member esllou's Avatar
    Join Date
    Apr 2004
    Location
    small tropical isle
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vertical-align is NOT the issue. Even when I put it onto vertical-align:bottom; the orange boxes went down to the bottom of that cell but I STILL couldn't see the damned top border on a:hover!!

    btw...I think valign="middle" is the default so it was already behaving as if vertical-align:middle was in the stylesheet anyway.

    next???

  11. #11
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #horiz-nav ul li a{position:relative; as I recall someone posted earlier.

    It seems that the table cell won't expand for the top border unless you set it's position to relative.

    I have no idea why, it doesn't recognize it unless the position is set to relative.

    You might find the answer by taking a look at the W3C specs.

    Could be the DOCTYPE, since you're using this one.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    and your code has tables in it, I think you should be using a transitional DOCTYPE.

    Have you ran your code through a validator?

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also try using floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •