View Full Version : Unordered list of images

11-06-2010, 04:51 PM
Hi all

I've just found this site and hope you can help me.

I am putting together a unordered list with images and I am getting what looks like a 30px or 40px margin to the left of the first image.

I am sure that it is simple to cure but I have tried all sorts.

All help apprecated.


11-06-2010, 05:03 PM
All help apprecated. Sorry, we can't provide help by just looking into some CSS. We need to see your complete HTML or a link to your page would be much better.

PS: The way to comment inside CSS is like
text to be commented here.

11-06-2010, 05:47 PM
I have now uploaded it for you to see.


Thanks for the commenting advice.

11-06-2010, 07:05 PM
I've done more testing with this than I care to admit to and not found any good answer. It seems to be due to the 'natural' indentation that lists use. Trying to correct it with a negative margin causes other problems not easily solved. I would say that you should try other arrangements, like divs and divs or divs and paragraphs.

11-06-2010, 07:13 PM
What happens if you dump the containing div:

<div class="images">

assign the images class to the ul:

<ul class="images">

and add:

ul.images {padding: 0;}
ul.images > li {margin: 0; padding: 0;}

to the CSS?

11-06-2010, 07:40 PM
Thanks for taking the time to look at this. It has baffled me too.

BUT....if I put the css in the html file have a look now what happens.

The large left margin disappears and a black image bottom border appears.



11-06-2010, 08:48 PM
I'll reiterate. Remove all of the crap you don't need and start with a base setup. When you have the layout as expected, add back which bits you want. You definitely don't need a containing div on a list, however, unless you're planning on clumping some other stuff in there later on. It's there for sake alone as is.

11-07-2010, 07:34 PM
Hello highandwild,
Your left margin was the default padding on the ul. This bit highlighted in red below killed that:

* {
font-family:Arial, Helvetica, sans-serif;
background-color: #000000;

Your use of the * also put a black background on your li which is the "black image bottom border " you're seeing.

You've made a good example as to why you should not use a global reset like that - read more here (http://www.html-advisor.com/css/what-is-global-css-reset/).

Try making your CSS look like this instead:

html, body {
font-family:Arial, Helvetica, sans-serif;
background: #000;
.images {
.images ul {
text-decoration: none;
list-style-type: none;
padding: 0;
.images ul li {
margin: 5px;
float: left;
.images ul li img{border:none;}
.images ul li a{text-decoration:none;}
.images ul li a:hover{text-decoration: none;}

11-07-2010, 07:37 PM
Thought I might add a link you may find useful - http://nopeople.com/CSS/thumbnail%20presentation/index.html