Hi, I've specified image rollovers on my top navigation at this location: http://simongander.co.uk/portfolio.html The rollover images are the same size as the original link images, but the rollovers are knocked down by 10 or so pixels. I'm not entirely sure why this is, and was hoping someone here can point me in the right direction. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/> <html xmlns="http://www.w3.org/1999/xhtml"/> <html> <head> <title>Simon Gander | Web & Graphic Designer</title> <link href="portfolio.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"> <div class="navContainer"> <a href="info.html" class="info"><img src="images/Navigation_05.png" height="21" width="79" class="navImg" /></a><a href="portfolio.html" class="portfolio"><img src="images/Navigation_06.png" class="navImg" height="21" width="106" /></a><a href="contact.html" class="contact"><img src="images/Navigation_07.png" class="navImg" height="21" width="89"/></a> </div> </div> <div id="container"> <div id="titleContainer"> </div> <div class="left"> <a href="portfolio_maulin.html"><img src="images/Maulin_Small.png" alt="Web Design Image 1" class="image"/></a> <img src="images/Cadbury_Small.png" alt="Web Design Image 2" class="image"/> <a href="portfolio_database.html"><img src="images/Directory_Small.png" alt="Web Design Image 3" class="image"/></a> </div> <div class="right"> <a href="portfolio_reinvention.html"><img src="images/Reinvention_Small.png" alt="Miscellaneous Image 1" class="image"/></a> </div> <div class="middle"> <a href="portfolio_slimes.html"><img src="images/Ernie_Small.png" alt="Web Graphics Image 1" class="image"/></a> <img src="images/Bobby_Small.png" alt="Web Graphics Image 2" class="image"/> </div> </div> </body> </html> Code (markup): CSS @charset "UTF-8"; /* CSS Document */ *{ padding: 0; margin: 0; border: 0; } body{ background-color:#E8E7E7; } a{ outline:none; } #header{ width:850px; height:136px; margin:0px auto 0px auto; background-image:url(images/Header_Background_02.png); } .navContainer{ width:280px; height:21px; margin:0px 0px 0px 493px; } a.info:hover{ background-image:url(images/Info_Rollover.png); background-repeat:no-repeat; } a.portfolio:hover{ background-image:url(images/Portfolio_Rollover.png); } a.contact:hover{ background-image:url(images/Contact_Rollover.png); } .navImg{ margin:31px 0px 0px 0px; padding:0px; } #container{ width:748px; height:625px; margin:0 auto 0 auto; background-color:#FFFFFF; border-left:1px solid #00CC00; border-right:1px solId #00CC00; background-image:url(images/Content_Background_06.png); background-repeat:no-repeat; } #titleContainer{ width:748px; height:42px; background-image:url(images/Title_Graphic_06.png); } .image{ margin:12px 0px 0px 12px; border-style:none; } .left{ float:left; margin:0px 0px 0px 14px; width:230px; height:550px; background-color:#F9F9F9; border-style:solid; border-width:1px; border-color:#999999; display:inline; } .middle{ width:230px; height:367px; margin-left:258px; margin-right:258px; background-color:#F9F9F9; border-style:solid; border-width:1px; border-color:#999999; } .right{ float:right; margin:0px 14px 0px 0px; width:230px; height:367px; display:inline; background-color:#F9F9F9; border-style:solid; border-width:1px; border-color:#999999; } Code (markup):
I think part of the problem is that you have extra padding in the rollover images themselves. Try taking out all of the empty space.
a{ outline:none; } is only ever okay if you also do this a.info:hover, a.info:focus { background-image:url(images/Info_Rollover.png); background-repeat:no-repeat; } a.portfolio:hover, a.portfolio:focus { background-image:url(images/Portfolio_Rollover.png); } a.contact:hover, a.contact:focus { background-image:url(images/Contact_Rollover.png); } outline is there for a reason. Also, alt text. You're missing it. If for some reason your image doesn't load, you get a mystery-meat menu. How do we know what to click on? alt text. Anyway, usually when we do this sort of thing we make the anchors into blocks, so we can set a height and width on them. <ul class="navContainer"> <li><a href="info.html" class="info"><img src="images/transparent.gif" height="21" width="79" [b]alt="Info"[/b] /></a></li> <li><a href="portfolio.html" class="port"><img src="images/transparent.gif" height="21" width="106" [b]alt="Portfolio"[/b] /></a></li> <li><a href="contact.html" class="contact"><img src="images/transparent.gif" height="21" width="89" [b]alt="Contact"[/b] /></a></li> </ul> Code (markup): .navContainer a { float: left; /*makes it a block too*/ width: 79px; height: 21px; background: #color url(somedefaultimage) 0 0 no-repeat; } .navContainer a.info { background-image: the one you want for info (unless this was your default image : ) } .navContainer a.info:hover, .navContainer a.info:focus { background-image: the new one; } .navContainer a.port { width: 106px; background-image: the one you want for portfolio; } .navContainer a.port:hover, .navContainer a.port:focus { background-image: the new one; } .navContainer a.contact { width: 89px; background-image: the one you want for contact; } .navContainer a.contact:hover, .navContainer a.contact:focus { background-image: the new one; } Code (markup): As an example. Leaving the HTML image in there allows you to have alt text for those who don't get your images. Instead of it showing anything, though, it's just transparent.gif the background images of the a always show then. You could make the background images all into a single image and you just change the coordinates. You could make it that the image shows a background image and disappears on :hover (or gets moved off-screen), revealing the "hover" background image of the anchor. You could make it that the text for the anchor is in the anchor and use Gilder-Levin (and an inner child element such as <span> instead of an <img> inside the <a>) to sit an image right over the anchor text. Many ways, but just make sure everyone can see where the link goes, whether they can see images or not, and get a rollover whether they can use a mouse or not.
Are you referring to the png's themselves? Because they're exactly the same size as the link images. Shouldn't the rollovers overlay the link images perfectly if they're the same size? I've tried specifying zero margin and padding on the rollovers in the css but this doesn't seem to work either. Cheers for the help.