Text in lists?

In the vertical list menu on,
Nikel Antique Dolls
how do I move only the text (not the image) down like 10px?

Change it’s padding, according to dragonfly those links are recieving a fixed height with no padding, when instead of saying the height, it should be saying

Though lord knows I can’t find where in the code to say that given the train-wreck of oddball formatting/no formatting, inlined presentation in the markup, inlined CSS for no good reason, CSS embed styles that haven’t been in practice since we stopped caring about netscape 4, and overall two or three times the HTML necessary for such a layout. Its such a mess I can’t make heads nor tails of the markup, much less the CSS. I mean… h4’s doing label’s job, H3 without a h2 doing LEGEND’s job…

It even looks like it’s using images to handle border’s job – or are those images placeholders for future styling? I really can’t tell…

I would suggest throwing it out and starting over with semantic markup, preferably in a MODERN doctype instead of being in “transition” from 1997 to 1998.

What you have so far is pretty simple – If I remember later I’ll toss together a quick rewrite to show what I mean.

Just to start it out, here’s how I’d have written the markup – +/- 1%.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

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

<meta
	http-equiv="Content-Language"
	content="en"
/>

<!-- your description was too long and too impersonal, likely ignored -->
<meta
	name="Description"
	content="Your source for Rare and Original Dolls."
/>

<!-- 
	your keyWORDS were redundant, and too long... of course with NO content
	on the page they mostly have zero relevancy. Get some text in there!
	You don't have to say plural, you shouldn't use the same word more than
	once, you should restrict yourself to 8 or 9 words, and the whole thing
	should be less than 128 characters.
-->

<meta
	name="Keywords"
	content="doll, antique, rare, collectable, unusual, bisque, french, german"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Nikel Antique Dolls
</title>

</head><body>

<h1>
	<a href="index.php">
		Nikel Antique Dolls
		<span><!-- image replacement --></span>
	</a>
</h1>

<div id="widthWrapper">

	<div id="sideBar">
	
		<ul id="mainMenu">
			<li><a href="collection.php">Doll Collection</a></li>
			<li><a href="profiles.php">Doll Profiles</a></li>
			<li><a href="articles.php">Articles</a></li>
			<li><a href="ordering.php">Ordering</a></li>
			<li><a href="about.php">About Us</a></li>
			<li><a href="/blog/">Blog</a></li>
			<li><a href="contact.php">Contact Us</a></li>
		</ul>
		
		<form
			method="post"
			action="http://www.ymlp.com/subscribe.php?nikelantiquedolls"
			id="mailingList"
		>
			<fieldset>
				<legend><span>Join Mailing List</span>
				<label for="mailingName">Name</label><br />
				<input type="text" name="YMLP0" id="mailingName" size="15"/><br />
				<label for="mailingEmail">E-Mail</label><br />
				<input type="text" name="YMLP1" size="15"/><br />
				<input type="image" src="i/b_submit.gif" alt="Submit" class="submit" />
			</fieldset>
		</form>
		
	<!-- #sideBar --></div>
	
	<div id="content">
		<img
			src="images/main.jpg"
			alt="Some Rare and Classic Dolls"
			class="plate"
		/>
	<!-- #content --></div>
	
	<div id="footer">
		<ul>
			<li><a href="index.php">Home</a></li>
			<li><a href="collection.php">Doll Collection</a></li>
			<li><a href="profiles.php">Doll Profiles</a></li>
			<li><a href="articles.php">Articles</a></li>
			<li><a href="ordering.php">Ordering</a></li>
			<li><a href="about.php">About Us</a></li>
			<li><a href="contact.php">Contact Us</a></li>
			<li class="last"><a href="sitemap.php">Site Map</a></li>
		</ul>
		&copy; 2011 Nikel Enterprises
	<!-- #footer --></div>
	
<!-- #widthWrapper --></div>

</body></html>  

CSS will follow soon.

Here’s what I came up with:
Nikel Antique Dolls

As with all my examples the directory:
Index of /for_others/lukeurtnowski

is open for easy access. Valid XHTML 1.0 Strict, valid CSS 2.1, tested working IE 6, 7, 8 and 9, FF 3.5 and 4, and the latest flavors each of Opera, Safari and Chrome. It also works in IE 5.5 except that the plate image isn’t centered (oh noes).

I redid the images, it now only requires four separate images to build everything, and said images total 70k instead of 83k through the use of .png (and they’re GAMA stripped so no color matching issues in IE)… It’s half the markup, probably about half the CSS too, and a lot simpler/easier to follow.

Hope this helps.

<off-topic>And while you’re at it, lose the keywords. AFAIK all the major search engines ignore them :)</off-topic>