Spaces between list items

Spaces between list items.

I have the following code:

<style>
#kwicks_container {
    width: 102px;
    height: 420px;
}

#kwicks {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#kwicks .kwick {
    display: block;
    height: 60px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    width: 102px;
}

.kwick li
{
    margin: 0px;
    padding: 0px;
    display: block;
}

.kwick img
{
	border: 1px solid #000000;
	display: block;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
</style>

<div id="kwicks_container">
	<ul id="kwicks">
		<li class="kwick"><img src="images/kwick/model-management.jpg"></li>
		<li class="kwick"><img src="images/kwick/celebrity-management.jpg"></li>
		<li class="kwick"><img src="images/kwick/artist-management.jpg"></li>
		<li class="kwick"><img src="images/kwick/event-management.jpg"></li>
		<li class="kwick"><img src="images/kwick/film-production.jpg"></li>
		<li class="kwick"><img src="images/kwick/film-distribution.jpg"></li>
		<li class="kwick"><img src="images/kwick/360-degrees.jpg"></li>
	</ul>
	<span class="clr"><!-- spanner --></span>
</div>

Code (markup):

In Firefox, this does not create any spaces between list items, which is exactly what I want. However, this creates spaces between items in IE. Why is this happening? How can I fix this problem?

 

Add padding to your list. That will create spaces in between each. By the way, I don't ever recommend using absolute or relative position for your divs. Margins/Float do wonders.

 

I tried adding paddings, but that doesn't seem to work when I display images inside list items, which is exactly what I do in this code. I have no idea why IE creates spaces when these images are displayed. If I don't place images inside, then I can get around this problem, but ... I'm afraid that I really do need to display them. How can I resolve this problem? (Ugh ..., I'm getting pretty frustrated ...)

 

I would rewrite this anyway.

I would only have the ul, which is a block element so in the CSS you can set the height and width like you do in the container.

Second, you have classitis, unless this was a demo you listed and the li's will have different classes on them. If everyone has the same class, then what's it doing? not differentiating anything. It's like being in a room full of humans in an intergalactic restaurant and calling them "Human, Todd Jones; Human, Raul Gomez; Human, Lakshmi Singh" when, because they're all humans anyway, you can just use their names. Were there one Mergatroidian in the group, you'd still give no special consideration to the humans, but you would call out "Mergatroidian, Xbth Pbth" to give it a special set of rules different from the humans.

merged:
#kwicks li {
    display: block;
    height: 60px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    width: 102px;
}

Code (markup):

Though I'd go ahead and have, earlier in the CSS, something like

* {
  margin: 0;
  padding: 0;
}
 
img {
 border: none;
}

ul, li {
 margin: 0;
  padding: 0;
  list-style: none;
}

Code (markup):

Just because my lists always need to start at 0 and I almost never use list-type (and when I do, I'm specifying what it is anyway, so it overrides the reset default).

Lastly, you could possibly use image replacement which means you have a normal menu, plus people with images can see a neat-o image covering the text instead. Everyone happy, bots can still surf through the menu.

But, I'd need a picture of what it's supposed to look like to go on from here. You want spaces? Or not? This is a vertical menu? I'm not sure you need to say display: block.

 

Does anyone know how to solve this problem, im also having problems the same problems with IE7. Each time I hover over an item a small white space appears wheras in firefox it works smoothly, anybody any solutions to this?

You can see for yourself here: www.gaming-express.com/navtest/kwicks_final.html

Thanks in advance

 

I have solved the problem, to prevent the white spaces (or flickering), all you have to do is add a background image exactly the same to the background of each of your list items to your kwicks class (.kwicks), here my code for the CSS kwicks class:

.kwicks {
     list-style-type: none;
     list-style-position:outside;
     position: relative;
     margin: 0px;
     padding: 0px;
     background-image:url(no_flicker.jpg);
}

Code (markup):

P.S. Im posting the solution for anyone with the same problem, also, almost every search term I tried in Google to solve led me back to this thread lol, so hopefully it will help others.

 

Actually, looking back at the older posts, I wonder if what he was seeing was just IE adding the space it adds to the bottoms of all inlines (to make room for the dangly letters of text like gypjq), in which case he could have either

img {
vertical-align: bottom;
}

or

img {
display: block;
}

though I prefer the first as you don't always want images to be blocks. Blocks aren't text and so don't need space for texty danglies.