Margin/padding bottom doesn't work inside <li>

Luxe · January 8, 2012, 10:22pm

I have a navigation list and I’m trying to move a graphic around inside of it. I’ve tried margin and padding but neither have worked.


<ul class="menu">

<?php echo $PPTDesign->LAY_NAVIGATION(); ?>

<li><a href="http://www.applenation.com/submit" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('add','','http://applenation.com/wp-content/themes/classifiedstheme/themes/classifiedstheme-c1/images/add-hover.png',1)"><img src="http://applenation.com/wp-content/themes/classifiedstheme/themes/classifiedstheme-c1/images/add.png" name="add" width="155" height="50" border="0" id="add" alt=""/></a></li>
 
                            
                </ul>

This displays the graphic inside the list just fine, but it is not positioned correctly. My main problem is I can’t get it to move above the other text inside the list.

Of course I could take a shortcut and do:


<div style="position: static; padding: 2px; padding-left: 20.5cm;">
<a href="http://www.applenation.com/submit" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('add','','http://applenation.com/wp-content/themes/classifiedstheme/themes/classifiedstheme-c1/images/add-hover.png',1)"><img src="http://applenation.com/wp-content/themes/classifiedstheme/themes/classifiedstheme-c1/images/add.png" name="add" width="155" height="50" border="0" id="add" alt=""/></a></div>

That works perfectly because it is not inside an <li> tag, but it’s not valid for that same reason and therefore doesn’t display in IE 7 or earlier.

Thanks,
-Luke

system · January 8, 2012, 10:54pm

Using an image could get messy. It might be easier to have just the navigation tab’s text inside the link and then use a background-image in the <li> to “decorate” it.

system · January 9, 2012, 8:51am

Without seeing the CSS it’s hard to say, but really I would set the images to display:block so they behave properly without any oddball bottom margin or line-height behaviors, set the LI to display:inline and forget trying to set anything on them, and if you really need a second element for style, apply it to the anchor…

THOUGH, I think a lot of your problem stems from that stupid malfing mm_swap javascripted nonsense – it was a bad idea a decade ago, and it has no place on a modern website since that’s basically using javascript to do something CSS can do more efficiently with less code… I would probably leverage some form of gilder-levin image replacement there instead… meaning all you need for HTML is:

set the li to display:inline so their behaviors are a non-issue, set the anchor to display:block and position:relative (probably with a haslayout trigger to fix positioning) and then absolute position the span over the text. That way you have GOOD “images off” graceful degredation. You can then slide the background around for the hover states, or store multiple buttons and slide to the appropriate set, then use overflow on the anchor and move the span for hover states.

See this demo I wrote a while ago for another user:
http://www.cutcodedown.com/for_others/ultranerds/template.html

which does all those buttons (and is capable of even more) using just one image file:

one file == less handshakes, speeding up your page load… as will swinging an axe at that blasted mm_ javascripted nonsense that Adobe really needs to hang their heads in shame over STILL promoting the use of as if it’s still 1998.

Luxe · January 9, 2012, 5:33pm

Thanks for your reply deathshadow. I just used the rollover feature Dreamweaver has, I’m surprised they still include it in Dreamweaver if it causes that many problems. And I’m not even using an old version of Dreamweaver; I have CS5. Anyways, I’ve never used CSS sprites for image rollovers so I’m a bit confused. I got the rollover to work but a little bit of the other image displays next to it:

Here’s my code, CSS:


a.rollover {
	display: block;
	width: 155px;
	height: 50px;
	text-decoration: none;
	background: url("http://applenation.com/wp-content/themes/classifiedstheme/themes/classifiedstheme-c1/images/add-sprite.png");
	background-repeat: no-repeat;
	}

a.rollover:hover {
	background-position: -155px 0;
	background-repeat: no-repeat;
	}

.add {
	display: inline;
	position: relative;
	}

And the HTML:


<li class="add"><a href="/submit" class="rollover" title="add-sprite"></a></li>

Also, how can I define the rollover so It’s just used in this instance because my nav bar uses rollovers and its throwing that off.

Thanks,
-Luke

system · January 9, 2012, 8:14pm

I would have thought it would be easier and more flexible to have Add Classified as text in a link and the button image as a background image for the links’s <li>.

That way you can easily change the navigation tab’s text without having to muck around editing and recreating images. Just some food for thought.

Now I’ll put on my hard hat and hang onto it tightly in case an avalanche of sardonicism from deathshadow60 is triggered

Luxe · January 9, 2012, 8:30pm

Hmm. That’s not a bad idea - but then how would I get the text to change when you scroll over it? I’ve never heard of changing the text on rollover; just the color and such. I would image that would be achieved with some sort of changeText() javascript function?

system · January 9, 2012, 8:37pm

I didn’t realise you wanted to change the text as well. If you mean the words in the text then you could use onmouseover/onmouseout event handlers but then you’ll need a plan B for javascript disabled browsers. If you mean just changing the colour of the text to highlight it when you hover on the tab, then you use css.

Personally, I just try to avoid having to edit/recreate images as much as possible.

Luxe · January 9, 2012, 8:43pm

Yea, I didn’t make it clear but the image rollover I am trying to achieve is the same graphic just with different text.

PaulOB · January 9, 2012, 9:56pm

You could do it with css like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	list-style:none;
	margin:0;
	padding:0;
}
li { display:inline; }
.rollover a {
	float:left;
	width: 155px;
	height: 50px;
	line-height:50px;
	background:#000;
	color:#fff;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
}
.rollover a b { display:none; }
.rollover a:hover { visibility:visible }/*ie6 fix*/
.rollover a:hover b { display:block; }
.rollover a:hover span { display:none; }
</style>
</head>

<body>
<ul>
		<li class="rollover"><a href="#"><span>Normal Text</span><b>Rollover text</b></a></li>
</ul>
</body>
</html>

system · January 9, 2012, 10:04pm

aahhhh, very clever. Your example is a keeper

PaulOB · January 9, 2012, 10:15pm

Thanks - I try my best

system · January 9, 2012, 10:21pm

why would you be changing the text on rollover…
I’d have to see the whole image/button set/menu to weigh in more, but I suspect you’re overthinking things – especially with all the classes for nothing on stuff deeper inside the items. I mean, if it’s in a LI then you have a list… so why does it need a ‘rollover’ class… and if you need a title attribute on what appears to be a menu, there’s something horribly wrong with the content of those anchors. (or in the case of the example HTML you showed, the total lack of actual content).

Which is why I do agree it’s probably better to put the text in there normally over the image… at the very least you should have the text there and the image over it, so images off users (like people on metered data plans) aren’t left out in the cold.

Though from your small picture I would probably just use a simple repeating background under the text, and then do the border and lightly rounded corners with CSS3… IE8 and lower users wouldn’t get the fancy corners; OH WELL.

If you post an image of the complete menu in all it’s ‘states’ (basically make 3 rows) we could better dial in the best solution for you.