#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Posts
    13
    Rep Power
    0

    Looks fine in IE but not in FireFox/Netscape


    I have the following CSS:


    #main_navmenu{
    padding-top:10px;
    width:120px;
    height:80%;
    float:left;
    margin-left:7px;

    font-size:11pt;
    text-align:center;
    padding-right:10px;

    }

    #main_navmenu a:link{
    color:#777777;
    width:100px;
    background-color:#FDF4EE;
    text-decoration:none;
    font-weight:bold;
    border:1px solid #663333;
    margin-top:2px
    }
    #main_navmenu a:visited{
    color:#777777;
    width:100px;
    background-color:#FDF4EE;
    text-decoration:none;
    font-weight:bold;
    border:1px solid #663333;
    }
    #main_navmenu a:hover{
    color:#000000;
    width:100px;
    background-color:#DDD4CE;
    text-decoration:none;
    font-weight:bold;
    border:1px solid #663333;
    }


    why in IE do the link buttons look fine, with a width of 100px, and a nice gap between them. In FireFox, there is no gap between the buttons, and each button is only as wide as the text inside it.

    Thanks in advance for any help
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Inline elements, such as 'a' may not have dimensions. IE wrongly applies width to the anchor element. Firefox is rendering correctly.

    If the anchors are part of a list item (not li {display: inline;}) or part of a floated list item, you may make the anchor {display: block;}. In that case you may apply width.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Posts
    13
    Rep Power
    0
    Ok I have made some changes to the CSS and HTML:

    #but{
    width:100px;
    background-color:#FDF4EE;
    border:1px solid #663333;
    list-style-type:none;
    margin-top:2px;
    text-decoration:none;
    cursor:hand;
    }

    #but:hover{
    width:100px;
    background-color:#DDD4CE;
    text-decoration:none;
    font-weight:bold;
    border:1px solid #663333;
    }

    <a href="link"><li id="but">link</li></a>

    It now works fine in Firefox, but in IE the hover doesn't work. I had to add the cursor:hand; to the CSS just to show to the user that it is a link. When clicked the link works fine, so why no hand or color change on hover?

    Thanks in advance
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    IE only supports :hover on <a> elements.

    <li> elements should only be the children of <ul> and <ol> elements.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Put the anchor in the list item. If you have a menu or navigation bar/column, that is semantically a list of links. I haven't looked it up, but I seriously doubt that an 'a' can be parent to li.

    IE does not recognize :hover on anything but 'a'.

    If you're doing a horizontal menu (inferred), it should be something like this;
    Code:
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        }
    
    li {
        width: 100px;
        margin: 0 5px;
        float: left;
        text-align: center;
        }
    
    a {
        display: block;
        color: white;
        text-decoration: none;
        background-color: #633;
        border: 1px solid #300;
        }
    
    a:hover {
        background-color: #966;
        }
    -----------------
    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
    </ul>
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo