CSS - Cannot Remove Whitespace Below List Item With Image

Here's the website example: http://www.justuskennels.net

In the menu, for the IE6 & 7 issues, I'm using the whitespace fix as found he http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

The only problem is that when I hover over "Our Dogs" and the side menu slides out, the <li> for "Our Dogs" puts the whitespace back in. So, if you roll over the menu quickly, you'll see it jump by a few pixels on the hover.

If I'm not describing it well enough I'll try more, but does anyone know of a fix for the hovered <li> on the slide-out?

Navigation CSS:
Code:

/* Navigation Menu Styling */
#menu {	font-size:90%;
		margin:0px 0px 0px 17px;
		text-align: center;
		font-weight: bold;
		padding-bottom:50px;
		background:none;
		text-align:center;
		line-height:100%;
		} 

#menu ul {	list-style: none;
			margin: 0px;
			padding: 0px;
			width: 150px;
			}

#menu a {font-family:Verdana, Arial, Helvetica, sans-serif; display: block;}
#menu a {color:#000; text-decoration: none;}
#menu a:hover {color:#000;}
#menu li {position:relative; height:40px; line-height:40px; background:url(design/buttons.png);}
#menu li:hover {background-position:0 40px;}
#menu ul ul {position:absolute; top:0; left:100%; width:100%;}
div#menu ul ul, div#menu ul li:hover ul ul {display:none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul {display:block;}

I have a CSS menu. How to I remove the RIGHT border for that last link item? I tried a bunch of stuff, I can change the colour of it but I can't seem to get rid of it.

Quote:
/*
------------------------------------
PVII Menu CSS Express Drop-Down Menu
by Project Seven Development
www.projectseven.com
------------------------------------
*/
/*body {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
margin: 24px 0;
padding: 0;
background-image: url(images/p7exp_pbg.jpg);
background-repeat: repeat-x;
}*/
/*
Container for the menu. We set top and bottom borders only because the menu container
stretches the entire window width. Note that this container can go inside a fixed width
element that is centered on the page, if you so desire. It can even go inside a table cell.
It carries a background image for aesthetics.
*/
#menuwrapper {
border-top: 1px solid #000;
border-bottom: 1px solid #333;
background-color: #FFFFFF;
background-image: url(../images/menu_bg.gif);
background-repeat: repeat-x;
}
/*Clears the floated menu items.
Assigned to a BR tag placed just before
menuwrapper's closing DIV tag*/
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
/*
p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
We set padding and margin to zero to eliminate all indentation, turn bullets off,
and set a font-family different from the global font-family declared for the
body element above. This sets font for just the menu. Do not add a font-size here.
*/
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
/*
Root-Level Links. Do not change the first two properties.
Adjust padding values to make the root links taller and to offset them
from the left and right edges of the link box. The border right creates a
separator between links. Font-size is set here and will apply to all menu levels.
Font color is set to light gray.
*/
#p7menubar a {
display: block;
text-decoration: none;
border-right: 1px solid #333;
font-size: 1em;
color: #FFFFFF;
padding-top: 5px;
padding-right: 14px;
padding-bottom: 5px;
padding-left: 14px;
}
/*
Class assigned to those Root-Level links that have associated Sub-Menus.
The top and bottom padding assigned this element must be the same as
that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward
pointing arrow.
*/
#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(../images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;
}
/*
The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in
this style sheet will set the width for this element to auto for all
other browsers - hiding it from IE5 Mac. The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text.
*/
#p7menubar li {
float: left;
width: 9em;
}
/*
Sets width for Sub-Menu box and the List Items inside - in proportional em units.
This allows the sub-menu width to expand if users resize the text in their browsers.
*/
#p7menubar li ul, #p7menubar ul li {
width: 12em;
}
/*
The sub-menu links. We set color and turn off the right border, which
would otherwise be inherited from the root link rule. We set top and
bottom padding less than the root items and increas the left padding
to indent the sub-menu links a small amount in from the root links.
*/
#p7menubar ul li a {
color: #666666;
border-right: 0;
padding-top: 3px;
padding-right: 12px;
padding-bottom: 3px;
padding-left: 16px;
}
/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping.
Positioned Absolutely to allow them to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background Color must be set or problems will be encountered in MSIE.
Right and bottom borders are set to simulate a raised look.
A gradient background image is assigned.
*/
#p7menubar li ul {
position: absolute;
display: none;
background-color: #FFFFFF;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
background-image: url(../images/menu_bg_pulldown.gif);
background-repeat: repeat-x;
}
/*
Changes the Text color and background color when the Root-Level
menu items are moused over. The second selector sets color and background
when Root-Level items are accessed with the keyboard tab key. The third
selector sets an active state to support keyboard access in MSIE. The fourth
selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script.
Note that IE7 supports hover on elements other than links and so behaves
like Firefox, Opera, and Safari - making the menu operable even if JavaScript
is not enabled.
*/
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #000000;
background-color: #999999;
}
/*
Set the Sub-Menu UL to be visible when its associated
Root-Level link is moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
*/
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
/*
Sets the Text color of the Sub-Level links when the Root-Level
menu items are moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
The color set should march the normal Sub-Level link color
in the rule: #p7menubar ul li a. The background color must be
transparent to allow the underlying gradient background on the UL
to show through.
*/
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color: #000000;
background-color: transparent;
}
/*
The normal hover class for Sub-Level links. The Important directive
is required for older browsers. We set a background color, which shows
over the gradient background. We set text color to white.
*/
#p7menubar ul a:hover {
background-color: #606060!important;
color: #FFFFFF!important;
}
/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#p7menubar li {width: auto;}

In IE7, the list <ul> is present on pageload, but once you go mouse over it, it disappears. The hover works fine in FF and IE6. I don't think the system matters, but my testing is IE6, and FF on XP and IE7 is on a Vista machine.

I've searched all over for a fix to this problem, but all I've been able to find are some issues with IE7 on <ul> lists and whitespace. My CSS is not great and some of the fixes talked about a hasLayout() set to true - which I don't know how to do - or if I was just reading that wrong.

I know the issue is with the hover - because when I remove the css for the hover - it works fine and does not disappear. On a side note - if I'm on IE7 and I go into Internet Options and just click in and out - the page works fine. (Crazy MS).

Code:

<style type="text/css">
ul#listmenu
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
}

/** unordered list item for top menu **/
ul#listmenu li
{
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	width: auto !important;
	font-size: 14px;
	line-height: 23px;
	white-space: nowrap;
}

/** unordered list item link for top menu **/
ul#listmenu li a
{
 	padding: 0 17px 0 10px;
	width: auto;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 14px;
	background: url(../images/bullet_menu.gif) 0 6px no-repeat;
}

ul#listmenu li a:hover {
	background: url(../images/bullet_menu_over.gif) 0 6px no-repeat;
	text-decoration:none;
	color: #FFA820;
}

table.tabletop {
	margin: 20px 0 0 20px;
	width: 100%;
}

</style>


<!-- start image header -->
<div style="position:relative; float:left;clear:left;width: 768px;height: 243px;background: #FFF;background: url(../images/banner.jpg) 0 0 no-repeat;">

<table cellpadding="0" cellspacing="0" class="tabletop">
	<tr>
		<td>
				
<table width="100%" border="0" cellpadding="0" cellspacing="1">
	<tr>
		<td nowrap="nowrap">

<ul id="listmenu">
	<li>
		<a href="somelink.php" class="listmenu" >About Us</a>
	</li>
	<li>
		<a href="somelink.php" class="listmenu" >Operations</a>
	</li>
	<li>
		<a href="somelink.php" class="listmenu" >Customers</a>
	</li>
</ul>

		</td>
	</tr>
</table>
				
		</td>
	</tr>
</table>

</div>
			<!-- end image header -->

Please look at the bottom of this page in FF -

http://certified.tmhdesign.com

The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css

ul#hp_offers{
width:600px;
margin:0 0 0 10px;
border:1px solid #e0e0e0;
}
ul#hp_offers li{
padding:3px 5px 3px 25px;
border-bottom:1px solid #e0e0e0;
list-style:none;
list-style-type:none;
margin:0;
}
li.even{
background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px;
}
li.odd{
background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px;
}

Hi all, and thanks for reading.
The following code looks fine in Firefox, but has huge spaces between the images in IE 6.
CSS:
Code:

#menu {float:left; width:157px; background-color:#FFFFFF;}
		#menu IMG {display:block; margin:0; padding:0;}
		#menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;}
		#menu UL LI {margin:0; padding:0;}

HTML:
Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
	<div id="menu">
		<ul>
		<li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li>
		<li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li>
		<li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li>
		<li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li>
		<li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li>
		</ul>
	</div>

Thanks in advance.
-colin

