Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Adam Smallman
Adam Smallman
4,182 Points

Div sizes

My site is looking good in Chrome and Safari but when I tested my site in FireFox there are divs at different sizes. Any idea on how I can fix this?

Thanks

5 Answers

Hayden Taylor
Hayden Taylor
5,076 Points

Yea you need a CSS RESET. Each browser has some built in css classes on each element and it usually causes a lot of problems for cross browser support.

Here is a site with a few to pick from --> http://www.cssreset.com/

Just copy the code and place it at the start of the css file or make a separate css reset file and link it in the html before your other style sheets.

James Barnett
James Barnett
39,199 Points

Traditional CSS Resets have issues, these days you should use normalize.css.

James Barnett
James Barnett
39,199 Points

Check out this Treehouse quick tip on using normalize.css as a browser reset

Adam Smallman
Adam Smallman
4,182 Points

Thanks but I have the normalize.css file but for some reason firefox is still resizing a div its strange

James Barnett
James Barnett
39,199 Points

We are going to need to see your code, make a codepen so we can see what is going on.

Adam Smallman
Adam Smallman
4,182 Points

HTML (

        <?php 

$pageTitle = "Contact Me"; include ('inc/head.php'); ?>

      <div class="mid grid_24">

     <div class="textc grid_24">
<h2>For more information regarding my work, a proposal request or other things you would like to share,<br> please feel free to contact me.
    </h2>
<h3>I am also available for freelance. Get in touch or <span><a href="https://www.facebook.com/pages/Adam/226054727574733?ref=hl">Follow me</a></span>.</h3>

</div> <div class="contact_form grid_24"> <form method="post" action="contact_post">

          <table>

              <tr>
               <th>
                  <label for="name">Name</label>
               </th>
                  <td>
                     <input type="text" name="Name" id="name">
                  </td>
              </tr>

                <tr>
               <th>
                  <label for="email">Email</label>
               </th>
                  <td>
                     <input type="text" name="Email" id="email">
                  </td>
              </tr>

               <tr>
               <th>
                  <label for="message">Message</label>
               </th>
                  <td>
                     <textarea type="text" name="message" id="message"></textarea>
                  </td>
              </tr>

              </table>

              <input class="button" type="submit" value="Send">

          </form>

</div>

                      <div class="push"></div>

          <div class="space"></div>


        </div>



        <?php include ('inc/footer.php'); ?>

)

CSS

(

/*! normalize.css - http://github.com/necolas/normalize.css */

/* ========================================================================== HTML5 display definitions ========================================================================== */

/*

  • Corrects block display not defined in IE6/7/8/9 & FF3. */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

/*

  • Corrects inline-block display not defined in IE6/7/8/9 & FF3. */

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/*

  • Prevents modern browsers from displaying audio without controls.
  • Remove excess height in iOS5 devices. */

audio:not([controls]) { display: none; height: 0; }

/*

  • Addresses styling for hidden attribute not present in IE7/8/9, FF3, S4.
  • Known issue: no IE6 support. */

[hidden] { display: none; }

/* ========================================================================== Base ========================================================================== / /

  • 1. Corrects text resizing oddly in IE6/7 when body font-size is set using
  • em units.
  • 2. Prevents iOS text size adjust after orientation change, without disabling
  • user zoom. / html { font-size: 100%; / 1 / -webkit-text-size-adjust: 100%; / 2 / -ms-text-size-adjust: 100%; / 2 */ }

html, body{ width:100%; margin:0; padding: 0; min-height:100%; height: auto; }

.wrap{ height: auto; min-height: 100%; position: relative;

}

.container_24{

height: auto;
min-height: 100%;
position: relative;

}

/* HEAD */

.head{ width:100%; height:4em; background-color:black; border-bottom:2px #a19b88 solid; position:fixed; z-index:1; -webkit-box-shadow: 0 5px 24px 1px rgba(0,0,0,0.8); -moz-box-shadow: 0 5px 24px 1px rgba(0,0,0,0.8); box-shadow: 0 5px 24px 1px rgba(0,0,0,0.8);

}

.footer{ background-color:black; border-top:2px #a19b88 solid; position: absolute;
bottom: 0;
left: 0; width: 100%; clear: height: 3em;

}

.foot_text{ position: relative; margin-left: 11em; top: 1em;

}

.logo{ margin-top:0.70em; text-align:center; height:2.75em; }

