CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mllnd
mllnd

Reputation: 575

What could be wrong with my CSS and HTML? (Using Twitter-Bootstrap and Font Awesome)

I've come across this very weird issue where Safari web browser displays the website a bit differently than Firefox.

I'm trying to set up some large-scaled Font Awesome icons into a Twitter-Bootstrap span4.

The container looks like this on Safari (exactly how I want it to be):

And like so on Firefox:

HTML is here:

<div class="container">
  <div class="row-fluid"> 
    <div class="span4 center front">
      <i class="icon-thumbs-up"></i>
      <div class="showcase">
      <h1>Heading</h1>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">Read more &raquo;</a></p>
      </div>
    </div>
    <div class="span4 center front">
      <i class="icon-thumbs-up"></i>
      <div class="showcase">
      <h1>Heading</h1>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">Read more &raquo;</a></p>
      </div>
   </div>
    <div class="span4 center front">
      <i class="icon-thumbs-up"></i>
      <div class="showcase">
      <h1>Heading</h1>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
      <p><a class="btn" href="#">Read more &raquo;</a></p>
      </div>
    </div>

And custom CSS here for the classes and Font Awesome:

.container .row-fluid .span4 i {
  font-size: 150px;
  color: #777777;
}

.center {
  text-align: center;
}

.front {
  margin-top: 40px;
}

.showcase {
  margin-top: 125px;
}

Edit:

I managed to remove the .showcase bar as John already suggested, but the big Font Awesome icons are still not prefectly alligned. I made another jsfiddle http://jsfiddle.net/crz5e/2/ where I changed the .front class margin-top to 70px.

It looks like this in Safari with margin-top: 70px; added to the .front class

And like this on Firefox with the same CSS.

Upvotes: 1

Views: 439

Answers (1)

Ionică Bizău
Ionică Bizău

Reputation: 113385

I guess you have some cached CSS in your browser. You set a margin-top for .showcase:

.showcase {
  margin-top: 125px;
}

Removing it will fix the issue with the margin.

JSFIDDLE

For Bootstrap 3:

.span* is replaced with .col-md-* in Bootstrap 3.

See the migration instructions.

So, replacing your span4 with col-md-4 would solve the problem.

Upvotes: 3

Related Questions