Geek Answers Handbook

How to debug CSS layout?

Open the Contacts menu in this navigation screen and you will notice it a little to the right.

  • Why is this?
  • How can I debug these problems myself without asking silly questions on SO? I am using the Firebug build tool, but I really did not understand why this is happening.
+4
source share
4 answers

what K. Ivanov said.
and please consider using browser tools to debug these things.
There is:

  • developer tools in IE
  • Firebug addon for firefox
  • and developer tools in chrome.

and to research hometask "css reset"
Different browsers have different default styles for elements for documents without styles that look semi-sequential. These styles also include registration and fields. That is why you have an add-on in which you do not reset .

+4
source

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

+1
source

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, first you need to understand the basics of CSS and the box: http://www.w3schools.com/css/css_boxmodel.asp

+1
source

And now there is a new tool for visualizing the space occupied by any element that you hover over:

Visualizer HTML Document - GitHub

0
source

More articles:


All Articles