CSS Underlining
-
I have an issue where some hyperlinks the underline appears 1px closer to the text than normal. This causes problems if there is a hanging character such as (p,q,g,y etc). I can't seem to find a reason for it to happen, as it only happens on some of the links on the page I am working on. Any ideas on where to look?
Matt Newman
-
I have an issue where some hyperlinks the underline appears 1px closer to the text than normal. This causes problems if there is a hanging character such as (p,q,g,y etc). I can't seem to find a reason for it to happen, as it only happens on some of the links on the page I am working on. Any ideas on where to look?
Matt Newman
Fire up Firebug and examine the composite styles on the hyperlink text (or if it only happens in IE, examine the
runtimeStyleproperty... but you'll have to track down the source of the style manually). Pay particular attention to rules that setline-height,font-size, andborder-bottom(yes,border-bottomis occasionally used in place of an underlined font style, and might well interfere with the descents).----
It appears that everybody is under the impression that I approve of the documentation. You probably also blame Ken Burns for supporting slavery.
--Raymond Chen on MSDN
-
Fire up Firebug and examine the composite styles on the hyperlink text (or if it only happens in IE, examine the
runtimeStyleproperty... but you'll have to track down the source of the style manually). Pay particular attention to rules that setline-height,font-size, andborder-bottom(yes,border-bottomis occasionally used in place of an underlined font style, and might well interfere with the descents).----
It appears that everybody is under the impression that I approve of the documentation. You probably also blame Ken Burns for supporting slavery.
--Raymond Chen on MSDN
I guess I should have mentioned it only happens in IE. I don't specify line-height (ever), there is no use of border-bottom, and the same style is used for links that render differently. For example: *snip* <a class="someClass" href="whatever">Some Link</a> *snip* <a class="someClass" href="anotherwhatever">Some Other Link</a> *snip* One of those will display the underline at the correct point, and one won't. The only difference is that they are in different areas of the layout (ie in different divs)
Matt Newman
-
I guess I should have mentioned it only happens in IE. I don't specify line-height (ever), there is no use of border-bottom, and the same style is used for links that render differently. For example: *snip* <a class="someClass" href="whatever">Some Link</a> *snip* <a class="someClass" href="anotherwhatever">Some Other Link</a> *snip* One of those will display the underline at the correct point, and one won't. The only difference is that they are in different areas of the layout (ie in different divs)
Matt Newman
Matt Newman wrote:
The only difference is that they are in different areas of the layout (ie in different divs)
Hmm... The only thing that makes sense to me is that, somehow, the containing DIV is changing applicable styles. Though since you're using
text-decoration: underlinerather thanborder-bottom, it really shouldn't be possible to adjust the position of the underline at all, without changing the font... ...just out of curiosity, are either of the DIVs floated? And is your page in quirks mode? If so, try un-floating it and see if that makes a difference. IE has had some really odd ideas about what float means when it comes to rendering. (but this is the grasping at straws answer, i'm afraid)----
It appears that everybody is under the impression that I approve of the documentation. You probably also blame Ken Burns for supporting slavery.
--Raymond Chen on MSDN
-
Matt Newman wrote:
The only difference is that they are in different areas of the layout (ie in different divs)
Hmm... The only thing that makes sense to me is that, somehow, the containing DIV is changing applicable styles. Though since you're using
text-decoration: underlinerather thanborder-bottom, it really shouldn't be possible to adjust the position of the underline at all, without changing the font... ...just out of curiosity, are either of the DIVs floated? And is your page in quirks mode? If so, try un-floating it and see if that makes a difference. IE has had some really odd ideas about what float means when it comes to rendering. (but this is the grasping at straws answer, i'm afraid)----
It appears that everybody is under the impression that I approve of the documentation. You probably also blame Ken Burns for supporting slavery.
--Raymond Chen on MSDN
Shog9 wrote:
...just out of curiosity, are either of the DIVs floated? And is your page in quirks mode? If so, try un-floating it and see if that makes a difference. IE has had some really odd ideas about what float means when it comes to rendering. (but this is the grasping at straws answer, i'm afraid)
It is not in quirks mode and yes some are floated, some are not. I'm afraid this might end up being one of those things that the client will have just have to deal with. :(
Matt Newman