I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google
Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors). Here is some example markup:
<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>
This markup may look a litte strange to you, there's a few things you should know:
I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and
Chrome can render this tag for sure.
Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image.
All of this is working fine in Firefox, and actually also in
Chrome. The correct rendering can be seen in the following image:
It renders like that in both Firefox and
Chrome. Here comes the problem, if I place such a button within paragraph tags <p></p> this is what happens in
Chrome only:
Notice how the button is ripped apart? Only in
Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up.
Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question:
Edit: link to live page removed, was only temporary for problem inspection.
