views:

456

answers:

4

I'm trying to have a kind of dirty underline effect using a string of hyphens, but I want it slightly closer to the multi-line title than the line-height.

Negative margin works a treat in FF but no joy in IE?

<p>a multiline title here<p><p style="margin: -7px 0px 10px 0px;">-----------------------------------------------------------------------------</p>
A: 

display: block may fix it, buy you may need to use a div or span bacause IE doesn't treat 'p' the same as ff does

WalterJ89
A: 

Well first, I believe you have some styles that you are not showing as the default p element has some bottom margin.

However, you have contradicting style with the -7px bottom margin and the 10px bottom margin. If you remove the 10px it will move up in IE7,8

Making it this works for me:

<p>a multiline title here<p><p style="margin: -7px 0px 0px 0px;">-----------------------------------------------------------------------------</p>
Dustin Laine
+2  A: 

Better use a border-bottom of 1px dashed black. This achieves the desired effect and works in all browsers from IE6 and up and you don't need to worry about the width (or at least can control it using just CSS). E.g.

<p style="border-bottom: 1px dashed black;">a multiline title here</p>

(and preferably refactor the style into a CSS class)

BalusC
+1 I agree, but as he stated he is looking for a "dirty" method to bring it closer.
Dustin Laine
haha, i don't like css dashes!
Haroldo
A: 
Haroldo