Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mouseover/hover 'button' effect wrong size in Netscape

    I'm new to all of this web design, so this may be an easy question. I have the following in a Style Sheet (example is only for one 'button'):

    a#btnme { border: 3px outset white }
    a:hover#btnme { border: 3px inset white}

    And this is the HTML:

    <a id="btnme" href="Me.html"><img title="Click for Biography" alt="Me"
    src="Pictures/Button - Me.jpg" style="border: 0px solid; width: 100px; height: 65px;" align="middle" hspace="15" vspace="5"></a>

    It works fine in IE6 - my 'button' effect is the same size as my image. However, in Netscape (I tested on 7.0), the 'button' is wider than my image, and not as high. It seems to be using some default size, rather than outlining my image. Any suggestions?

    You can actually see the page in question by visiting:
    http://www.drokpa.com

    Thanks.........Brett

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    try:

    a#btnme {
    display: block;
    width: 100px;
    height: 65px;
    border: 3px outset white;
    }

    the "a" tag displays inline by default; NS is outlining the link, not the image. This makes the link the same size as the image. Should work...

    Edit: You'll probably also have to give the image "margin: 0;padding: 0;" for it to line up. That or put the hover effect on the image, not the link (won't work in IE, though)
    Last edited by rmedek; 02-01-2005 at 07:38 AM.

  • #3
    Regular Coder
    Join Date
    Oct 2004
    Location
    In front of this computer. (Where else?)
    Posts
    442
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure, but i thought border properties generally do not render well in netscape ...
    Tomorrow is the first day of the rest of your life... What have you done today?
    Tutorials
    Web: w3schools, htmldog General tips: Hardware, Networking

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This bit:
    Quote Originally Posted by Brett
    a:hover#btnme { border: 3px inset white}
    ...should be this:
    Code:
    a#btnme:hover {border: 3px inset white } /* or 3px inset #fff */
    Rmedek: I can't believe you missed that man!
    Last edited by mindlessLemming; 02-01-2005 at 10:19 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help. The display:block caused me a bit of trouble, as it moved some text I had inline after the pictures, but I was eventually able to get what I wanted.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by mindlessLemming
    This bit:

    ...should be this:
    Code:
    a#btnme:hover {border: 3px inset white } /* or 3px inset #fff */
    Rmedek: I can't believe you missed that man!
    Lol... I just got back from a weekend tour. I'm outta shape


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •