What is the best way to determine the source of a CSS problem?

Question

I am working on a webpage. This is the first one that I actually tried to create using an image, and then use the correct CSS layout, not a table.

http://www.roccocammisola.com/proj/brunel/bgimage.html

I'm having problems with shadows on either side of the main content area. Of course, this is only a problem in IE. As you can see, the shadow was reduced to about 10% of its actual height.

With my relative inexperience, how can I find appropriate fixes to this problem.

Any help would be greatly appreciated.

Answer 1

FireBug , the most important CSS debugging tool, among other things.

enter it here

Answer 2

IE Toolbar for Web Developers It's not as good as firebug in general, but it helps when you have a problem with IE.

Answer 3

In addition to Firebug , make sure your HTML is valid, an invaluable tool, and can minimize CSS headaches. Sometimes your CSS may not work correctly because there are errors in the HTML. Different browsers have different ways to deal with incorrectly written HTML, which sometimes may seem like it's a CSS issue with multiple browsers. The validator can help you find errors in your markup.

http://validator.w3.org/

Answer 4

+1 for FireBug

In this particular case, I just propose a new approach for your shadows. You currently have them as items. Usually you want to use CSS background images for such things.

.mainShadowRight { */ your other stuff */ url('images/mainShadowRight.gif'); } 

Answer 5

Your .mainShadowRight CSS class indicates the minimum height (which IE6 does not understand, and IE7 is not always 100% correct)

and, as DLarsen noted, it seems like you are missing a background image: url (); bit.

Answer 6

Thanks for all your answers, it seems to have done the trick.

I think I woke up with the download, since I had to have bg-image stuff there.

This IE web developer toolbar looks pretty good since I have a firebug and web developer toolbar for FF.

Answer 7

Another hot CSS debugging tip is the CSS Viewer .

This is a Firefox add-on that allows you to hang elements on a web page and see their exact style. Often you realize that the final style was not what you had in mind, perhaps due to some inheritance of styles.