Basic CSS Menu Needs a Little Help in FF

**mrhoops515** · 10-09-2006, 10:52 PM

I am just a novice and built this test of a Web site.

Click here to see.

Code:

<html>
<head>
<style type="text/css">
body{margin:0px; padding:0px;}
.nav{
padding: 0;
margin: 0;
font: bold 16px Arial;
list-style-type: none;
text-align: center;
}

.nav li{
display: inline;
margin: 0;
}

.nav li a{
text-decoration: none;
padding: 10px;
height:40px;
margin-right:5px;
border: 1px solid #56190d;
border-bottom: none;
background-color: #916717;
color: #56190d;
}

.nav a:hover{color:#916717;
background-color:#56190d;}
</style>
</head>
<body>
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td height="40" width="100%" align="center" bgcolor="#916717">Mauryan Empire</td></tr>
<tr><td height="40" width="100%" background="browngloss.png">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="war.html">Conquests and Battle Tactics</a></li>
<li><a href="tech.html">Technology and Innovations</a></li>
<li><a href="admin.html">Administration Techniques</a></li>
<li><a href="culture.html">Culture</a></li>
</ul>
</td></tr>
<tr><td height="100%" width="100%" bgcolor="#56190d">test</td></tr>
</table>
</body>
</html>

There is a slight gap in FF that doesn't display in IE.

I was just wondering how to fix it?

**mburt** · 10-09-2006, 10:53 PM

There is a slight gap in FF that doesn't display in IE.

Where is the gap? In the menu, body?

**mrhoops515** · 10-09-2006, 10:58 PM

in between the menu and the next table cell (more noticable on mouseover of a link)

**mburt** · 10-09-2006, 11:02 PM

Code:

<html>
<head>
<style type="text/css">
body{margin:0px; padding:0px;}
.nav{
padding: 0;
margin: 0;
font: bold 16px Arial;
list-style-type: none;
text-align: center;
}
.nav ul {
display:inline
}
.nav li{
display: inline;
margin: 0
}

.nav li a{
text-decoration: none;
padding: 10px;
height:40px;
border: 1px solid #56190d;
border-bottom: none;
background-color: #916717;
color: #56190d;
}

.nav a:hover{color:#916717;
background-color:#56190d;}
</style>
</head>
<body>
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td height="40" width="100%" align="center" bgcolor="#916717">Mauryan Empire</td></tr>
<tr><td height="40" width="100%" background="browngloss.png">
<ul class="nav">
<li><a href="index.html">Home</a></li><li><a href="war.html">Conquests and Battle Tactics</a></li><li><a href="tech.html">Technology and Innovations</a></li><li><a href="admin.html">Administration Techniques</a></li><li><a href="culture.html">Culture</a></li>
</ul>
</td></tr>
<tr><td height="100%" width="100%" bgcolor="#56190d">test</td></tr>
</table>
</body>
</html>

**mrhoops515** · 10-09-2006, 11:08 PM

adding the ul tag didn't change anything and taking out the right margin didn't either

**mburt** · 10-09-2006, 11:15 PM

Did you try it?

**mrhoops515** · 10-09-2006, 11:17 PM

sure did

**mburt** · 10-09-2006, 11:17 PM

Wait a minute. What exactly do you want to do. You haven't been clear on which gap you want to take out. In the above code the gap between the menu items was cleared. Please be specific in your questions.

**mrhoops515** · 10-09-2006, 11:25 PM

sorry for the misunderstanding,

I want to take out the gap below the menu, in between the menu and the background color (red) so that when you mouseover a menu link, the link and the background color of the page blend seamlessly together (right now there's a thin tan line between the two

thanks, and sorry for the trouble

**mburt** · 10-09-2006, 11:30 PM

Change the height of the menu row to 37

Thread: Basic CSS Menu Needs a Little Help in FF

Thread Tools

Search Thread

Basic CSS Menu Needs a Little Help in FF

Bookmarks

Bookmarks

Posting Permissions