CODEWITHSUNDEEP
javascripthtmlcss
captainandcoke
captainandcoke

Reputation: 1115

how does one "debug" a css file

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?

Upvotes: 4

Views: 588

Answers (6)

Thomas Shields
Thomas Shields

Reputation: 8942

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

Upvotes: 2

Soatl
Soatl

Reputation: 10592

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)

Upvotes: 4

K&#39;&#39;
K&#39;&#39;

Reputation: 5228

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

Upvotes: 1

Kerry Jones
Kerry Jones

Reputation: 21838

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

Upvotes: 2

FishBasketGordo
FishBasketGordo

Reputation: 23132

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.

Upvotes: 2

Stephen
Stephen

Reputation: 3432

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.

Upvotes: 3

Related Questions