Log in

View Full Version : 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. (http://kevinsite.freehostia.com/tests/maurya.html)

<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
<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
mrhoops515
10-09-2006, 11:33 PM
no change in both browsers
mrhoops515
10-10-2006, 12:45 AM
simply increasing the bottom padding of the link element worked fine

(10 10 11 10)