CODEWITHSUNDEEP
cssfirefoxtwitter-bootstrap
tidileboss
tidileboss

Reputation: 121

CSS - Twitter's Bootstrap 2.x issues with Firefox and IE

I am currently developping a website using twitter Bootstrap as a base. I develop using Chrome and there is no problems on it but when viewing the same page with Firefox, the menu and the content position themselves weirdly, as if there is no space.

You can take a look there: http://www.penthousemontreal.com/ http://penthousemontreal.com/collections/moderne/

What could be causing the trouble?

Upvotes: 1

Views: 1344

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

update

Your are using a top: -100px; (relative position) on the .brand class (the image in your nav bar). The image will still take space in FF / IE on it's original position. Cause the float:left; of this images your content floats on the right side of this 'empty space'. A solution can be found here: CSS using negative relative positioning issue. Replace top with margin-top:

.brand {
    margin-left: 20px !important;
    margin-top: -100px;
    position: relative;
  }

Maybe your bootstrap files are changed / corrupt. You import bootstrap/css/bootstrap.css (and bootstrap-responsive.css) from wp-content/themes/MMS/style.css which seems to be version Bootstrap v2.3.2. When i load your site with //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css the problem is fixed. See: enter image description here

Upvotes: 1

Related Questions