I'm trying to make CSS image rollovers for a website running Wordpress (hence the weird php code)

What I'm doing is setting a background image in a <li> tag to change when ever a user rolls over it. My only problem is, is that i cant seem (nomatter what I try) to keep the <li> from collapsing. (it has to have some sort of contents, I've tried adding a &nbsp; but it only makes it 1 space big and I thought that It was kind of crude to keep putting a bunch of &nbsp

Here is what I have right now:

CSS

#navcontainer {
	float: right;
	width: auto;
}

.navlist ul
{
padding: 0;
margin: 0;

}

.navlist li
{
list-style: none;
margin: 0;
padding: 0;
text-align: left;
display: inline;
}


li.apparelnav li.noapparelnav {
	width: 88px;
	background-position: center;
	background-repeat: no-repeat;
}

li.apparelnav a{
	background-iamge: url('http://solven.iambaldwin.com/assets/apparelwhite.png');
}

li.noapparelnav a
{
	background-image: url('http://solven.iambaldwin.com/assets/apparelgreen.png');
}

li.noapparelnav a:hover
{
	background-iamge: url('http://solven.iambaldwin.com/assets/apparelwhite.png');
}

HTML

<div id="navcontainer">
<ul class="navlist">
<li<?php 
if (is_page('4'))
{ 
echo " class=\"apparelnav\"";
}	else {
	echo " class=\"noapparelnav\"";
}
?>>
<a href="http://solven.iambaldwin.com/apparel"><span>&nbsp;</span></a>
</li>
</ul>

</div>

Please Help.

thanks!

Ok, what you need to do is set the rollover (on hover) on the <a> tag, NOT the <li> itself, so that when a user hovers over the link, the background will change. IE6 only supports the hover pseudo class on the <a> tag and it will not work on the <li>.

You have typos in your code:

