SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Hover causes img to shift over

    Hello.

    I'm trying to do a disjointed CSS rollover. I think that's what it's called.
    The page is at Irish Kerns -- Mercenaries

    The problem is in Explorer.
    When I hover over the links toward the bottom, "Scotland" & "Ireland", the rollover image shifts a pixel or 2 leaving a red "border" around it.
    The a:hover color is red.

    Anyway, the page displays fine in Firefox.

    Here's the CSS for that part of the page:

    Code:
    /********************* Merc Pages **********************/
    
    
    #info { display: block; }
    span { display:none; }	
    
    ul#info { width: 600px; height margin: 0 0 0 10px; }
    #reg_list { width: 200px; }
    #reg_list a { display: block; 
                  font: normal normal 1.4em/.7em Arial, Helvetica, sans-serif;
    			  background-color:#FFFFFF;
    			  color: #000; 
    			  width: 175px; 
    			  padding: 10px;
    			  }
    #reg_list a:hover { color: #FF0000; }
    
    #map {
    	width:411px;
    	height:250px;
    	
        margin: 0 0 0 200px;
    	background-image: url(../Mercs/images/regions/world.jpg) }
    
    
    #reg_list { float: left;  }
    
    
    #reg_list a:hover span  {
        visibility: visible;
    	display:block;
    	position:absolute;
    	left:379px;
    	top:411px;
    	width:411px;
    	height:250px;
    	min-height: 0;
    	 }
    
    #reg_list h3 { padding-left: 10px; margin: 0; }

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm using Firefox and I get a red border.

    http://stommepoes.nl/redborder.png

    You never removed the default border of images in your stylesheets for those images... and when they're in an anchor, they'll take the colour of the anchor for their border colour.

    I use this near the top of my stylesheets, because I almost never want borders on my images:

    img {
    vertical-align: bottom; /*to remove gap under images if left inline*/
    border: 0;
    }

    the border: 0 part.

    A tip on rollovers:

    don't set major layout thingies on the pseudo-class state. Set everything you need at the beginning (and pull the image off-screen instead of diplay: none/block with a -9999px or something), and change only the position on :hover/:focus (and yeah, you've got anchors already, so let keyboard users get some goodness with :focus).

    IE6 might give you some surprises : )

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stomme poes.
    I added that code and it looks like it's working, at least on my end.

    I looked at it on another computer last night and it was something totally different than what I had on my machine.
    Why is this? What do I need to do to make it uniform?
    And could you elaborate on what you mean by "setting everything I need at the beginning"?
    I changed the span { display: none; } to span { display:block; position: absolute; left: -9999em; }. Looks good, but now there's a "bump" when I hover over one of the links.


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
  •