Guest dbqp Posted March 26, 2006 Share Posted March 26, 2006 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' Quote Link to comment Share on other sites More sharing options...
convict Posted March 26, 2006 Share Posted March 26, 2006 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 :) Quote Link to comment Share on other sites More sharing options...
Guest sgleaton Posted March 26, 2006 Share Posted March 26, 2006 [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 Quote Link to comment Share on other sites More sharing options...
Guest dbqp Posted March 26, 2006 Share Posted March 26, 2006 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? Quote Link to comment Share on other sites More sharing options...
Guest dbqp Posted March 27, 2006 Share Posted March 27, 2006 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&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! :) Quote Link to comment Share on other sites More sharing options...
convict Posted March 28, 2006 Share Posted March 28, 2006 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.