li.apparelnav a{
background-iamge:

li.noapparelnav a:hover
{
background-iamge:

You also don't need to use background-image, just background: url(.....) is sufficient.

To keep the li item from 'collapsing' you need to apply padding to the <a> tag, top and bottom, equal to the height of your background image. You might also apply a line-height to the <li>.

Thank you for your suggestions, but I still don't think i'm getting it right (I'm new to CSS).

Here is what I have:

CSS

#navcontainer {
	float: right;
	width: auto;
}

.navlist ul
{
padding: 0;
margin: 0;

}

.navlist li
{
list-style: none;
margin: 0;
padding: 0;
text-align: left;
display: inline;
line-height: 40px;
}

.apparelnav a{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png');
	padding: 0 44px 0 44px;
}

.noapparelnav a
{
	background: url('http://solven.iambaldwin.com/assets/apparelgreen.png');
	padding: 0 44px 0 44px;
}

.noapparelnav a:hover
{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png');
	padding: 0 44px 0 44px;
}

HTML

<div id="navcontainer">
<ul class="navlist">
<li class="navlist"><a href="http://solven.iambaldwin.com/apparel"<?php 
if (is_page('4'))
{ 
echo " class=\"apparelnav\"";
}	else {
	echo " class=\"noapparelnav\"";
}
?>>
<span>&nbsp;</span></a>
</li>
</ul>

</div>

Thank you for your help!
-Baldwin

Do a.noapparelnav, not .noapparelnav a. .noapparelnav a would only work if you had anchors that were child elements of the noapparelnav class. Since the noapparelnav class is your a, then you don't really have any child elements.

Sweet.

Your suggestion keeps it form collapsing, but what do I do for the a:hover?
I left it like this:

.noapparelnav a:hover
{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png') center no-repeat;
	padding: 20px 44px 20px 44px;
	text-decoration: none;
}

I'm a novice, but I wasn't sure how it would be able to tell between ".noapparelnav" and ".noapparelnav a:hover" without the "a:hover"

Thanks for all your help!
-Baldwin

fixed it!

changed ".noapparelnav a:hover" to "a:hover.noapparelnav".

Sweet! now it works.

Whats the difference of haivng it in front or in back anyway?

Also, is their a way to preload the "rollover" image?

Thanks for all of your help!
-Baldwin

CSS has no way of preloading images (which is one of its weak points); it's one of the reasons I've never personally been a fan of CSS rollovers (JS tends to be much smoother for my liking). It's not a bad thought on your part, but it doesn't exist...yet.

The difference between your two pieces of code is, again, child elements. if you were to write it as a.noapparelnav:hover, it might make a bit more sense to you.

Ok, the only thing I cant seem to fix now is the height. I don't know where it's getting the height from. I've tried adjusting the padding in "a" and i've tried adjusting the line height in "li", but what ever I do, it seems that the image will move to a different position, but it will not stop being cropped.

Any ideas?

Thanks!
-Baldwin

Lets see ALL of the code, not just a piece of it and maybe we can figure it out.

Website
http://solven.iambaldwin.com/

CSS

/*  
Theme Name: Goopress
Theme URI: http://www.wpdesigner.com/2007/02/08/goopress-theme/
Description: Goopress Wordpress theme created by Small Potato.
Version: 1.0
Author: Small Potato
Author URI: http://www.wpdesigner.com/

*/

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #333333;
	color: #ffffff;
}

h1, h2, h3, h4, h5, h6{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

a{
	text-decoration: underline;
	color: #33cc33;
}

a:hover{
	text-decoration: none;
	color: #ffffff;
}

a img{
	border: 0;
}

address, dl, p{
	padding: 15px 0 0;
}


blockquote{
	margin: 15px 0 0;
	background: #666666;
}

blockquote p{ padding: 15px; }

blockquote blockquote{
	margin: 15px;
	background: #666666;
}

code{
	background: #666666;
}

dt{ font-weight: bold; }

dd{ padding: 0 0 0 15px; }

hr{
	clear: both;
	margin: 15px 15px 5px 15px;
	border: 0;
	height: 1px;
	text-align: left;
	background: #666666;
	color: #ffffff;
}


/* Modified image styles of WordPress Default Theme, Kubrick */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	margin: 0 0 2px 7px;
	padding: 4px;
	display: inline;
}

img.alignleft {
	margin: 0 7px 2px 0;
	padding: 4px;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}

.entry img{
	border: 1px solid #ccc;
}

/* end image styles */

input, textarea{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 2px;
}

input#s, input#author, input#email, input#url, textarea#comment{
	padding: 3px;
	background-color: #333333;
	color:#ffffff;
	border: 1px solid #666666;
}

input#author, input#email, input#url{
	margin: 0 5px 0 0;
}

pre{
	width: 90%;
}

small{
	font-size: 12px;
}

#container{
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

#header{
	float: left;
	width: 760px;
	padding: 0;
	position: relative;
}

#site_title{
	float: left;
}

#site_title h1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: normal;
	color: #ffffff;
}

#site_title h1 a{
	color: #33cc33;
}

#site_description{
	float: left;
	width: 700px;
	font-size: 16px;
}

#page{
	float: left;
	width: 760px;
}

.narrowcolumn{
	float: left;
	width: 540px;
	margin: 0 20px 0 0;
	display: inline;
}

.widecolumn{
	float: left;
	width: 760px;
	display: inline;
}

.post{
	padding: 20px 0;
}

.postdate{
	padding: 5px 0 0;
	font-weight: bold;
	color: #666666;
}

.entry{
	line-height: 20px;
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
	border: 0;
	padding: 15px 0 0;
	font-weight: bold
}

.entry h1{
	font-size: 30px;
	font-weight: normal;
	line-height: 36px;
}

.entry h2{
	font-size: 18px;
}

.entry h3{
	font-size: 16px;
}

.entry  h4{ font-size: 14px; }

.entry h5{ font-size: 12px; }