.logo a{ color:#ffffff; text-decoration:none; font-family: 'Raleway', sans-serif; }

.head-stuff{ position: relative; z-index:1000;

}

.head_wrap{ position: fixed; z-index:1000;

}

.head-stuff ul{ height:4em; margin-top:-0.50em; text-align:center; float:right; position:relative; left:27em;

}

.f-pic{ width:100%; margin: auto; text-align: center; position: relative;

}

.head-stuff ul li{ display:inline-block; text-align:center; border-right:1px #a19b88 solid; height:0.50em; }

.about { border-left:1px #a19b88 solid; }

.head-stuff ul li a{ text-decoration:none; color:#ffffff; font-family: 'Raleway', sans-serif; }

/* HEAD END */

/* MIDLE HOME PAGE */

.mid{ width: 100%; height: 100%; min-height: auto; margin: auto; margin-top:7em; padding-bottom: 4em;

}

.f-pic{ width:100%; height:auto; text-align:center;

}

.mid h2{ text-align:center; margin-top:1.50em; font-family: 'Raleway', sans-serif; padding-top:1em; width: 100%; position: relative; right: 0.25em;

}

.mid p{ text-align:center; font-family: 'Exo 2', sans-serif; position: relative; right: 0.40em; width: 100%;

}

.icons{

position:relative;
left:20.50em;
        border-bottom:2px solid #a19b88;

}

.icons ul li{ display:inline-block; }

.icons ul { position:relative; left:7.40em; }

/* END MIDLE HOME PAGE */

.some-work{ margin-top:2em;

}

.some-work h2{ font-family: 'Raleway', sans-serif;

}

.some-work ul{ text-align:center; position:relative; right:1em;

}

.some-work ul li{ display:inline-block;

}

.footer p{

    font-family: 'Raleway', sans-serif;
z-index: 10;
color: #ffffff;
font-size: 0.70em;

}

/* work */

ul { margin:0; /CSS reset/ padding:0;/CSS reset/ height:auto; width:auto; display:flex; table-layout: fixed; padding-bottom: 3em;

}


li{
border:0;
margin:0;
padding:2em;
display:table-cell;
      text-align: center;


}

.work ul li img{ display: block; height: auto; width: 100%; }

.view {
width: 100%;
height: auto;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;

}

.view h1 { text-transform: uppercase; color: #ffffff; font-family: 'Alegreya Sans SC', sans-serif; text-align: center; position: relative; font-size: 17px; bottom:4.50em; margin: 10em 0 0 0 }

.view .mask{ width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; text-align:center; }

.view .mask { opacity: 0; background-color: black; transition: all 0.4s ease-in-out; }

.view:hover .mask { opacity: 0.60; } /* end of work */

/* end of home */

/* About Page */

.mid .texta h2{ text-align: center; position: relative; bottom: 1em; font-family: 'Raleway', sans-serif;

}

.mid .texta p{ text-align: center; position: relative; bottom: 1em; font-family: 'Exo 2', sans-serif; padding-bottom: 3em;

} /* About Page end */

/* Portfolio Page */

.midPortfolio{ margin-top:6.50em; }

.midPortfolio h2{ text-align: center; font-family: 'Raleway', sans-serif;

}

.midPortfolio .work li{ text-align: center; display: inline-block; } .midPortfolio .work{ width: 960px; text-align: center; display: inline-block; }

/* Portfolio Page end */

/* contact Page */

.textc{ margin-top:-1em; text-align:center; z-index:1000; }

.textc h2{ font-family: 'Raleway', sans-serif; font-size:1.2em; }

.textc h3{ font-family: 'Raleway', sans-serif;

margin-top:1em;
font-size:1.2em;

}

.textc h3 span{ font-family: 'Alegreya Sans SC', sans-serif;

margin-top:3em;
font-size:1.2em;

}

.contact_form table tr th label{

font-family: 'Raleway', sans-serif;

}

.contact_form{

margin-top: 3em;
position: relative;

}

.contact_form table{ width: 50%; margin: auto;

}

.contact_form table input{ width: 35em; height: 2em; margin: auto; padding-top: 1em;

}

.contact_form table textarea{ width: 35em; height: 20em; margin: auto;

}

.contact_form .button{ width: 40%; margin-left: 21.55em; margin-top: 1em; border: 0.20em solid #696969; background: #a19b88; color: #FFF; -webkit-border-radius: 2px; border-radius: 2px;
font-size: 14px; text-transform: uppercase; padding: 14px;

}

.mid .space{ position: relative; height:44.10em; z-index: -1;

}

/* contact Page end*/

)

Adam Smallman
Adam Smallman
4,182 Points

Its the <textarea> Thats messing up the with is the same as the input boxes at 35 em but the textarea's with is longer in fire fox.

Also I cant get the footer to stick to the bottom of the webpage there is free space under the footer

Thanks