After setting up my CSS, I noticed a discrepancy in how the background color behaves when hovering over links in the navigation versus links in the footer. While the entire "button" area is filled with the background color in the nav, only the space behind the text is filled in the footer. I'm looking for a solution to ensure that the entire "button" is filled in the footer without relying on classes or images (utilizing HTML5/CSS3 as much as possible). Any ideas on how to resolve this issue?
I have tested this in multiple web browsers and suspect it might be due to the list items being displayed inline, but I haven't been able to find a solution yet.
--- Updated CSS ---
@CHARSET "UTF-8";
* {
margin: 0;
padding: 0;
}
html * {
margin: 0;
/*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}
/* GENERAL */
body {
background: #fff;
color: #333;
font-family: verdana, "MS Trebuchet", arial, helvetica, sans-serif;
font-size: 62.5%;
margin: 0 auto;
width: 960px;
}
header {
background-color: #999;
border: 1px solid #999;
border-radius: 25px;
margin-top: .5em;
}
header h1 {
color: #fff;
font-weight: bold;
font-size: 2.4em;
margin: .8em 0 .3em 0;
text-align: center;
}
nav {
margin: 1em 30em;
padding: .8em 1.2em;
}
nav ul {
padding-left: 1.5em;
list-style: none;
}
nav ul li {
}
nav ul a {
display: block;
text-decoration: none;
}
nav ul li a {
background-color: #FFF;
border: 1px solid #999;
border-radius: 25px;
color: #222;
display: block;
font-size: 1.2em;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
padding: 12px 10px;
text-align: center;
text-decoration: none;
}
nav ul a:hover {
color: #333;
background: #ccc;
}
nav#baseball {
display: none;
}
nav#football {
display: none;
}
footer {
border-top: 1px solid #ccc;
margin-top: .5em;
margin-bottom: 1em;
padding: .8em 1.2em;
}
footer ul {
list-style: none;
text-align: center;
}
footer ul li {
border: 1px solid #999;
border-radius: 25px;
display: inline;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
}
footer ul a {
/* display: block; */
text-decoration: none;
}
footer ul li a {
color: #222;
}
footer ul a:hover {
color: #333;
background: #ccc;
}
--- Updated HTML ---
<header>
<h1>Sports Fan</h1>
</header>
<nav id='sports'>
<ul>
<li><a href="about-temp.html">Baseball</a>
</li>
<li><a href="blog-temp.html">Basketball</a>
</li>
<li><a href="consulting-clinic-temp.html">Football</a>
</li>
<li><a href="contact.html">Hockey</a>
</li>
<li><a href="contact.html">Soccer</a>
</li>
</ul>
</nav>
<nav id='baseball'>
<ul>
<li><a href="homerun.html">Homerun</a>
</li>
<li><a href="bighit.html">Big Hit</a>
</li>
<li><a href="doubleplay.html">Double Play</a>
</li>
<li><a href="doubleplay.html">Bad Call</a>
</li>
</ul>
</nav>
<nav id='football'>
<ul>
<li><a href="about-temp.html">Touchdown</a>
</li>
<li><a href="blog-temp.html">Big Play</a>
</li>
<li><a href="consulting-clinic-temp.html">Sack</a>
</li>
<li><a href="contact.html">Interception</a>
</li>
<li><a href="contact.html">Bad Call</a>
</li>
</ul>
</nav>
<footer>
<ul>
<li><a href="choose.html">Choose</a>
</li>
<li><a href="manage.html">Manage</a>
</li>
<li><a href="about.html">About</a>
</li>
</ul>
</footer>