vtmoren
Programmer
- Aug 29, 2006
- 5
On my site I an setting up a Navigation Menu broken into two DIVs - One which contains the menu items (navLinks) and one which is to designed to take up the rest of the space remaining on the menu within the browser screen (navHeader). In FireFox the Navigation Menu is displayed perfectly, but within IE (6 & 7) there is a small space between the two DIVs. I have provided a simple framework of the HTML code as well as some of my CSS:
HTML:
<!-- start Navigation menu -->
<div id="navMenu" class="navMenu">
<!-- start Navigation menu links -->
<div id="navLinks" class="navLinks">
<a class="class1" href="/link1">Link1</a>
<a class="class2" href="/link2">Link2</a>
<a class="class3" href="/link3">Link3</a>
<!-- start Navigation menu header -->
<div id="navHeader" class="navHeader"></div>
<!-- end Navigation menu header -->
</div>
<!-- end Navigation menu links -->
</div>
<!-- end Navigation menu -->
CSS:
/* --------- Navigation Menu --------------- */
div.NavMenu {
width: 100%;
height: 20px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px dashed #9D9D9D;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
/* --------- Navigation Menu Links ----------- */
div.navLinks {
height: 20px;
margin: 0;
padding: 0;
}
div.navLinks a {
font-family: Verdana;
font-weight: normal;
font-size: 1.1em;
text-align: left;
text-decoration: none;
border-right: 1px solid #FFFFFF;
height: 20px;
width: 145px;
float: left;
}
div.navLinks a:hover {
color: #000000;
background-color: #CCCCCC;
}
/* --------- Navigation Menu Header -------- */
div.navHeader {
height: 20px;
background-color: #999999;
padding: 0;
margin: 0;
border: 0;
width: auto;
}
Any help would be greatly appreacited. Any ideas? It is driving me crazy.....
-VM
HTML:
<!-- start Navigation menu -->
<div id="navMenu" class="navMenu">
<!-- start Navigation menu links -->
<div id="navLinks" class="navLinks">
<a class="class1" href="/link1">Link1</a>
<a class="class2" href="/link2">Link2</a>
<a class="class3" href="/link3">Link3</a>
<!-- start Navigation menu header -->
<div id="navHeader" class="navHeader"></div>
<!-- end Navigation menu header -->
</div>
<!-- end Navigation menu links -->
</div>
<!-- end Navigation menu -->
CSS:
/* --------- Navigation Menu --------------- */
div.NavMenu {
width: 100%;
height: 20px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px dashed #9D9D9D;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
/* --------- Navigation Menu Links ----------- */
div.navLinks {
height: 20px;
margin: 0;
padding: 0;
}
div.navLinks a {
font-family: Verdana;
font-weight: normal;
font-size: 1.1em;
text-align: left;
text-decoration: none;
border-right: 1px solid #FFFFFF;
height: 20px;
width: 145px;
float: left;
}
div.navLinks a:hover {
color: #000000;
background-color: #CCCCCC;
}
/* --------- Navigation Menu Header -------- */
div.navHeader {
height: 20px;
background-color: #999999;
padding: 0;
margin: 0;
border: 0;
width: auto;
}
Any help would be greatly appreacited. Any ideas? It is driving me crazy.....
-VM