.entry h6{ font-size: 11px; }

.postinfo a{
	color: #33cc33;
}

.postinfo a:hover{
	color: #ffffff;
}

.browse{
	border-top: 2px solid #666666;
	padding: 5px;
}

.sidebar{
	float: left;
	width: 200px;
}

.sidebar ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar ul li{
	margin: 20px 0 0;
	padding: 0;
}

.sidebar ul li#search input{
	margin: 0 0 5px;
}

.sidebar ul li h2{
	padding: 5px;
	background: #333333;
}

.sidebar ul li.pagenav h2, .sidebar ul li#pages h2{
	border-top: 2px solid #802;
	background: #333333;
	color: #fff;
}

.sidebar ul li.pagenav ul li.page_item a, .sidebar ul li#pages ul li.page_item a{
	font-weight: bold;
	color: #000;
}

.sidebar ul li.pagenav ul li.page_item ul li.page_item a, .sidebar ul li#pages ul li.page_item ul li.page_item a{
	font-weight: normal;
}

.sidebar ul ul li{
	margin: 0;
	border: 1px solid #666666;
	padding: 5px;
	line-height: 24px;
}

.sidebar ul ul ul li{
	border: 0;
	padding: 0 0 0 10px;
}


/* comments template */

.comments-template{
	margin: 15px 0 0;
	border-top: 1px solid #666666;
	padding: 15px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 20px;
	list-style: none;
}

.comments-template ol li{
	margin: 15px 0 0;
	line-height: 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid #666666;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

/* end comments template */

/* wp-calendar */

table#wp-calendar{
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: none;
	line-height: 24px;
}

table#wp-calendar caption{
	padding: 10px 15px;
}

table#wp-calendar th{
	padding: 2px;
	text-align: right;
	vertical-align: top;
	background: #eee;
}

table#wp-calendar td{
	padding: 3px;
	text-align: right;
}

table#wp-calendar tfoot td{
	text-align: center;
}

/* end calendar */




#footer{
	float: left;
	width: 760px;
	border-top: 2px solid #000000;
	margin: 20px 0 0;
}

#footer p{
	padding: 5px 0;
	color: #666666;
}

/* david's custom */

#navcontainer {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 40px;
	width: auto;
}

.navlist ul
{
padding: 0;
margin: 0;
}

.navlist li
{
list-style: none;
margin: 0;
padding: 0 0 0 10px;
text-align: right;
display: inline;
}

.apparelnav{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png') center no-repeat;
	padding: 0 44px 0 44px;
	text-decoration: none;
}

.noapparelnav
{
	background: url('http://solven.iambaldwin.com/assets/apparelgreen.png') center no-repeat;
	padding: 0 44px 0 44px;
	text-decoration: none;
}

a:hover.noapparelnav
{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png') center no-repeat;
	padding: 0 44px 0 44px;
	text-decoration: none;
}

