Home/ Questions/Q 3667292
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:58:57+00:00

I am fairly proficient in CSS but now I am running into a very

  • 0

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:

correct rendering

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:

incorrect

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe that Chrome is automatically closing your <p> tag, because of the way chrome interprets the <figure> tag. If you look at the definition of the figure tag, you’ll see it’s supposed to be outside the flow of the content, and thus should not be contained within a paragraph. Try using a different item than figure, and I bet it will work.

    You can read more about flow content here

    • 0