Side Shadows not appearing without fixed height

[JoeHoldcroft]

I am working on a website at the moment which has a very complex css layout.
The site is at: http://www.crowdsurfers.net/index2.html

As you can see, there is a slight shadow on the outside of the container of the layout. There are two classes, one for the left and one for the right, for the shadow on the left and right. It works fine when the div that they are shadowing has a fixed height, but not otherwise.
They are used in this way:

<div class="mainbody">
<div class="header_logo_bgr" style="height: 100%;"></div>
<div class="header_logo_bgl" style="height: 100%;"></div>
...


This code would work fine if the class "mainbody" has a fixed height, but without that, it just doesn't show up at all. I guess this is because it doesnt know what 100% is for the div, so it shows up as small as possible (height wise).
Pretty confusing, but basically I just want header_logo_bgl/r to stretch to 100% on a div without a fixed height.

All information is available by viewing the source of the link I gave.


Any ideas?
Thanks in advance! :D

[patenaudemat]

Maybe I'm missing something in your CSS, but I don't even see a background shadow image included anywhere... point me to it?

I'm thinking you probably just need to use a little div auto-clearing trick, but if you point me to where your background image is included I can give you more specific info. :)

EDIT: Never mind, found them, but it's quite a sticky situation. Let me think about it overnight, and I'll get back to you tomorrow. :)

-Matt

[JoeHoldcroft]

Yeah it's given me many a sleepless night! Thankyou verymuch for your interest and I look forward to hearing back from you :)

[patenaudemat]

Got it, using a bit of absolute positioning :)

Replace each respective block in your existing stylesheet with the ones below:


.header_logo {
background: url(layout/images/header_logo_background.gif) repeat-x center center;
height: 90px;
position: relative;
}
.header_logo_bgr {
background: url(layout/images/header_logo_bgr.gif) repeat-y;
position: absolute;
right: 0px;
top: 0px;
/* removed float */
width: 6px;
}
.header_logo_bgl {
background: url(layout/images/header_logo_bgl.gif) repeat-y;
position: absolute;
left: 0px;
top: 0px;
/* removed float */
width: 6px;
}
#midbar {
background: url(layout/images/midbar_background.gif) repeat-x;
height: 33px;
font-size: 8pt;
color: #FFD200;
text-align: center;
position: relative;
}

.mainbody {
background: #930053;
position: relative;
/* removed margins */
}


Hope it helps, and good luck! :)

-Matt

[JoeHoldcroft]

wow thanks very much that works perfectly!
would you be able to explain how it works? if not, that's fine.
thanks again :D

EDIT: unfortunately it doesn't work in IE6, i know this is no problem for you or i, as FireFox is of course the way to go, but i was hoping to make the site as browser universal as possible. any idea on that front?

[patenaudemat]

Glad it works :)

The reason it works this way is because, essentially, absolutely positioning an element to the left or right is the same as floating left or right (as far as display is concerned-- under the hood, it works a bit differently). The trick here is setting all of the other elements to be displayed with relative positioning.

If you don't modify the top, bottom, left, or right properties of a relatively positioned element, it just stays where it would normally be, since relative positioning does not remove an element from page flow. Absolutely positioned elements, and elements using "fixed" positioning, use their point of reference as their first parent that has positioning set explicitly. Therefore, by applying relative positioning to the container elements, they become the reference points for positioning your shadows, rather than the whole browser window.

Since positioning the shadows absolutely gives them a defined parent, they know how to interpret a height of 100%, and you get your full-length shadows. :)

If you have any more questions, let me know!

EDIT: As for Internet Explorer, I'm in the middle of some hardcore Objective-C programming right now :p But later tonight, or tomorrow, I'll see if I can figure out a fix.

-Matt

[JoeHoldcroft]

thats great thanks, real interesting :)
theres no major hurry, thankyou very much!

[patenaudemat]

Out of curiosity, how did the way you had it before I suggested my changes display in IE? If that worked, then what we can do is just put the old code in an Internet Explorer conditional comment. :)

-Matt

[JoeHoldcroft]

it looked the same as it did in firefox, the shadow didnt continue down. but with the code to make it work in firefox, it has made it appear more messed up in ie6. so we could use some conditional formatting yeah, but not to get it fully working :(

[patenaudemat]

Well I'm on a Mac, but by the end of the weekend I may be able to do a little investigation on Internet Explorer for you to see how we might make it work.

-Matt

[JoeHoldcroft]

Just an update, i've had a big play around for a long time and have got it almost working in both firefox and ie [using browser-dependancy]. The only thing is, in ie, I can't get the shadow to run down the sides as the height increases and decreases of mainbody, it just wont do it, but it will in firefox!
By the way, if it helps, if I remember correctly this problem only occured when I added the module with full width, the shadows moved up and down with the module fine when we only had the part with 3 columns of modules.


Joe