I've been struggling with this a bit. I would rather not use a container div for my lists, but it seems that it's not possible to assign the lists themselves a width. When I assign a width to the <ol> element, I lose the numbers under the margin on the left, which I can sort-of understand. If I assign a width to the <li> elements, it works fine in Firefox, but IE drops the number on the first <li> and changes the numbers on each following <li> to "1".

Is there any way to have horizontal list items automatically fill any given width?

for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left.

the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width?

Hey everyone,

After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within.

I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working.
here is my css
Code:

#menu{
width:750px;
border:thin solid #000000;
}

#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}

#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}

#menu a{
width:150px;
}

If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within.

I am having trouble with my navigation. it works fine in safari and firefox, but when i try it in IE for the PC the main navigational elements don't move. does anyone know why?

www.iconiqdesigner.com


thanks!

Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it.
I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer:

www[dot]cameronstevens[dot]ca/gallery[dot]html

Thanks

First of all, I hope this makes sense - I just spent two hours nonstop tweaking the navigation on my first client's site, and my brain and eyes are a bit frazzled.

I have the navigation in a list, displayed horizontally in a Suckerfish dropdown. The container is elastic but the navigation is not; I want it to stick to the right side but move to the left when the browser is made narrower.

Floating it to the right works perfectly.. But it reverses the order of my list items so that "Home" is to the far right instead of the left.

Is there any way to reverse the order of the list items without touching the HTML? Going for full accessibility here, so I obviously don't want to reverse the item order in the HTML.

I could probably figure this out on my own but it would take time, and like I said.. My brain is a little wonky right now

Thanks in advance!

I'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image.

Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs.

Here is the Code

Code:

CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px;    /*** Critical left col/divider dimension value ***/
margin-left: -176px;    /*** Critical left col/divider dimension value ***/
}

*>html .left {width:176px;}   /*** Fix only for IE/Mac ***/

.container-left {
width: 175px;    /*** Critical left col dimension value ***/
padding-bottom: 110px;   /*** To keep content from going underneath the AP bottom boxes ***/ 
}

.menu-main{
	margin-left:1px;
        border-bottom:1px solid black;

}


XHTML
<div class="left">
	<div class="container-left">
		<div class="menu-main"><img src="images/home_off.jpg" /></div>
		<div class="menu-main"><img src="images/awards_off.jpg" /></div>
		<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
		<div class="menu-main"><img src="images/membership_off.jpg" /></div>
		<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
		<div class="menu-main"><img src="images/events_off.jpg" /></div>
		<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
		<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
		<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
		</div>
	</div> <!-- end left div -->

Any suggestions?

The images are all 174px in width

I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style.

Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>HOTWORKS</title>
  <link rel="stylesheet" href="stylz.css" type="text/css">
</head>

<body class="top" id="bdy" > 
<!-- Site navigation menu -->
<ul class="navbar" id="navlist">
	<li><a href="tools.html"><br>Tools</a>
	<li><a href="glass.html"><br>Glass <br> Artwork</a>
	<li><a href="pottery.html"><br>Ceramic<br> Artwork</a>
	<li><a href="about.html"><br>About</a>
</ul>

<!-- Main content -->
<h1>     </h1>

<p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
TOOLS - ART - MISCELLANEA 
<br>

<address>
</address>

</body>
</html>

Code:

#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}

Just to be complete, and in case there is something in here that you might need, here is the full css file:

Code:

  body.top {
    padding-left: 11em;
    font-family: Fantasy, "Times New Roman", Times, serif;
    font-size:15px;
    color: #000000;
    /*background-image: url(images/tab3.jpg) ; */
    background-position: 210px 10px; 
    background-repeat:no-repeat;
    background-color: #000000;
    margin-left:5cm;
	}

   body.top {  background-image: url(images/tab3.jpg) ; }
   
  ul.navbar {
   	color: #000000;
    list-style-type: none;
    position: absolute;
    display:block;
    float:left;
    left: 1em;
	}

  h1 {
    font-family: Helvetica, Geneva, Arial,
		SunSans-Regular, sans-serif 
	}
  ul.navbar li {
		text-align:center; 
   /* vertical-align:100px; */
   background: #000000;
   border-right: 1em solid black;
	}
  ul.navbar a {
		text-decoration: none ;
		 top:10%; 
    height:4em; 
  
	}
  a:link {
    color: white }
  a:visited {
    color: white }

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:144px;
    height:137px;
    color:#fff;
    text-decoration:none;
    background:url("images/drawer4.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
}
#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}
#navlist a:active {
	 background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FFC741;
}

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.