Help with underline image for text css

Hi there, am having problems creating an underline image for a link.

I would like for it to look like this. Note that for this example "-----" is an underline image that I have created.

Text Link
-------------------------------------- "200px wide x 2px high"

With this CSS

a.HEAD9:link {
	color: #ffffff;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	font-weight: bold;
	background: url(../images/1.jpg) repeat-x 100% 100%;
	padding-bottom: 4px;
	white-space: nowrap;
}

Code (markup):

Text Link
-------- "the underline image that I see is only as wide as the text link and about 1px high.

Any suggestions?

 

well for this purpose make the target links as blocks and apply required width and height for proper display of the background image.

 

You could just put an <hr> underneath the link and define the <hr> properties in your css file, that's what I would do

 

Actually display block is good if you want to use a bg image. One thing tho line-height: 1.5; wrong in two ways first 1.5 what ? px, pt, etc.. and 2 your font size is 14px so the line should be a minimum or 14px. Line height will not draw a line. If you want just a line at the bottom of the box use "border-bottom:" with a fixed container height.

And whats this repeat-x 100% 100%?

Also it's better not to use bottom padding unless you want a space between the bottom content and your font to push down lower containers. Otherwise use a fixed height instead. Different oses display fonts differently since sometimes there missing them (bigger or smaller) and this can break your layout or make it render differently.

 

Well, I'd need to see ALL of your anchor CSS, not just your :link, though I suspect if you are using :link you are probably setting all of your properties in a redundant fashion... much less that 'head9' reeks of wysiwyg vaguaries.

In any case, 007c is correct in pointing out that 100% 100% for positioning is made of /FAIL/ since 100% from the top with only repeating on the X axis SHOULD position your image completely outside the container, making it not show.

A quick rewrite of your desired CSS comes up with:

.HEAD9 {
	padding-bottom:4px;
	white-space: nowrap;
	text-decoration: none;
	font:bold 14px/21px arial,helvetica,sans-serif;
	color:#FFF;
	background:url(../images/1.jpg) bottom left repeat-x;
}

Code (markup):

Assuming I understand what it is you are trying to do... though that uptree link also makes me wonder if you've got issues with your directory structure.

 

Thanks I ended up trying the suggestion but the underline spread behind the text creating a background instead.

The following works in Explorer (image attached) but only half works in Chrome or Firefox (image attached).

a.HEAD:link { 
color: #ff6600;
font-size: 14px;
text-decoration: none;
font-weight: bold;
white-space: nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
padding-bottom: 5px;
width: 190px;
background-image: url(../images/1.jpg);
background-repeat: repeat-x;
background-position: 100% 100%;
}

Code (markup):

Any suggestions?