Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Bredthauer
13,429 PointsTrouble with <forms> and Chrome Browser
I am adding a small form to my site, just an text, email, and submit button. When I add them to the site, in the Chrome browser it causes my <nav> element to move out of place, it moves it down. Mind you this only happens in Chrome. In Safari and FireFox it works just fine. Please can someone help me with this?
3 Answers
Shawn Gregory
Courses Plus Student 40,672 PointsMicheal,
Are you using a css script like normalize.css that provides better cross-browser consistency in the default styling of HTML elements? Each browser comes with certain default browser styles that, unfortunately, makes sites look different on different browsers. Using css scripts like normalize.css allows you to work on a level playing field by setting all browser default styles to one common style type (usually making everything have no margins and blocking elements). Try normalize.css here: http://necolas.github.io/normalize.css/ and make sure that you link to that file before you other css files (if you have any). Try it and tell me if it solves your problem.
Cheers!
Michael Bredthauer
13,429 PointsYou can see the problem at www.mid12design.com the images are not uploaded but you can still see how the links are below the header where they belong. I changed the normalize.css and it made no change.
Shawn Gregory
Courses Plus Student 40,672 PointsMichael,
Looking at your site in both Firefox and Chrome, I am getting two separate site looks. In Chrome I'm getting a silver bar on the top of the page with all of the other elements underneath it while in Firefox, I'm not getting a silver bar but besides that, to me, everything looks similar (except that in Firefox I get an image right after the form and in Chrome I don't). Which style that I describe are you shooting for?
Cheers!
Michael Bredthauer
13,429 Pointssorry your not seeing the silver bar because I am using -webkit- for safari and chrome. Ill reload it so you can see what I am talking about
Michael Bredthauer
13,429 Pointsif you look again you can see what I mean
Michael Bredthauer
13,429 PointsMichael Bredthauer
13,429 PointsI do have a normalize.css added to my html, I will try a new one and see if that makes a difference.
Shawn Gregory
Courses Plus Student 40,672 PointsShawn Gregory
Courses Plus Student 40,672 PointsMichael,
Use Chrome's inspector tool and take a look at the areas around your form elements. Sometimes some of your css calculations may work in one browser and not in another. Also, check the size of the browser window and see if its consistent with the other browsers. If you are using a styling method that take advantage of the full screen size of a browser to display your site, having a slightly smaller screen resolution might be the problem.
Cheers!
Michael Bredthauer
13,429 PointsMichael Bredthauer
13,429 PointsThanks Shawn, I see the inspector but don't see why its removing the element from its original div.