Nested Underline Span

rob.diazmarino · 31st May 12, 03:14 PM

Hi guys,

I discovered an interesting quirk that is causing me grief.

HTML Code:

<p><span style="text-decoration: underline;">Hello <span style="text-decoration: none;">world</span>!</span></p>

Even though the nested span should remove underlining on "world", the whole text will have the underline style applied. I know it would be easily fixed by not nesting the spans and having them side by side. The problem is, it is critical that I keep this nested structure. Is there any other style I can apply to remove the underlining on "world"?

Much appreciated.

chrishirst · 31st May 12, 05:38 PM

Quote:

The problem is, it is critical that I keep this nested structure.

Why??

A span is an inline element, "nesting" them is not usually a "critical" requirement for a layout.

Do we get to see ALL the code so we can see what other rule may be cascading to the span or may have precedence in the flow.

rob.diazmarino · 31st May 12, 05:48 PM

I'm working with someone else's (complex) code that generates it this way. Changing the styles is easy, changing the structure that it generates is another matter. So I want to make sure there is nothing I can do CSS wise before I dive in to try to rearrange the tag structure.

This nested approach works for bold and italic, it's just underline that's the problem, even in the simplest scenario - no additional style sheets that could be interfering.

HTML Code:

<html>
<head></head>
<body>
<p><span style="font-weight: bold;">Bold <span style="font-weight: normal;">works</span>!</span></p>
<p><span style="font-style: italic;">Italic <span style="font-style: normal;">works</span>!</span></p>
<p><span style="text-decoration: underline;">Underline <span style="text-decoration: none;">no workies</span>!</span></p>
</body>
</html>

chrishirst · 31st May 12, 07:05 PM

Quote:

I'm working with someone else's (complex) code that generates it this way.

Ok.

It's an interesting little glitch/effect and not one I have previously come across, and a couple of minutes testing shows it happens with all line type text-decoration values and in all browsers as well, which does suggest that it is intentional.

Hmmm??? Calls for some investigation methinks.

chrishirst · 31st May 12, 07:22 PM

Well, excellent question, mainly because I've learnt something in researching the cause.

http://www.w3.org/TR/CSS21/text.html...striking-props

Quote:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline

So it is a specified behaviour, and evidence that an old dog can learn new tricks.

rob.diazmarino · 31st May 12, 07:53 PM

Thanks Chris! It's good to know why this is happening, even if I can't get around it. Time for me to dive into that complex code and whip those spans into shape.

31st May 12, 03:14 PM	#1
rob.diazmarino WLC Member Join Date: May 2012 Posts: 3	Nested Underline Span Hi guys, I discovered an interesting quirk that is causing me grief. HTML Code: <p><span style="text-decoration: underline;">Hello <span style="text-decoration: none;">world</span>!</span></p> Even though the nested span should remove underlining on "world", the whole text will have the underline style applied. I know it would be easily fixed by not nesting the spans and having them side by side. The problem is, it is critical that I keep this nested structure. Is there any other style I can apply to remove the underlining on "world"? Much appreciated.

31st May 12, 05:48 PM	#3
rob.diazmarino WLC Member Join Date: May 2012 Posts: 3	Re: Nested Underline Span I'm working with someone else's (complex) code that generates it this way. Changing the styles is easy, changing the structure that it generates is another matter. So I want to make sure there is nothing I can do CSS wise before I dive in to try to rearrange the tag structure. This nested approach works for bold and italic, it's just underline that's the problem, even in the simplest scenario - no additional style sheets that could be interfering. HTML Code: <html> <head></head> <body> <p><span style="font-weight: bold;">Bold <span style="font-weight: normal;">works</span>!</span></p> <p><span style="font-style: italic;">Italic <span style="font-style: normal;">works</span>!</span></p> <p><span style="text-decoration: underline;">Underline <span style="text-decoration: none;">no workies</span>!</span></p> </body> </html>

31st May 12, 07:53 PM	#6
rob.diazmarino WLC Member Join Date: May 2012 Posts: 3	Re: Nested Underline Span Thanks Chris! It's good to know why this is happening, even if I can't get around it. Time for me to dive into that complex code and whip those spans into shape.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode