Styling / Spacing Issue with Linked Images

HTML & CSS
1

I’ve been having a problem with styling some CSS on to a list of images with hyperlinks on them. It’s a very simple problem, and I’m 99.99% confident that I’m missing a property or something trivial like that. But the problem is that I can’t remember what it is I need to type to get what I want.

Here’s what I currently get: http://www.huffier.co.uk/wedinvites/ and what I’d like is for there to be no space between each of the images. I’ve placed a black background-color on the container div so that you can see the amount the images are spaced out by. And you can view the HTML source which includes inline CSS in the head.

I’ve tried going at it for 2 days now and I’m stumped. I call upon the CSS Gods and Goddesses of the SPF to help me, please.

2

You are setting the lis to inline, which cause the whitespace between the elements to display. This is a common one (i’ve been frustrated about this numerous times as well). Also, the images will automatically get a border, at least in some browsers:

Since you are splitting up the list anyway, this should fix it:


#wedding-invitations-container {
 background-color: #000;
 border: 1px solid #f00;
 width: 510px;
}


#wedding-invitations-container ul {
 list-style: none;
 margin: 0;
 padding: 0;
}


#wedding-invitations-container li {
 float: right;
 margin: 0;
 padding: 0;
 width: 170px;
}

#wedding-invitations-container img {
 border: 0;
 display: block;
}
3

See, I’d leave the LI inline, and float the images – which also trips block display on the images meaning you don’t have unwanted space at the bottom of them either… though I’m stuck wondering what’s with all the extra DIV and UL for nothing in there… unless you’re planning on adding some sort of different colors to each or something, it seems to me you have WAY more markup than necessary.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
>

<title>
	LOL
</title>

<style type="text/css"><!--

ul, li {
	margin:0;
	padding:0;
}

#weddingInvitations {
	list-style:none;
	overflow:hidden; /* wrap floats */
	width:510px;
	background:#000;
	border:1px solid red;
}

#weddingInvitations li {
	display:inline;
}

#weddingInvitations img {
	float:left;
}

--></style>

</head><body>

<ul id="weddingInvitations">
	<li>
		<a href="/wedding-invitations/group-a/">
			<img src="group-a.png" alt="">
		</a>
	</li><li>
		<a href="/wedding-invitations/group-b/">
			<img src="group-b.png" alt="">
		</a>
	</li><li>
		<a href="/wedding-invitations/group-c/">
			<img src="group-c.png" alt="">
		</a>
	</li><li>
		<a href="/wedding-invitations/group-d/">
			<img src="group-d.png" alt="">
		</a>
	</li><li>
		<a href="/wedding-invitations/civil-partnerships/">
			<img src="civil-partnerships.png" alt="">
		</a>
	</li><li>
		<a href="/wedding-invitations/postcard-style/">
			<img src="postcard-style.png" alt="">
		</a>
	</li>
</ul>
	
</body></html>
4

Ah! -Facepalm- What a mistake to make! Thank you both for your help and solutions. I did decide to go with Jason’s solution as you were absolutely right, way too much markup in there, I got rid of it all and the markup I’ve used is the same that you did. It was just there as a safety net really for the page I’m constructing, but I’ve over that small case of divitis and the page is feeling much lighter again thanks to your help :slight_smile:

Thanks again to both of you for your quick replies to my cry of help, and sorry for this delayed reply. I hadn’t forgotten about your help :slight_smile: