<p> inside the edit button causes strange rendering

[pmario]

FF13 ubuntu 12.04

The "edit" button DOM looks like this:

<button class="btn btn-mini">
  <p>edit</p>
</button>

The assigned CSS for <p> is

p {
    margin: 0 0 9px;
}

The margin-bottom 9px causes the button to look "bloated" in Gecko based brwosers. Is there a paragraph needed inside a button? [1]

[1] http://dev.w3.org/html5/spec/the-button-element.html#the-button-element

[Jermolene]

Yes, this is a bug; the intention is that the content of the button would be parsed as a run, and so there wouldn't be a <p> tag. There are actually a number of block vs. run parsing issues that you may run into.

Parenthetically, it's a bit odd that we're seeing different layout in Chrome and Gecko.

[pmario]

Since I mainly use FF, I'll stumble upon them :)

[Jermolene]

Jolly handy. I tend to do most testing in Chrome, but do flick over to Firefox, Opera and Safari from time to time. I've never tested on IE9/10, which I probably should

[pmario]

IE9 had a lot of problems (it crashed) with my pmario space in its early days. It looks better now. But testing with IE I need to reboot the PC and my win7 doesn't have a propper dev setup. .... yes, we probably all should.