A common clearfix hack is the „Micro clearfix hack“ from Nicolas Callagher. Its main idea is to put an unvisible block element before and after each element that should be cleared by using CSS pseudo elements. This takes away the need of inserting such elements via HTML (<div> e.g.). A CSS attribute clear:both is added to the :after elements to let the hack do its work.
Normally this would work flawlessly. The Firefox browser however may have troubles if the attribute vertical-align:baseline is used for table cells and if one of these cells contains such a „clearfixed“ element. That results in a misalignment.
Example
Here is a little table with one row and two cells (dark and lighter blue). The right column contains a div element – background light gray. The expected look is this:
(Chrome, Version 37.0.2062.120 (64-bit) on openSUSE 12.3, for example)
But the Firefox presentation is misaligned:
(Firefox ESR, Version 31.1.0 (64-bit) on openSUSE 12.3)
HTML:
<html> <head> <title></title> <meta content=""> <link type="text/css" href="style.css" rel="stylesheet"></link> <style></style> </head> <body> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="first-cell"> First cell </td> <td class="second-cell"> <div class="container clearfix"> Second Cell </div> </td> </tr> </tbody> </table> <body> </html>
CSS stylesheet:
/* Problematic part */
td {
vertical-align: baseline;
}
.clearfix:after, .clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* Just for styling */
td {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
}
.first-cell {
width: 160px;
background-color: #2c4870;
color: #ffffff;
}
.second-cell {
width: 300px;
background-color: #61728b;
}
.container {
width: 250px;
background-color: #dddddd;
}
The highlighted lines show the problematic parts.
To observe such a misalignment not all cells of a row need to be formatted like this – minimum two cells with vertical-align:baseline are required and one of them must contain the clearfixed element.
How to avoid this problem
In order to avoid this problem you have two choices.
Either you replace display:table by display:block. The clearfix hack will work with the latter as well. Only problem would be that this variant doesn’t hinder the collapsing of margins of child elements of such a clearfixed block element.
Or you just set baseline alignment aside in this case. If you really need a baseline alignment, maybe you can work with some nested elements. I didn’t try that.
Sometimes you can’t avoid the problem, because stylesheet attributes of frameworks like Bootstrap are mixed with such attributes of other codings like plugins. What then? In this case, the following paragraph might be of help.
A real-life example: SyntaxHighlighter
Based on this a flaw may be observed when using the SyntaxHighlighter Evolved plugin in combination with Bootstrap-based themes within a WordPress installation. Firefox renders with a misalignment:
Analysing the problem
Bootstrap uses the CSS class container in combination with the Micro clearfix hack. See this excerpt from the bootstrap.css file (taken from version 3.1.1):
... /* some lines left out intentionally */
.container:before,
.container:after,
... /* some lines left out intentionally */
.modal-footer:after {
display: table;
content: " ";
}
The problem is: SyntaxHighlighter uses the same CSS class for div elements contained in the table cells of the second column where the code lines appear (in the first column the numbering is situated, if used). Thus the clearfix hack is mixed-in (of course the clear:both attribute is set also, but that doesn’t matter for the issue).
Additionally the CSS attribute vertical-align is set to baseline for all cells of this table.
That together results in the observed misalignment.
Fix
Overriding the display:table attribute with display:block just for these code line elements will do it as a workaround:
.syntaxhighlighter .code .container:before {
display: block;
}
Put this CSS snippet in a relevant stylesheet of your theme, style.css in the theme’s root directory e.g., and you are done.
Maybe you need an !important directive for the attribute display:block. But I didn’t need it – and normally it es better to avoid it.