IE creates UNWANTED space between DIV elements

[vtmoren]

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

 

[1DMF]

have you zero'd all default formating on elements first?

* {padding:0; margin:0;}

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

what doctype are you using? have you validated your html (

http://validator.w3.org)?

have you validated your css (

http://jigsaw.w3.org/css-validator/)?

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[vtmoren]

1DMF,

Thanks for the response.
I tried your suggestion but no luck...

-VM

 

[vtmoren]

cFlava,

It is a .jsp page so there is no doctype defined within the html istelf...

and the css validation llink did not work...

-VM

 

[ChrisHunt]

Sometimes IE adds some whitespace in if you have any space between the elements in your markup, so try this:

<div id="navMenu" class="navMenu"><div id="navLinks" class="navLinks">
   <a class="class1" href="/link1">link1</a>
   ... etc ...

If that doesn't work, try removing the spacing around the <a>s too.

You might also consider using a <ul> instead of plain <div>s, as it looks nicer if CSS is switched off.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[vtmoren]

ChrisHunt,

I appreciate your assistance. Removing the whitespace between DIVs also did not fix the problem...

The A links also contain some JSTL logic (not displayed -- used to display different colors based on a session variable) so the existing whitespace around them cannot be removed...and the unwanted space only exists between the two DIVs within IE....

Maybe I will try a UL and see how that goes...

Thanks,

-VM

 

[cLFlaVA]

where my questions too hard?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

lol cory, you're so demanding, expecting semantic, standards compliant code and a reply !

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.