How to create a custom underline?

[Inx51]

Hi!
I want to create a custom underline for a h6-element...the problem is that the "original underline" is way to thick...so I thought that there might be some way to tweak or fake an underline and to create my own underline.
I have tried to simply create a background containing the underline..but the problem is that since the h6-element is treated as a block-elemnt, the underline wont just underline the chars/words, it will underline the whole square-shaped block-element...

So is there anyway to create a custom underline that ONLY underlines the chars/words?

One thing to keep in mind is that I might need to use multiple lines(a text with linebreaks)...and thats where the tricky part comes in if you only want to underline the chars/words..

Any idea how to do this?

Here is a link to the current page:
http://lix.hisvux.se/~mattiasa/Blog/test.php

Thanks in advance!

[coothead]

Hi there Inx51,

place the words that you want underlined in a span element, like this example...

<h3 class="article_headline"><span class="underline">Tesasdasdt</span></h3>

Then change this in your stylesheet...

h3.article_headline {
color:#412900;
font-family:Rockwell;
font-size:35px;
font-weight:normal;
background-image:url(../images/headline_u.gif);
line-height:35px;
width:auto;
}

...to this...

h3.article_headline {
color:#412900;
font-family:Rockwell;
font-size:35px;
font-weight:normal;
line-height:35px;
width:auto;
}
.underline {
background-image:url(../images/headline_u.gif);
background-repeat:repeat-x;
background-position:0 3px;
}

coothead

[Inx51]

Thanks alot :)!

[coothead]

No problem, you're welcome. ;)

[mordauk]

You could make it even simpler, and avoid using an image, by applying a border to your css class.

Example html:

<p>this is underlined text</p>

Accompanying css:


p {
border-bottom: 1px solid #ccc;
}


Then you could play around with the line height and padding to place the border exactly where you want.

[Inx51]

You could make it even simpler, and avoid using an image, by applying a border to your css class.

Example html:

<p>this is underlined text</p>

Accompanying css:


p {
border-bottom: 1px solid #ccc;
}


Then you could play around with the line height and padding to place the border exactly where you want.


Hi! Well Im trying the above..but with a span-element instead of the p-element...but the thing is...that everything works great in FF but in IE it only renders one border/underline for the very first row of each headline..is there any way to get around this?

This is the site and the problem can be seen there:
http://lix.hisvux.se/~mattiasa/Blog/test.php

Thanks in advance!

[rnd me]

Hi! Well Im trying the above..but with a span-element instead of the p-element...but the thing is...that everything works great in FF but in IE it only renders one border/underline for the very first row of each headline..is there any way to get around this?

This is the site and the problem can be seen there:
http://lix.hisvux.se/~mattiasa/Blog/test.php

Thanks in advance!

not really.
inline elements have border issues in old IE. It looks like firefox in IE8...
you can switch it to display:block; overflow:visible; and see if that helps, but it might be hard to make everything fit...

[Inx51]

not really.
inline elements have border issues in old IE. It looks like firefox in IE8...
you can switch it to display:block; overflow:visible; and see if that helps, but it might be hard to make everything fit...

Yeah..I just updated from IE7 to IE8, I figured it might be the problem, since IE7 is a real pain in the ass :mad:...but hey!..atleast its better then IE6 (thumbs up for Microsoft)....well updateing my browser solved it..so now I guess I just need a way to make it work in IE7 for those poor people who havn't updated yet..I will try what you said there :)

Thank you :)

[Tancredi]

by the way a span element is an inline element so if you want the border line to look the same i all browsers add a display:block; to the CSS.