• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1428
  • Last Modified:

CSS Menu - Extra space in Firefox & Safari

This is related to my previous question, but is a new issue. Now it's the other browser's turn!

I implemented the previous non-breaking space solution, which made the empty div borders appear in IE, but now I have extra space in Firefox and Safari only. Looks great in Internet Explorer, here it is:

http://www.outshinehosting.com/form/menu_test.html

After implementing the previous solution there was a 6px space in IE and a 9px space in Firefox & Safari, which resulted from the non-breaking space. I added margin-right: -3px and margin-left: -3px to the respective empty div classes (div1, div2) which pulled the space together in Internet Explorer, but has kept a 3px space in Firefox and Safari. Of course, if I add an additional -3px to the margin for Firefox and Safari, it is too much in IE.

Does anyone have thoughts on this? I'm pretty new to CSS and kind of learning as I go. 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; }
 
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;
}
 
.div1{
border-right: 1px solid #006192;
display: inline;
padding: 5px 0;
margin-left: -3px;
}
 
.div2{
border-left: 1px solid #3a91ca;
display: inline;
padding: 5px 0;
margin-right: -3px;
}
 
</style>
 
</head>
 
<body>
 
 
<br><br>
 
<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#">Item one</a></li><div class="div1"> </div><div class="div2"> </div>
        <li><a href="#" class="current">Item two</a></li><div class="div1"> </div><div class="div2"> </div>
        <li><a href="#">Item three</a></li><div class="div1"> </div><div class="div2"> </div>
        <li><a href="#">Item four</a></li><div class="div1"> </div><div class="div2"> </div>
        <li><a href="#">Item five</a></li>
 
    </ul>
</div>
 
<br><br>
 
</body>
</html>

Open in new window

0
Spiderstave
Asked:
Spiderstave
  • 4
1 Solution
 
David S.Commented:
A <div> may not be a (direct) child of a <ul>.  Why can't you apply borders directly to the <li>s and <a>s? If it's because they have display:inline, there are other ways to make a centered menu.

Here's one: http://www.dynamicsitesolutions.com/css/example-menus/4/
0
 
quincydudeCommented:
try this, remember you have to change the background color of the <li> not <a>
<!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; }
 
li a
{
text-decoration: none;
color: #FFF;
padding: 5px 12px 5px 13px;
font-weight: bold;
}
 
li a:hover, .selected
{
background-color: #7ccbf3;
color: #00689c;
}
 
li a.current
{
background-color: #ffcd64;
color: #00689c;
padding: 5px 12px 5px 13px;
font-weight: bold;
}
 
li {
border-right: 1px solid #006192;
border-left: 1px solid #3a91ca;
padding-right: 0px;
padding-left: 0px;
}
 
.div2{
 
display: inline;
padding: 5px 0;
margin-right: -3px;
}
 
</style> 
 
</head> 
 
<body> 
 
 
<br><br> 
 
<div id="navcontainer"> 
    <ul id="navlist"> 
        <li onmouseover="this.className='selected'" onmouseout="this.className=''"><a href="#">Item one</a></li>
        <li onmouseover="this.className='selected'" onmouseout="this.className=''"><a href="#" class="current">Item two</a></li>
        <li onmouseover="this.className='selected'" onmouseout="this.className=''"><a href="#">Item three</a></li>
        <li onmouseover="this.className='selected'" onmouseout="this.className=''"><a href="#" >Item four</a></li>
        <li onmouseover="this.className='selected'" onmouseout="this.className=''"><a href="#">Item five</a></li> 
    </ul> 
</div> 
 
<br><br> 
 
</body> 
</html>

Open in new window

0
 
quincydudeCommented:
more css oriented
<!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; }
 
li a
{
text-decoration: none;
color: #FFF;
padding: 5px 12px 5px 13px;
font-weight: bold;
}
 
li:hover
{
background-color: #7ccbf3;
color: #00689c;
}
 
li a.current
{
background-color: #ffcd64;
color: #00689c;
padding: 5px 12px 5px 13px;
font-weight: bold;
}
 
li {
border-right: 1px solid #006192;
border-left: 1px solid #3a91ca;
padding-right: 0px;
padding-left: 0px;
}
 
.div2{
 
display: inline;
padding: 5px 0;
margin-right: -3px;
}
 
</style> 
 
</head> 
 
<body> 
 
 
<br><br> 
 
<div id="navcontainer"> 
    <ul id="navlist"> 
        <li ><a href="#">Item one</a></li>
        <li ><a href="#" class="current">Item two</a></li>
        <li ><a href="#">Item three</a></li>
        <li ><a href="#" >Item four</a></li>
        <li ><a href="#">Item five</a></li> 
    </ul> 
</div> 
 
<br><br> 
 
</body> 
</html>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
quincydudeCommented:
here's the best solution so far...
<!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;
padding-left: 0px;
padding-right: 0px;
margin: 0;
list-style-type: none;
color: #FFF;
width: 100%;
text-align: center;
}
 
li { display: inline; padding: 5px 0;}
 
li a
{
text-decoration: none;
color: #FFF;
padding: 5px 12px 5px 13px;
font-weight: bold;
}
 
li:hover, 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 {
border-right: 1px solid #006192;
border-left: 1px solid #3a91ca;
padding-right: 0px;
padding-left: 0px;
}
 
li.left {
border-left: 0px;
}
 
li.right {
border-right: 0px;
}
 
 
</style> 
 
</head> 
 
<body> 
 
 
<br><br> 
 
<div id="navcontainer"> 
    <ul id="navlist"><li class="left"><a href="#">Item one</a></li><li ><a href="#" class="current">Item two</a></li><li ><a href="#">Item three</a></li><li ><a href="#" >Item four</a></li><li class="right"><a href="#">Item five</a></li></ul> 
</div> 
 
<br><br> 
 
</body> 
</html>

Open in new window

0
 
SpiderstaveAuthor Commented:
Awesome quincydude, this works perfect! Thank you so much. I'll be able to go through your solution and learn a lot, I'm sure.
0
 
quincydudeCommented:
You are welcome. Happy web building :)
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now