css and bootstrap errors with Firefox and Explorer

Question

I have this site that use bootstrap. It is developed using Chrome for tests (my negligence) I can't understand why in firefox and i.e. this works very bad!! Can someone give me some directions of what I have to change in my css to have the website compatible with every browser?

for example:

• the menu on top is invisible (no background image) and isn't fixed
• titles like 'Presentazioni' isn't in the middle of the page

• images in the 'Presentazioni' and 'La Famiglia' paragraph are too big --> resolved putting instead of

   <img src="..." width="100px;">
   <img src="..." style="width: 100px;">
  

• all text isn't in the middle of the page

• the menu on bottom is completely different

Is there any tool I can use to find css properties that are incompatible with firefox and ie?

Answer 1

Your main problem is in your themes/css/style.css file. Line 23:

h1{padding: 0 0 44px; font-weight: 200;font-size: 64px;line-height: 56px;color: #464646;margin: 0;font-family: 'font-family: 'Special Elite';text-rendering: optimizelegibility; text-transform: uppercase;}

font-family is repeated twice and you have a single quote before the second font-family, thats commenting the whole code. Correct that and let's see what happen, I can't try it.

Anyway, you should replace your navbar code with this one:

<div class="navbar navbar-fixed-top" id="headerSection">
    <div class="navbar-inner" style="background: url(imm/parquet.jpg);background-color: grey; background-repeat: no-repeat; border-bottom: 1px solid #dedede; padding: 8px 0 0;">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- h1 class="brand cntr">TEVAD</h1-->
            <div class="nav-collapse collapse" style="height: 0px;">
                <ul class="nav">
                    <li class="active"><a href="#Home">Home</a></li>
                    <li><a href="#ChiSono">Presentazioni</a></li>
                    <li><a href="#Prodotti">La Famiglia</a></li>
                    <li><a href="#carouselSection">Gallery</a></li>
                    <li><a href="#VideoGallery">Video</a></li>
                    <li><a href="#Contatti">Contatti</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Try to remove the inline styles and define them in the css file. Do not fix the navbar from the css file, use the .navbar-fixed-top class instead. Read the bootstrap documentation, you are not using the correct structure nor the correct classes: Bootstrap navbar.