how does one "debug" a css file

Question

I'm new to (modern) web development. Anyway, I downloaded a image rotator and a drop down menu that uses jquery. Now, I put them together and they work fine. But with this drop down menu, I have a horizontally sliced up picture instead of a vertical list of choices.

If I just put the images A, B, C - for whatever reason it places them vertically of one another instead of left to right. So, I tried putting them in a little table - and it forces a small gap to exist between the pictures instead of having them gapless left to right -- even though I say border = 0.

What do I do to debug this?

If my understanding of your actual problem is correct, you need to "write new code", not "debug existing code". — thirtydot
– thirtydot, Commented Aug 10, 2011 at 20:30

Naftali · Accepted Answer · 2011-08-10 20:28:18Z

4

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

Fire bug may be better for you because it will allow you to edit the webpage and see how certain css calls will effect the page. It is what I use all the time

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

Edit

Firebug lite (For Google Chrome)
Firebug (For Firefox)

edited Aug 10, 2011 at 20:28

Naftali

147k41 gold badges247 silver badges304 bronze badges

answered Aug 10, 2011 at 20:24

Soatl

10.6k28 gold badges101 silver badges156 bronze badges

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

3 Comments

Soatl Over a year ago

I didn't know that worked too. I guess they felt they needed two short cuts

Naftali Over a year ago

there are a few ctrl+shift+{x} for the different dev tabs in chrome. there is a list somewhere.

Rich Bradshaw Over a year ago

Just by the way, many people prefer the inspector that's built into Safari and Chrome, for many reasons. I'd start there rather than going for Firebug.

Stephen · Accepted Answer · 2011-08-10 20:24:58Z

3

Try the Firebug plugin for Firefox. You can use it to determine which rules are applying to your dom elements with simple point/click..

You can also edit CSS on the fly and see the changes immediately - handy when you're moving things around and don't want to refresh after every change.. Make changes in the CSS in Firebug and when you're satisified, copy them back into your files.

answered Aug 10, 2011 at 20:24

Stephen

3,4421 gold badge24 silver badges22 bronze badges

1 Comment

numbers1311407 Over a year ago

Firebug is so indispensable now. Makes me wonder how we ever did it "in the old days".

FishBasketGordo · Accepted Answer · 2011-08-10 20:25:22Z

2

Modern browsers will let you inspect the exact CSS of page elements. You can use these facilities to debug.

In Chrome, right-click the element and click "Inspect Element", or click on the wrench icon in the upper right, go to Tools > Developer Tools, and click the Elements tab to inspect the element.
Firefox has the FireBug plug-in, which you can download from here.
IE has Developer Tools. Just hit F12.
I'm not sure what Safari has, but it's probably similar.

answered Aug 10, 2011 at 20:25

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Comments

Kerry Jones · Accepted Answer · 2011-08-10 20:25:58Z

2

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

answered Aug 10, 2011 at 20:25

Kerry Jones

21.8k12 gold badges67 silver badges89 bronze badges

Comments

Thomas Shields · Accepted Answer · 2011-08-10 20:30:17Z

2

Most web browsers have Web Inspectors built in. You can use these to examine elements on the page and inspect, add, or remove styles. Often with a debugging problem you'll be trying to remove styles, but occasionally you need to add them as well. Here's 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 won't show up. I could use the Web Inspector in Google Chrome to find this out: enter image description here

answered Aug 10, 2011 at 20:30

Thomas Shields

8,9235 gold badges45 silver badges79 bronze badges

Comments

K'' · Accepted Answer · 2011-08-10 20:26:49Z

1

The main debugging tool is to use the "!important" rule to force some rules to take place so you can nail down the problem, also using tools like Firebug for Firefox and inspector for Chrome and Safari helps you to see the the computed css. Also Web Developer Toolbar for Firefox has a rich DOM tool that allows you to check the live DOM tree

answered Aug 10, 2011 at 20:26

K''

5,2987 gold badges35 silver badges43 bronze badges

Collectives™ on Stack Overflow

how does one "debug" a css file

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related