buttons are not centering on the top navigation bar

Hi!

I need the buttons to center on the top navigation bar of this page:
http://www.orlando-web-hosting.net/
The left Home button is apparently being pushed to the right by one of the rules in our style sheet.
Here are section of rules that I believe control the buttons.

ul.dropdown{
position:relative;
list-style-type:none;
margin:0px;
}
ul.dropdown li{
width:115px;
text-align:center;
font-weight:700;
float:left;
}
ul.dropdown a:hover{
color:#FF00FF;
}
ul.dropdown li a{
height:20px;
text-align:center;
display:block;
font:bold 11px verdana, sans-serif;
color:blue;
border-right:1px solid #016494;
text-decoration:none;
padding:4px 6px;
}
ul.dropdown li.last a{
border-right:none;
}
ul.dropdown li.hover,ul.dropdown li:hover{
color:#000000;
position:relative;
}
ul.dropdown ul{
z-index:600;
visibility:hidden;
position:absolute;
top:100%;
left:-16px;
}
ul.dropdown ul li{
width:160px;
height:24px;
font-weight:400;
list-style-type:none;
background:#9FF;
color:#000;
border-bottom:1px solid;
float:none;
}
ul.dropdown ul li a{
border-right:none;
width:100%;
display:inline-block;
padding-top:4px;
color:blue;
}
ul.dropdown ul ul{
left:100%;
top:0;
}
ul.dropdown li:hover > ul{
visibility:visible;
}

Any specific suggestions as to what needs to be fixed would be appreciated.
Also, is there a way to remove the pipe to the right of the last button?
TIA
TrueBlueAsked:
Who is Participating?
 
Tom BeckCommented:
@TrueBlue,

I did not investigate the errors that @HainKurt is describing, but I think I can address the alignment issues with the button bar.

To remove the extra space to the left of the Home button, you will need to overcome the default margins applied by the user agent by changing this css:

ul.dropdown{
position:relative;
list-style-type:none;
margin:0px 0px 0px -40px;
}

To spread out the buttons more evenly, increase their width here:

ul.dropdown li{
width:125px;
text-align:center;
font-weight:700;
float:left;
}

You already have a class defined to remove the right side border on the last button, you only need to add class="last" to the Contact Us button:

<li class="last"><a href="contact-us.asp" title="Contact Us | Orlando Web Hosting LLC">Contact Us</a></li>
0
 
HainKurtSr. System AnalystCommented:
>>>>> Internet Explorer cannot display the webpage
0
 
TrueBlueAuthor Commented:
HainKurt,

It displays fine for me when using IE8 or FF.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
HainKurtSr. System AnalystCommented:
FF

Content Encoding Error

The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.
0
 
HainKurtSr. System AnalystCommented:
did you find a new compression algorithm! and using on your server and on your pc?
0
 
TrueBlueAuthor Commented:
TommyBoy,
The fixed all of my issues :)

Hainkurt,
What version of FF are you using?
What version of IE are you using?
I do have GZip enabled but it has been for quite a while.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.