I am trying to work up some templates for the CSS Zen Garden site (www.csszengarden.com). Under the restrictions of this site, I cannot change the html and must use absolute positioning to position additional images using extra divisions. On this template, www.drkdesign.com/zengardenscrapbook/ I am trying to position both the gradient and the image of scrapbook pages in the sidebar but cannot seem to resolve the significant extra vertical space above these images in Firefox 2.0 and Opera (looks okay in IE7). I have been scouring the web for hours and trying different things...have zeroed out all my paragraphs, headings, lists, etc. I have tried adding borders, setting the height for the images to 100% and a variety of other things but nothing seems to work without changing the positioning in IE7 as well. I am having a similar problem in another template as well. The HTML contains a strict document type (!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> where I usually use the transitional DTD, so that may be why I'm having problems. Here is a link to my valid CSS: www.drkdesign.com/zengardenscrapbook/sample.css I would appreciate any and all help anyone can give me...Thank you!
Just a note, I have changed the layout of this site to remove the gradient strip in the side bar since I couldn't figure out how to fix it, but I still would be interested in knowing how to fix this problem if anyone has an idea. There doesn't seem to be as much difference between IE and Firefox (and Opera) between the positioning of the image of album pages, or with the image on the right for some reason, but with the gradient it was a difference of about 200 pixels vertically. The same thing was true with an image I was positioning under the links list in another template as well, so I am thinking it might have something to do with the links list.