CSS list menu; extra padding on rollover of buttons
Posted
by
user1669878
on Stack Overflow
See other posts from Stack Overflow
or by user1669878
Published on 2012-09-13T21:30:38Z
Indexed on
2012/09/13
21:38 UTC
Read the original article
Hit count: 144
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:
<!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>
© Stack Overflow or respective owner
