Problem with extra padding on rollover of buttons

Dev Shed Forums Sponsor:

September 13th, 2012, 03:37 PM

clevercat

Registered User

Join Date: Sep 2012

Posts: 1

Time spent in forums: 11 m 3 sec
Reputation Power: 0

Problem with extra padding on rollover of buttons

I have been going crazy trying to figure out why there is extra padding showing up on my navigation buttons when I rollover them. It's only showing up to the left and right of them though. Here's a link to the screenshot of what it looks like:

http://i179.photobucket.com/albums/w319/jdauel/Screenshot2012-09-13at25417PM.png

I think it has something to do with my CSS but I have no idea anymore. Please help me??? I tried using Firebug to figure it out with no prevail.

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Farren's Photography</title>
<style type="text/css">
html {
	height: 100%;
	width: 100%;
}
body {
	margin: 0px;
}
#container {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	color: #000;
	background-color: #06F;
	text-align: left;
	padding: 0px;
	height: 650px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/background_image.png);
	background-repeat: no-repeat;
	margin-top: 45px;
}
a:link {
	color: #FFF;
}
a:visited {
	color: #FFF;
}
a:hover {
	color: #FFF;
}
#container #logo {
}
#container #logo #fp-logo {
	background-image: url(images/logo.png);
	height: 137px;
	width: 408px;
	text-indent: -9999px;
	display: block;
}
#logo {
	height: 137px;
	width: 408px;
	position: relative;
	padding-top: 35px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 35px;
}
#main {
	background-color: #FFF;
	min-height: 383px;
	width: 707px;
	position: relative;
	left: 217px;
	top: 16px;
	right: 36px;
	bottom: 113px;
}
#container #navbar {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #FFF;
	text-align: right;
	height: 45px;
	background-color: #CC0000;
	position: relative;
	top: 8px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
#container #navbar ul li a {
	text-decoration: none;
}
#container #navbar ul {
	list-style-type: none;
	padding-top: 16px;
}
#container #navbar ul li {
	display: inline;
	background-color: #280803;
	margin: 0px;
	height: 0px;
	width: 0px;
	position: relative;
	padding-top: 16px;
	padding-right: 15px;
	padding-bottom: 17px;
	padding-left: 15px;
}
#container #navbar ul li a:link {
	text-decoration: none;
	color: #FFF;
}
#container #navbar ul li a:visited {
	text-decoration: none;
	color: #FFF;
}
#container #navbar ul li a:hover {
	text-decoration: none;
	color: #FFF;
	background-color: #027e8e;
	padding-top: 16px;
	padding-right: 15px;
	padding-bottom: 17px;
	padding-left: 15px;
	margin: 0px;
}
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	height: 28px;
	position: relative;
	top: 8px;
	color: #FFF;
	font-style: italic;
}
</style>
</head>

<body>
<div id="container">
 <div id="logo"><a href="http://www.farrensphotography.com" title="Farren's Photography" target="_self" id="fp-logo">Farren's Photography</a></div><!-- end logo -->
 <div id="main">
  <div id="content">
  </div><!-- end content -->
 </div><!-- end main -->
 <div id="navbar">
   <ul>
     <li><a href="index.html" target="_self">Home</a></li>
     <li><a href="portfolio.html" target="_self">Portfolio</a></li>
     <li><a href="mystyle.html" target="_self">My Style</a></li>
     <li><a href="specials.html" target="_self">Specials</a></li>
     <li><a href="pricing.html" target="_self">Pricing</a></li>
     <li><a href="contact.html" target="_self">Contact</a></li>
   </ul>
  </div>
 <!-- end navbar -->
 <div id="footer">
  <div id="copyright">All images copyright© Farrens Photography
  </div><!-- end copyright -->
  <div id="network">Facebook button
  </div><!-- end network -->
 </div><!-- end footer -->
</div><!-- end container -->
</body>
</html>

Problem with extra padding on rollover of buttons

Developer Shed Advertisers and Affiliates