I'm brand new to this forum and have a very partial knowledge of CSS. Just wondering if anyone can tell me why the shadowy bits and the dotted separators don't extend to the bottom of the <div> unless the heights are fixed.
p.s. Any other advice would be most appreciated too!
I think you may find this in #shadow2
background-position: top right;
maybe causing a problem - try removing it.
hmmm maybe not
Its hard to know or test without DL'ing all the images.
Try putting borders on the #shadow divs to see if they are stretchinmg how far you think they should be.
Re: Help Please!
I tried the borders and they show the div to be stretching only as far as where the shadoww stops...which is strange to me. The shadow image is only 1 pixel high...so it is repeating in the y direction, but only for a certain distance...Maybe it's something really obvious that I'm missing...
Back to the drawring board!
Problem is IE's definition of how high the div should be. You will find it is probably about 16px high for the lineheight.
If you check your site in Moz you will see that the shadow divs are not showing at all.
In other words - your 100% height is not working.
What you will probably have to do is make the shadow part of the background of the div that contains content, so that it always stretches to what you need - somehting like this
backround-color: grey; /*or white - whatever you want*/
background-position: right top;
for the div that contains the images make sure the div box is just wider than the images so the shadow shows up on the right.
Hope that makes sense
Re: Help Please!
You're a genius!
Thanks! Yes, I moved the shadow image to a parent div keeping the height as 100%...and...I got rid of 2 useless divs at the same time...
Although I did have to concede using a static height for a portion of the layout...ah well..it looks good in IE6, NN7 and Opera7 (I think)
Whew! CSS is satisfyingly challenging...
Seriously, thanks for the help...
p.s. If you want to check out the solution http//blindpigdesign.com/test