HTML (header.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
<body><div id="container">

	<div id="header">

		<div id="site_title">
		<a href="http://solven.iambaldwin.com/" title="Home">
		<img src="http://solven.iambaldwin.com/assets/solven-3.png" alt="Solven" />
		</a>
		</div>

<div id="navcontainer">
<ul class="navlist">
<li class="navlist"><a href="http://solven.iambaldwin.com/apparel"<?php 
if (is_page('4'))
{ 
echo " class=\"apparelnav\"";
}	else {
	echo " class=\"noapparelnav\"";
}
?>>
<span>&nbsp;</span></a>
</li>
</ul>

</div>

	</div>

	<div id="page">

Thanks for your help!
-Baldwin

The height problem is coming from this:

.noapparelnav {style.css (line 406)
background:transparent url(http://solven.iambaldwin.com/assets/apparelgreen.png) no-repeat scroll center;
padding:0pt 44px;
text-decoration:none;

What you've told it there is to have ZERO padding on the top and bottom, and 44px padding to the left and right.
Change it to padding: 20pt 40px; and it will open up and stop cutting off the image.

I made the change, but the image is still cropped the same amount.

Is the container not big enough?

Thanks for all your help!
-Baldwin

nevermind, it seems that this is just a problem in Safari.

hmmm...
-Baldwin

Here is what I found:

IE7: No
Safari 2: No
Safari 3 Beta: No
Firefox: Yes

So, basically, it will not work consistently.

I guess I could use Javascript, what is the best image rollover script?
I was thinking about how I could make this work for wordpress and I think I know how to do it.

Thank you for your help!
-Baldwin

I made the change, but the image is still cropped the same amount.

You do NOT NEED javascript !
I copied your code and added what I gave you, it worked, although I have no way of testing on Safari. You have multiple places in your CSS where height, margin and padding for those elements are defined. You need to address each one and I'd start by zeroing everything out and start first by adding back in padding for the top and bottom on the <a>'s for that list.

This will work all by itself:
#navcontainer {
position: absolute;
right: 0;
bottom: 0;
height: 40px;}
By the way, position:absolute is so not necessary for that.

You can download the Safari Beta for Windows here:
http://www.apple.com/safari/

the position: absolute; is required, otherwise the button goes straight up to where the logo is.
Adding the "height" attribute didn't change anything.

I did away with putting it in a list format and changed it to a div. This made it work in Safari and Firefox, but not in IE.
AHHHHHHHHHHHH

Here is the Code

CSS

/*  
Theme Name: Goopress
Theme URI: http://www.wpdesigner.com/2007/02/08/goopress-theme/
Description: Goopress Wordpress theme created by Small Potato.
Version: 1.0
Author: Small Potato
Author URI: http://www.wpdesigner.com/

*/

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #333333;
	color: #ffffff;
}

h1, h2, h3, h4, h5, h6{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

a{
	text-decoration: underline;
	color: #33cc33;
}

a:hover{
	text-decoration: none;
	color: #ffffff;
}

a img{
	border: 0;
}

address, dl, p{
	padding: 15px 0 0;
}


blockquote{
	margin: 15px 0 0;
	background: #666666;
}

blockquote p{ padding: 15px; }

blockquote blockquote{
	margin: 15px;
	background: #666666;
}

code{
	background: #666666;
}

dt{ font-weight: bold; }

dd{ padding: 0 0 0 15px; }

hr{
	clear: both;
	margin: 15px 15px 5px 15px;
	border: 0;
	height: 1px;
	text-align: left;
	background: #666666;
	color: #ffffff;
}


/* Modified image styles of WordPress Default Theme, Kubrick */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	margin: 0 0 2px 7px;
	padding: 4px;
	display: inline;
}

img.alignleft {
	margin: 0 7px 2px 0;
	padding: 4px;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}

.entry img{
	border: 1px solid #ccc;
}

/* end image styles */

input, textarea{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 2px;
}

input#s, input#author, input#email, input#url, textarea#comment{
	padding: 3px;
	background-color: #333333;
	color:#ffffff;
	border: 1px solid #666666;
}

input#author, input#email, input#url{
	margin: 0 5px 0 0;
}

pre{
	width: 90%;
}

small{
	font-size: 12px;
}

#container{
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

#header{
	float: left;
	width: 760px;
	padding: 0;
	position: relative;
}

#site_title{
	float: left;
}

#site_title h1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: normal;
	color: #ffffff;
}

#site_title h1 a{
	color: #33cc33;
}

#site_description{
	float: left;
	width: 700px;
	font-size: 16px;
}

#page{
	float: left;
	width: 760px;
}

.narrowcolumn{
	float: left;
	width: 540px;
	margin: 0 20px 0 0;
	display: inline;
}

.widecolumn{
	float: left;
	width: 760px;
	display: inline;
}

.post{
	padding: 20px 0;
}

.postdate{
	padding: 5px 0 0;
	font-weight: bold;
	color: #666666;
}

