Webkit / Blink browsers not respecting display styling on legend tag

Question

Legend Tags in Webkit browsers seem not to accept any styling besides block and none for the CSS display property:

Here's the HTML

<legend>I should display as an inline block</legend>
<div>I should be on the same line</div>

And here's the CSS (put anything other than block or none as display style)

legend {
    display: inline-block;
    background: black;
    color: white;
    -webkit-margin-top-collapse: separate;
}

div {
    display: inline-block;
    background: blue;
    color: white;
}

As you can see in this fiddle, the legend tag will always be styled as a block.

enter image description here

You will also see that despite I applied -webkit-margin-top-collapse: separate, which lets one apply margins to legend tags in webkit despite a quirk, the problem still persists.

I reckon this is a bug although it does not appear in the list of bugs when searching for legend, but does anyone know how to circumvent it?

Not sure how relevant this is to your actual issue, but `` is only valid markup as the first child of a `
` element (and is rendered as the "header" of that element) - which will obey the `display: inline-block;` rule, even in chrome. http://jsfiddle.net/vhNbd/3/ - It is also possible to float the `` element. That said, I agree that it indeed does look like a bug, or at least a webkit quirk. — xec, May 13 '13 at 14:05
@xec You're right, but if you put the div as a sibling inside the fieldset like so http://jsfiddle.net/vhNbd/5/, the `legend` behaves like a `block` again. Posted a [bug report here](https://bugs.webkit.org/show_bug.cgi?id=116031) — Beat Richartz, May 13 '13 at 14:12
Yes, exactly (hence the "no effect in chrome" comment). A minor note about the bug report comment though: floating the element *does not make it accept inline-block* (it just floats, removing the display property when it is floating will have no effect). — xec, May 13 '13 at 14:17
@xec I looked up the Computed styles in the inspector, if a float is applied the display property there is the one defined in the css. Hence my bug report comment. But I see what you mean and you're absolutely right, the element is just floated and therefore behaving the way it is. — Beat Richartz, May 13 '13 at 14:37
That is odd, in my Chrome (Version 26.0.1410.64 m / win8) **Computed styles** still says `display: block;` =/ — xec, May 13 '13 at 14:51

score 2 · Accepted Answer · answered May 13 '13 at 14:04

2

I was able to get the legend and div to go side by side with the following CSS.

legend {
    background: black;
    color: white;
    float:left;
}
div {
    display: inline;
    background: blue;
    color: white;
}

http://jsfiddle.net/vhNbd/4/

answered May 13 '13 at 14:04

Dustin

4,314
12
53
91

Thanks, the only downside is though that with a floated element `vertical-align` won't work. – Beat Richartz May 13 '13 at 14:13
I'm assuming the answer here is "no" but are you able to use an element other than `legend`? – Dustin May 13 '13 at 14:23
I was thinking of that too, since I use a form generation engine (formtastic on rails), it would be a shame and a lot of work to break the semantics just for styling reasons. Meanwhile I will try to float the element and style it, but I'm still hoping for that magic `-webkit-anything` property letting me get a hold of `legend`'s display style. – Beat Richartz May 13 '13 at 14:41
1

You could try going the jQuery/JavaScript route. Try using jQuery `wrap()` and wrap a `span` (or some other element) around the `legend`. Here's my updated jsfiddle... http://jsfiddle.net/vhNbd/7/ – Dustin May 13 '13 at 14:49
Appreciate the help! I'd rather not use javascript / jQuery though. But wrapping the element could be a workaround, as `formtastic` lets me write extensions. – Beat Richartz May 13 '13 at 15:03

Webkit / Blink browsers not respecting display styling on legend tag

1 Answers1