Fix for uneven spacing in horizontal navigation

Question

... and I can't figure out why. I've tried making sure the
padding was the same, but something isn't quite right and I've been
working on it for a couple of hours and still haven't "got it". Can
someone look at the following page and tell me why my "welcome"
button (unlinked) doesn't appear to have the same padding around it
that the others do and how to fix it. I'm also curious how the page
looks to others - I'm seeing it fine on my screen but just checked
it on another computer using Firefox and there appear to be gaps,
the navigation bar doesn't look right, etc.
The page is at
Kolinos
Thanks for any help!!

Answer 1

Hello,
You can change the code for the navigation to this:
<div id="wrapper">
<div id="banner"> <img src="images/home-banner.jpg"
alt="Banner"
width="800" height="150" /></div>
<div id="top_navigation">
<ul>
<li><a href="index.htm"
class="current">Welcome</a></li>
<li><a href="aboutus.html">About
Us</a></li>
<li><a href="family.html">Family &amp;
Friends</a></li>
<li><a href="our_home.html">Our
Home</a></li>
<li><a
href="adventures.html">Adventures</a></li>
<li><a href="contact.html">Contact
Us</a></li>
</ul>
</div>
And then use this CSS:
#top_navigation ul {
background-color: #86614e;
text-align: center;
padding: 5px 0px;
margin: 0px;
color: white;
width: 100%;
font-size:20px;
font-weight:bold;
#top_navigation ul li {
display: inline;
padding: 5px 0px;
#top_navigation ul li a {
text-decoration: none;
padding: 5px 10px;
color:#ffffff;
#top_navigation li a:visited {
color: #CCC;
#top_navigation li a.current:visited {
color: #FFF;
#top_navigation li a:hover {
color: #4a4037;
background-color: #FFFFFF;
#top_navigation li a.current:hover {
color: #FFF;
background-color: #86614e;
Be sure to delete this:
#top_navigation {
width: 800px;
background-color: #86614e;
padding-top: 5px;
padding-bottom: 5px;
The width is controlled by the wrapper, and all the spacing
and color is in
the above CSS.
I hope that helps,
Take care,
Tim
"webmom24" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Thanks for your help. The gap is gone - yeah!
However, the "padding"
> in the
> navigation area still looks off to me - to the left and
right of the
> "welcome"
> on both the index page and the about us page. It's not
the same as the
> padding
> around the "linked" buttons. Also, while the padding at
the top and bottom
> of
> the navigation area look fine in IE, the bottom padding
is off on FF - so
> that
> when you hover over, the white background doesn't fill
up the space of the
> navigation area. Looks fine (to me anyway) on IE.
>
> Thanks again :)
>
> Maureen
>