What is the best way to determine the source of a CSS issue.

Question

Hello,

I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.

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

I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.

With my relative inexperience how do I look for relevant fixes to this issue.

Any help would be very much appreciated.

Answer 1

FireBug, the most crucial tool for debugging CSS, amongst other things.

get it here

Answer 2

+1 for FireBug

In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.

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

Answer 3

IE Web Developer Toolbar It's not as good as firebug in general, but it helps when you have an IE-specific problem.

Answer 4

Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)

and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.

Answer 5

In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.

http://validator.w3.org/

Answer 6

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

I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.

That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.

Answer 7

Another hot recommendation for debugging CSS - CSS Viewer.

It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.