Question

This is a strange CSS issue that I’m hoping someone can shed some light on…

I’m using Twitter Bootstrap and I’m seeing some very odd float/clearing behaviour. I have a right floated div and a form-horizontal in the main content. The second form field seems to clear below the floated div for no good reason. Going through all the HTML elements and the CSS declarations it’s a strange property that is causing this to happen. I have reduced it down to a single CSS declaration:

 .control-group::before, .form-horizontal .control-group::after {
   display: table;
   content: "";
   line-height: 0;
 }

Specifically, the content: “”; If you disable this one declaration, it floats up with the first field and all is well.

I have created a JS fiddle to demonstrate: http://jsfiddle.net/whiteatom/UJ89p/1/embedded/result/

With the source code: http://jsfiddle.net/whiteatom/UJ89p/1/

Is this by design? W3 spec? Is this specific to only some browsers (tested in Chrome, Safari and FF on MacOS)? What is the Bootstrap team trying to accomplish with this empty string property? Can I override it without editing the bootstrap CSS files?

Cheers,

Answer 1

Is this by design?

Yes.

W3 spec?

Here it is. An empty string is still considered content; if you want to completely prevent a box from being generated, you need to use content: none instead. Without modifying the Bootstrap files, you should be able to just add the following rule to your own stylesheet (overriding the content: "" declaration):

/* Single-colon pseudo-elements for consistency with Bootstrap's IE8 compat */
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    content: none;
}

Note that the float is being cleared because the ::after pseudo-element is being used as a clearfix. The clear declaration is residing in a separate rule elsewhere in the Bootstrap stylesheet:

.form-horizontal .control-group:after {
    clear: both;
}

By adding the proper content: none declaration it will prevent the pseudo-element from being rendered at all, thereby preventing clearance.

Is this specific to only some browsers (tested in Chrome, Safari and FF on MacOS)? What is the Bootstrap team trying to accomplish with this empty string property?

Some very old versions of Chrome, Safari, Firefox and Opera don’t support content: none, and instead incorrectly treat content: "" (with the empty string) as having no content. The versions that do support content: none treat both values correctly, as does IE8 and later.

I’m guessing by using the empty string, they’re trying to account for these older browsers. If that’s the case, it should have been overridden with content: none so newer versions will use the correct value, like this:

.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    display: table;
    content: "";
    content: none;
    line-height: 0;
}

If so — and that’s my best guess — then a bug report may be in order.