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

CSS

Erin Rhim
Erin Rhim
10,690 Points
Posted by Erin Rhim
Erin Rhim
10,690 Points

A div display property problem.

Hi While I was working on my own project, I had a div's display property. As I know div is displayed with the value block in default. However, I have a problem that this property is ignored with some reason and the different divs are overlapping in my project. When I looked into developer tool in google chrome, div { display: block; }

property is erased and it says it was from used agent stylesheet. I added a code specifying div with block value, but it is overwritten as well. Is there a way that I can know why this property is overwritten by something and solve the problem?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Erin,

Usually if a style is overridden by something the style block is greyed out in Chrome Dev Tools. If a style is overridden i find it's usually because of a misconfigured media query of an external stylesheet that's in the wrong place (i.e. above not below the next reference to an external stylesheet in your HTML).

A user agent style is the default style applied by the browser. Take the style in the Chrome DevTools and add it to your file for greater control in your browser. I love using ChromeDev Tools to preview styles before adding them to my style! :-)