How Do I Debug A CSS Layout?

Question

Open the Contact menu in this navbar, and you'll notice it's a bit off to the right.

Why is this?
How can I debug these issues myself without asking silly questions on SO? I'm using Firebug's layout tool, but I didn't really understand from it why this is happening.

Alexander Taran · Accepted Answer · 2011-04-26 14:07:42Z

4

what K Ivanov said..
and please consider using in browser tools to debug those things.
There are:

developer tools in IE
FireBug addon for firefox
and developer tools in chrome

and for the hometask research "css reset"
Different browsers have different default styles for elements for documents with no styles defined to look semi decent. Those styles do include padding and margins as well. That's why you have padding where you did not reset it.

edited Apr 26, 2011 at 14:07

answered Apr 26, 2011 at 13:57

Alexander Taran

6,7252 gold badges42 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kris Ivanov · Accepted Answer · 2011-04-26 13:45:13Z

1

make padding-left: 0px; inside your css element #wd-navbar ul

answered Apr 26, 2011 at 13:45

Kris Ivanov

10.6k2 gold badges26 silver badges36 bronze badges

2 Comments

ripper234 Over a year ago

Accepted. Still, I'm not sure how to debug these things ... is it just a matter of developing an eye for it?

Kris Ivanov Over a year ago

I used Developer Tools in IE (F12) as Alexander Taran said

Rob · Accepted Answer · 2011-04-26 14:29:36Z

1

Here's a video explaining how to use firebug to debug CSS: http://www.youtube.com/watch?v=pDhhM4-o_VE&feature=player_embedded#at=313

Of course, you need to understand the basics of CSS and the box model first: http://www.w3schools.com/css/css_boxmodel.asp

answered Apr 26, 2011 at 14:29

Rob

3531 gold badge4 silver badges16 bronze badges

Comments

Gabriel McAdams · Accepted Answer · 2016-10-24 06:17:12Z

0

And now there's a new tool to visualize the space taken up by any element you put the mouse over:

HTML Box Visualizer - GitHub

answered Oct 24, 2016 at 6:17

Gabriel McAdams

58.6k12 gold badges67 silver badges78 bronze badges

Collectives™ on Stack Overflow

How Do I Debug A CSS Layout?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related