.entry{
	line-height: 20px;
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
	border: 0;
	padding: 15px 0 0;
	font-weight: bold
}

.entry h1{
	font-size: 30px;
	font-weight: normal;
	line-height: 36px;
}

.entry h2{
	font-size: 18px;
}

.entry h3{
	font-size: 16px;
}

.entry  h4{ font-size: 14px; }

.entry h5{ font-size: 12px; }

.entry h6{ font-size: 11px; }

.postinfo a{
	color: #33cc33;
}

.postinfo a:hover{
	color: #ffffff;
}

.browse{
	border-top: 2px solid #666666;
	padding: 5px;
}

.sidebar{
	float: left;
	width: 200px;
}

.sidebar ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar ul li{
	margin: 20px 0 0;
	padding: 0;
}

.sidebar ul li#search input{
	margin: 0 0 5px;
}

.sidebar ul li h2{
	padding: 5px;
	background: #333333;
}

.sidebar ul li.pagenav h2, .sidebar ul li#pages h2{
	border-top: 2px solid #802;
	background: #333333;
	color: #fff;
}

.sidebar ul li.pagenav ul li.page_item a, .sidebar ul li#pages ul li.page_item a{
	font-weight: bold;
	color: #000;
}

.sidebar ul li.pagenav ul li.page_item ul li.page_item a, .sidebar ul li#pages ul li.page_item ul li.page_item a{
	font-weight: normal;
}

.sidebar ul ul li{
	margin: 0;
	border: 1px solid #666666;
	padding: 5px;
	line-height: 24px;
}

.sidebar ul ul ul li{
	border: 0;
	padding: 0 0 0 10px;
}


/* comments template */

.comments-template{
	margin: 15px 0 0;
	border-top: 1px solid #666666;
	padding: 15px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 20px;
	list-style: none;
}

.comments-template ol li{
	margin: 15px 0 0;
	line-height: 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid #666666;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

/* end comments template */

/* wp-calendar */

table#wp-calendar{
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: none;
	line-height: 24px;
}

table#wp-calendar caption{
	padding: 10px 15px;
}

table#wp-calendar th{
	padding: 2px;
	text-align: right;
	vertical-align: top;
	background: #eee;
}

table#wp-calendar td{
	padding: 3px;
	text-align: right;
}

table#wp-calendar tfoot td{
	text-align: center;
}

/* end calendar */




#footer{
	float: left;
	width: 760px;
	border-top: 2px solid #000000;
	margin: 20px 0 0;
}

#footer p{
	padding: 5px 0;
	color: #666666;
}

/* david's custom */

#navcontainer {
	position: absolute;
	right: 0;
	bottom: 0;
}


.navitem
{
margin: 0;
padding: 0 0 0 10px;
overflow: visible;
}

.apparelnav{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png') center no-repeat;
	padding: 20px 44px;
	text-decoration: none;
}

.noapparelnav
{
	background: url('http://solven.iambaldwin.com/assets/apparelgreen.png') center no-repeat;
	padding: 20px 44px;
	text-decoration: none;
}

.noapparelnav:hover
{
	background: url('http://solven.iambaldwin.com/assets/apparelwhite.png') center no-repeat;
	padding: 20px 44px;
	text-decoration: none;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
<body><div id="container">

	<div id="header">

		<div id="site_title">
		<a href="http://solven.iambaldwin.com/" title="Home">
		<img src="http://solven.iambaldwin.com/assets/solven-3.png" alt="Solven" />
		</a>
		</div>

<div id="navcontainer">
<div class="navitem"><a href="http://solven.iambaldwin.com/apparel"<?php 
if (is_page('4'))
{ 
echo " class=\"apparelnav\"";
}	else {
	echo " class=\"noapparelnav\"";
}
?>>
&nbsp;</a>
</div>

</div>

	</div>

	<div id="page">

Thanks for all of your help!
-Baldwin