Geek Answers Handbook

How to "debug" css file

I am new to (modern) web development. Anyway, I downloaded an image rotator and a dropdown menu that uses jquery. Now I put them together and they work great. But in this drop-down menu, I have a horizontally cut image instead of a vertical list of options.

If I just placed the images A, B, C - for some reason, it puts them vertically in each other instead of from left to right. So, I tried to put them in a small table - and this makes a small gap exist between the pictures, and not care from left to right - although I say border = 0.

What should I do to debug this?

+4
source share
6 answers

Download firebug or try using google chrome web debugger ( ctrl + shift + J )

A fire bug might be better for you because it will allow you to edit a web page and see how certain css calls will affect the page. This is what I use all the time.

There is also a download (bad to get the link) that will allow you to run firebug in other browsers

Edit

Firebug lite (for Google Chrome)
Firebug (for Firefox)

+4
source

Try the Firebug plugin for Firefox. You can use it to determine which rules apply to your dom elements with a simple dot / click.

You can also edit CSS on the fly and immediately see the changes - it’s convenient when you move things and don’t want to update them after each change. Make CSS changes to Firebug and when you are satisified, copy them back to your files.

+3
source

Modern browsers allow you to check the exact CSS elements of a page. You can use these tools for debugging.

  • In Chrome, right-click an item and click Inspect Item or click the wrench icon in the upper right corner, go to Tools> Developer Tools and go to the Items tab to check the item.

  • Firefox has a FireBug plugin that you can download from here .

  • IE has tools for developers. Just press F12.

  • I'm not sure what Safari is, but it probably looks like.

+2
source

I suggest the "Web Developer Toolbar" for Firefox (plugin), then go to CSS-> View Style Information.

+2
source

Most web browsers have built-in web inspectors. You can use them to check elements on a page and check, add or remove styles. Often with a debugging problem you will try to remove styles, but sometimes you also need to add them. Here is an example: If I have:

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Hello World</title> <style> #hello { color: white } </style> </head> <body> <p id="hello">Hello World</p> </body> </html>

#hello will not appear. I can use the web inspector in Google Chrome to find out about this: enter image description here

+2
source

The main debugging tool is to use the "! Important" rule to force some rules to pass so that you can solve the problem, also using tools like Firebug for Firefox, and the inspector for Chrome and Safari will help you see the calculated css. In addition, the web developer toolbar for Firefox has a rich DOM tool that allows you to check the live DOM tree

+1
source

More articles:


All Articles