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

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.

From stackoverflow Rocco

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

  get it here

  BoltBait : Since he said that his issue is only with IE, how is this going to help him?

  dove : because it is a problem in FF by the looks of it too.

  Chris Marasti-Georg : No, IE7 displays it correctly, as does FF. IE6 is the culprit.

  Larsenal : Whether or not the problem is in IE or FF... you can still use FireBug to understand the way your CSS is being interpreted.

  dove : fair enough. it does look funny in chrome too. but happy to stand corrected and not presume it was a more general error.
  From dove

• +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');
  }
  

  From Larsenal

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

  From Tom Ritter

• 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.

  From scunliffe

• 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/

  From Andy Ford

• 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.

  From Rocco

• 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.

  From Ido Schacham