Forums

brianatlarge

Website: http://studentseatfree.com/brian/

As you can see, when you mouse over the rollover button, it flashes on and off. Using firebug I can see that the <a> element is not the same size as the image. I've tried to remedy this by setting the font-size for the <a> element to the same height as the image, but this didn't work.

Thoughts?

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\" xml:lang=\"en\" lang=\"en\">
<head>
	<title>Students Eat Free - Exclusive Discounts</title>
	<meta http-equiv=\"Content-type\" content=\"text/html; charset=UTF-8\"/>
	<link rel=\"stylesheet\" href=\"sef_style.css\" type=\"text/css\" media=\"screen\"/>
	<link rel=\"icon\" href=\"favicon.ico\" type=\"image/x-icon\"/>
</head>
<body>
	<div id=\"topbar\"></div>
	<div id=\"content\">
		<img id=\"logo\" src=\"images/sef_logo.jpg\" alt=\"logo\"/>
		<a href=\"\">
			<img id=\"leaderboard\" src=\"images/leaderboard.jpg\" alt=\"leaderboard\"/>
		</a>
		<div style=\"clear:both\"></div>
			<div id=\"navbar\">
				<a href=\"\">
					<img id=\"exclusive_button\" src=\"images/exclusive_button-over.jpg\" alt=\"\"/>
				</a>
				<a href=\"\">
					<img id=\"regular_button\" src=\"images/regular_button-over.jpg\" alt=\"\"/>
				</a>
				<a href=\"\">
					<img id=\"advertise_button\" src=\"images/advertise_button-over.jpg\" alt=\"\"/>
				</a>
				<a href=\"\">
					<img id=\"contact_button\" src=\"images/contact_button-over.jpg\" alt=\"\"/>
				</a>
			</div>
		</div>
	</body>
</html>

CSS:

* { margin: 0; padding: 0; }

#content {margin:0 auto; width:1000px;}
#topbar {background-image: url(images/top_green.jpg); background-repeat:repeat-x; min-height:74px; height:74px;}

#logo {float:left; display:inline;}
#leaderboard {margin-top:25px;}

/*Navigation Bar*/

#navbar {background-image: url(images/navbar.jpg) ; background-repeat:no-repeat; min-height:32px; height:34px; width:767px;}

#exclusive_button {width:166px; height:34px; min-height:34px; display:inline;}
#exclusive_button:hover {visibility:hidden;}

#regular_button {width:156px; height:34px; min-height:34px; display:inline; position:relative; left:30px;}
#regular_button:hover {visibility:hidden;}

#advertise_button {width:107px; height:34px; min-height:34px; display:inline; position:relative; left:45px;}
#advertise_button:hover {visibility:hidden;}

#contact_button {width:128px; height:34px; min-height:34px; display:inline; position:relative; left:56px;}
#contact_button:hover {visibility:hidden;}

/*End Navigation Bar*/

img {border:0}

Thanks!

box

in the name of accessibility and web standards, you ought to use image replacement for your menu links and not inline images. The navbar would be more semantically aware if it was an unordered list, whose <li> elements were floated. With background images placed on you <a> elements in your css and declaring them as block elements you will avoid the flashing problem. Be sure to declare also the width and height of the <a> elements to match that of the background imagery.
If you are unsure, then any tutorial on CSS menus should point you in the right direction.

treehouse : what would you like to learn today?

Forums

Rollover buttons are spazzing out!