Full CSS Horizontal Menu - Extra space in IE

outshine81

02-23-2009, 07:54 PM

Hello everyone,

I'm finally getting into tableless CSS layouts, and I'm working on my first full CSS menu. One of the huge headaches has been browser compatibility. I'm aiming to have this function correctly on all browser/platform combinations, but I keep running into issues where something will be 1 pixel off in IE, and when I correct it in IE its 1 pixel off in Firefox, etc. Is that normal? Is it common to have several differents stylesheets for various browsers, or do I just need to write better CSS?

Case in point, I have a horizontal menu with a "search" text input that is working great in Firefox, but there is a 2 pixel space under each menu item in IE:

http://www.outshinehosting.com/ee/menu_search.html

I can get rid of the 2 pixel space by setting a fixed height in #navcontainer ul, but that starts to create problems in Firefox. Am I taking the wrong approach to building this menu, or is there just something simple I'm missing?

My markup below:

<!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>CSS Menu</title>

<style>

html,body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}

#navcontainer ul
{
background-color: #2378ad;
padding: 5px 0;
margin: 0;
list-style-type: none;
color: #FFF;
width: 100%;
text-align: center;
}

li {
display: inline;
padding: 4px 0;
border-right: 1px solid #006192;
border-left: 1px solid #3a91ca;
}

li a
{
text-decoration: none;
color: #FFF;
padding: 5px 12px 5px 13px;
font-weight: bold;
}

li a:hover
{
background-color: #7ccbf3;
color: #00689c;
}

li a.current
{
background-color: #ffcd64;
color: #00689c;
padding: 5px 12px 5px 13px;
font-weight: bold;
}

li.left {
border-left: 0px;
}

li.right {
border-right: 0px;
}

li.search{
border-right: 0px;
border-left: 0px;
padding-right: 60px;
width: 137px;
height: 18px;
background-image: url(http://www.outshinehosting.com/ee/images/searchbox_bg.png);
background-repeat: no-repeat;
background-position: left center;
}

.searchbox{
border: 0px;
color: #777777;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
font: 12px Arial, Helvetica, sans-serif;
background: none;
}

</style>

</head>

<body>

<br><br>

<form>

<div id="navcontainer">
<ul id="navlist"><li class="search"><input type="text" class="searchbox" value="Search" name="search" /></li><li class="left"><a href="#">Option 1</a></li><li ><a href="#" class="current">Option 2</a></li><li ><a href="#">Option 3</a></li><li ><a href="#" >Option 4</a></li><li><a href="#">Option 5</a></li><li class="right"><a href="#">Option 6</a></li></ul>
</div>

</form>

<br><br>

</body>
</html>

Thanks to anyone who is willing to help this CSS newbie! I'm trying hard not to use any tables, but all these browser compatibility issues are making it difficult! ;)

Excavator

02-23-2009, 09:24 PM

Hello outshine81,
I've never tried to put a form in the ul like that. If you could float your form to one side the menu is easy to fix. It would probably need to be in a fixed width container to work that way though and your demo isn't.
This works, until you put the form back in...
<!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>CSS Menu</title>
<style type="text/css">
html,body {
font: 12px Arial, Helvetica, sans-serif;
background: #ccc;
}
* {
margin: 0px;
padding: 0px;
border: none;
}
#navcontainer {
margin: 50px 0;
}
ul#navlist {
height: 25px;
background: #2378ad;
text-align: center;
}
li {
display: inline;
border-right: 1px solid #006192;
border-left: 1px solid #3a91ca;
}
li a {
height: 25px;
line-height: 25px;
padding: 5px 12px 5px 13px;
text-decoration: none;
font-weight: bold;
}
li a:hover {
background: #7ccbf3;
color: #00689c;
}
li a.current {
background: #ffcd64;
color: #00689c;
}
.left {
border-left: none;
}
.right {
border-right: none;
}
.search {
width: 137px;
padding-right: 60px;
border: none;
background: url(http://www.outshinehosting.com/ee/images/searchbox_bg.png) no-repeat left center;
}
.searchbox {
color: #777777;
padding-left: 20px;
background: none;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li class="left"><a href="#">Option 1</a></li>
<li ><a href="#" class="current">Option 2</a></li>
<li ><a href="#">Option 3</a></li>
<li ><a href="#" >Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li class="right"><a href="#">Option 6</a></li>
</ul>
</div>
<li class="search"><input type="text" class="searchbox" value="Search" name="search" /></li>
</body>
</html>

outshine81

02-23-2009, 09:30 PM

Hi Excavator, thanks for the reply!

I ended up getting the menu working by using a little CSS hack I found online. I'm placing # in front of class properties that I only want IE to read, so I changed #navcontainer ul to:

#navcontainer ul
{
background-color: #2378ad;
padding: 5px 0;
#padding: 3px 0;
margin: 0;
list-style-type: none;
color: #FFF;
width: 100%;
text-align: center;
}

And that did the trick. I'd rather not use hacks like that, but at this point I just need to get it working! Thanks for taking the time to reply.