4 replies [Last post]
blindpiggy
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-02-24
Posts: 3
Points: 0

Hello...

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.

http//blindpigdesign.com/test

Thanks!!

p.s. Any other advice would be most appreciated too!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Help please!

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.

Regards
Day

The only way to learn is to do it yourself

blindpiggy
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-02-24
Posts: 3
Points: 0

Re: Help Please!

Thanks Day...

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!

Aaron

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Help please!

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

.youdivbox{
backround-color: grey; /*or white - whatever you want*/
background-image: url("images/shadow.gif");
background-position: right top;
background-repeat: repeat-y;
}

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

Regards
Day

The only way to learn is to do it yourself

blindpiggy
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-02-24
Posts: 3
Points: 0

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

Aaron

p.s. If you want to check out the solution http//blindpigdesign.com/test