Unordered list makes the image indented


When I have three pictures in a div tag and make each of them listed items, in a unorderd list. The picture moves from the div left side and gets indented like 20px, is there a way I can avoid this?

{ Kev

If you apply a negative margin-left to the li element, you can fix it.


Is this the only way to do it?

There’s probably some sort of default margin applied to the li element.

I haven’t experimented with it enough to know for sure, but this is the only thing that I can think of off the top of my head.


Ok, I think Ill stick with it, if anyone have some other experience with this please comment. :slight_smile:

Thanks Teh.

No probs kvn :smiley:

Happy to help.

The problem is that <ul> comes with default margins/paddings. Depends on the browser. You need to set the <ul> to margin:0;padding:0;

You shoiuld really have a reset in your stylesheet. Google “Eric Meyers Reset”. You can trim that down if you want :). It is a bit bloated.

Cool, so I just have to copy this code into my stylesheet? :wink:

   v2.0 | 20110126
   License: none (public domain)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
table {
	border-collapse: collapse;
	border-spacing: 0;

Yes. Replace that ddstylesheet with the code I pasted.

One thing that I like to do, whenever I find a boilerplate like that, is to type it up and record it as a macro in Notepad++.

Sadly, you can’t copy+paste b/c N++ copies keystrokes, so you’d have to type it up. But it’s incredibly useful.

Whenever I start a project (now), I just hit control+alt+shift+backspace and I’m good.


Yeah, he already mentioned that.