Difference versus for CSS?

Question

Still trying to get the navigation control of a new site working the way I want.

I simplified my problem to this piece of code:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style>
        span { display: inline-block; height: 50px; vertical-align: top; background-color: Yellow; } 
        span.block { background-color: Red; width: 15px; }
    </style> 
</head> 
<body>
    <span class="block"></span><span>A B C D</span>
    <span class="block"></span><span>E F G H</span>
</body> 
</html>

This code renders to:

enter image description here

However, the spans are generated from an XSLT in Umbraco. Even if the source states it generates like this:

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

This code renders to:

enter image description here

Why is it doing this?

What's the difference between and ?

PS: In the real thing the XSLT renders to a ul with menu items. The block span is there for layout purposes (background image); that's why it has dimensions but no content.

score 8 · Accepted Answer · answered Feb 07 '12 at 22:56

8

Self closing span tags don't exist in HTML, the browser will interpret it as invalid HTML and guess what you meant.

In this case, it is probably treating this:

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

as:

<span class="block"><span>A B C D</span>
<span class="block"><span>E F G H</span></span></span>

You can confirm that by right clicking on your test page, then selecting Inspect Element to use the web tools, or Firebug if you have that installed. The inspector will show you the HTML tree as the browser has interpreted it.

answered Feb 07 '12 at 22:56

Douglas

36,802
9
76
89

Not always true - it dependes on the DOCTYPE - see http://stackoverflow.com/questions/2816833/can-a-span-be-closed-using-span. For a bit of fun, try setting a height on the span in the original question, rather than the width, and look at the very random behaviour (in IE at least!). Well, it's not really random as block level elements shouldn't be rendered if they are empty unless they have a height, but then the fact that it's a span complicates matters. Writing HTML parsers must be fun! – dash Feb 07 '12 at 22:59
@dash: that example tells the browser to treat the page as xhtml instead of html, so it could be a solution if NetWave can't fix the XSLT. I'd want to double check the browser support before depending on that, I'd prefer an html5 solution. – Douglas Feb 07 '12 at 23:04
1

A simple solution is probably to change the XSLT such that it renders or similar. Without seeing the XSLT it's hard to know. Or change those elements to DIV's, which, when empty but have a height specified, behave in the way the OP seems to want. – dash Feb 07 '12 at 23:05
1

Douglas is correct! The spans get nested like in his example, which explains why it renders the way it does. everything makes sense now! I will look into the XSLT... Thanks all. – NetWave Feb 08 '12 at 08:02

score 0 · Answer 2 · answered Feb 08 '12 at 02:07

0

I can't understand why you would need to use a  block for layout purposes? Why not just add a class to the  (or probably more appropriately a <div>) and apply left-padding and a background image?

.my-class {
    padding-left: 15px;
    background: url(images/my-image.png) no-repeat 0 50%;
}

answered Feb 08 '12 at 02:07

justrhysism

1,125
10
16

Actually, I'm already doing this but I need the same effect on the other side. Think of a tab with rounded corners that has a variable width. With your code I can only show one corner. The span is my example is used for the other corner. – NetWave Feb 08 '12 at 08:05
Depending on the importance of rounded corners in your design (sometimes we haven't a choice), however I've been lucky enough to convince some clients to not get hung up on – justrhysism Feb 08 '12 at 20:59

Difference versus for CSS?

2 Answers2