1

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.

mllnd
  • 555
  • 3
  • 5
  • 16

1 Answers1

3

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.

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • Oh, I forgot to point out that I'm not using Bootstrap 3.0, so that solution probably won't help much. – mllnd Oct 12 '13 at 17:02
  • 1
    @maku Can you please reproduce the issue into a jsfiddle? – Ionică Bizău Oct 12 '13 at 17:03
  • http://jsfiddle.net/crz5e/ Basically, I need the big Font Awesome icons to sit exactly ontop of the h1. (with just about 20px between them) – mllnd Oct 12 '13 at 17:25
  • Thanks for your help, John, but now it is the other way around - looks all good in Firefox, but messed up in Safari :/ – mllnd Oct 12 '13 at 19:37
  • @maku If you are sure that it's a Safari issue, it would be good report it in Safari... Until it will be fixed you can make a check: [`if (safari) { $(...).css("margin-top", "20px") }`](http://stackoverflow.com/a/7944490/1420197). That would be a way to solve the issue. – Ionică Bizău Oct 13 '13 at 05:24