IE Menu Gap Problem

[Guest dbqp]

I have altered the categories to be shown on the left side with images and using hover. All seems fine with FF, but when I look at the menu with Internet Explorer (IE). The top "Home" category has approx 4px gap between it and the remaining categories. I have tried everything in the CSS to make sure the margin and/or padding is correct and various other techniques.

Does anyone have an idea on how this could be corrected?

The link is 'LINK REMOVED'

[convict]

White space there - Home Page link image. Hmm complicated structure, too much divs.

Enclose Homepage to UL, LI too, use only ONE UL for all cats, homepage LIs and why div for every category name? Just enclose entire code to one <div class="cssnav"> thats up to u :)

[Guest sgleaton]

[As far as I can tell, you have it out side of your list. The browser is going to seperate it because it is a seperate item from the list.

Scott Gleaton

[Guest dbqp]

Thank you both for your suggestion.

The reason I have a div for every category is due to the structure of the categories.tpl file code:

<!-- BEGIN: categories -->

<!-- <div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div> -->

<div class="boxContentLeft">

<div class="cssnav"><ul><li><a href="index.php" title="{LANG_HOME}"> <img src="../skins/dbqpcc/styleImages/backgrounds/menu_bggrey.gif" alt="{LANG_HOME}" /> <span> {LANG_HOME} </span> </a></li></ul></div>

<!-- BEGIN: li -->

 <div class="cssnav"><ul><a href="index.php?act=viewCat&catId={DATA.cat_id}" title="{DATA.cat_name}"> <img src="../skins/dbqpcc/styleImages/backgrounds/menu_bggrey.gif" alt="{DATA.cat_name}" /><span> {DATA.cat_name} </span> </a></ul></div> 

<!-- END: li -->

</div>

<!-- END: categories -->

And the style.css:

/*Begin Navigation*/

.cssnav { 

position: relative;

font-family: arial, helvetica, sans-serif;

font-weight: bold;

background-image: url(http://shop.databankqp.com/skins/dbqpcc/styleImages/backgrounds/menu_bgblue.gif);

background-repeat: no-repeat;

white-space: nowrap;

display: block;

width: 130px;

height: 24px;

margin: 0;

padding: 0;

}

.cssnav ul {

list-style: none;

margin: 0;

padding: 0;

}

.cssnav ul {

float: left; /* cure IE5.x "whitespace in lists" problem */

width: 100%;

}

.cssnav ul a {

height: 1%; /* make links honour display: block; properly */

} 



.cssnav a {

display: block;

color: #000000;

font-size: 11px;

width: 130px;

height: 16px;

float: left;

color: #FFFFFF;

text-decoration: none;

}



.cssnav img {width: 130px; height: 24px; border: 0; }



*html a:hover {visibility:visible}



.cssnav a:hover img{visibility:hidden}



.cssnav span {

position: absolute;

left: 10px;

top: 5px;

margin: 0px;

padding: 0px;

cursor: pointer;

}

/* END OF NAVIGATION */

I have tried putting the "Home" nav with the categories, but it splits and doubles the images up.

Any sugestions based on the code and css above?

[Guest dbqp]

GOT IT!!!

I simply placed a style="float:left;" tag for it to adjust for the "white space in list for IE".

See the updated code below:

<!-- BEGIN: categories -->

<!-- <div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div> -->

<div class="boxContentLeft">

<div class="cssnav"><ul><li><a href="index.php" title="{LANG_HOME}"> <img src="../skins/dbqpcc/styleImages/backgrounds/menu_bggrey.gif" alt="{LANG_HOME}" style="float:left;" /> <span> {LANG_HOME} </span> </a></li></ul></div>

<!-- BEGIN: li -->

 <div class="cssnav"><ul><a href="index.php?act=viewCat&amp;catId={DATA.cat_id}" title="{DATA.cat_name}"> <img src="../skins/dbqpcc/styleImages/backgrounds/menu_bggrey.gif" alt="{DATA.cat_name}" /><span> {DATA.cat_name} </span> </a></ul></div> 

<!-- END: li -->

</div>

<!-- END: categories -->

Thanks again for your help as I was just pulling my hair out on this! :)

[convict]

Great! Have you tried to delete space before and after IMG tag? As far as i know this trick helps alomst in any case

For all white space issue browsers helps this (99%): Do not use any space or line break just before and after <IMG> tag.