CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Styphon
Styphon

Reputation: 10447

Why does row-fluid:before and row-fluid:after have a height?

On my website (click), one of many on which I've used twitter-bootstrap v2.3.2, for some reason the row-fluid:before, row-fluid:after, clearfix:before and clearfix:after content all have a width of 9px and a height of 8px.

No other sites have this issue and the height ignores height: 0 !important and the only thing that can get rid of it is to remove the content entirely, which breaks the clearfix.

What is causing this? How can I get rid of it? I can't find anything on Google remotely related to this and it's been pissing me off all day!

I can't replicated this issue, I've tried copying a row and all it's content into jsfiddle, then link to every style sheet the website has included and it's fine, the :before content has no height and 1px width, the same as every other site I have.

After eliminating css files by commenting them out I've found out it's something to do with main.css.

Picture of the bug occurring in Chrome (replicable in Firefox too). Picture of this occurring in Chrome (replicable in Firefox too)

Upvotes: 0

Views: 221

Answers (1)

DavidG
DavidG

Reputation: 119017

The culprit is in main.css, you have some border-spacing applied, remove this and it goes away:

.home-content {
     border-spacing: 4px;
}

Upvotes: 1

Related Questions