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

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    12

    Problem with CSS hover buttons in NS/Mozilla


    I searched the forum (and several others) but could not find the answer.

    I guess it is best if you look at the test-page I created. You can see the different behaviour in IE vs NS/Mozilla. In IE the buttons are displayed properly, but in NS/Mozilla they are not.
    testpage

    This is the code I use in the style sheet:
    a.button:active, a.button:link, a.button:visited {
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: Black;
    text-decoration: none;
    text-align: center;
    font-weight : normal;
    line-height : 18px;
    width : 123px;
    background-image : url(button.png);
    }
    a.button:hover {
    color: White;
    line-height : 18px;
    width : 123px;
    background-image : url(button_over.png);
    }


    Can anybody tell me if it could be done in NS/Mozilla like it is in IE?

    Thanks
    Duwgati
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you can't set width to a inline element,
    so ns/mozilla are displaying it right
    (another bug in ie )

    use display:block; in the css to be able to
    set a width

    Code:
    a.button:active, a.button:link, a.button:visited {
    	display:block;
    	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	color: Black;
    	text-decoration: none;
    	text-align: center;
    	font-weight : normal;
    	line-height : 18px;
    	width : 123px;
    	background-image : url(button.png);
    }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    12
    Thanks a lot Akh,
    although it's a damn shame if you ask me. I would rather call that a feature instead of a bug

    But your solution works just fine, except that it does solve the display problem, but introduces a new problem at the same time.

    I want the buttons lined up with no more than 2px space between them, because that's all the space I have for them. So how do I do that with the block attribute?
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    lined up horisontal or vertical?

    i recon you have removed the <br> tags?

    you can use float:left to get the one one line.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    12
    Oops, "float : left" ..... should have thought of that myself.
    Anyway, your help was invaluable.
    Thanks so much.

IMN logo majestic logo threadwatch logo seochat tools logo