View Full Version : what's better code?

06-08-2010, 04:33 PM
Hi, I'm looking for some advice from those who know more about acceptable/accessible coding.

I've solved a problem in two ways, but not sure which is a safer solution.

If there's been a recent breakthrough in CSS and we can now have 2 background images in one div (one anchored to the top and one anchored to the bottom) then neither of these are necessary, but if not:

my page backgrounds are blue at the top, gradiating to white, and have an image at the bottom (usually the white fades into the image to some extent). Obviously, the amount of content in a page varies, so I can't just have a set image for the whole page.

The top section is in a separate div called "backgroundtop", the white is the background colour of the main div, and the image is a background image in the main div.

solution 1: "backgroundtop" is within the flow of the main div. Then a "text" div has a relative position "top:-90px;"
problem: i have a 90px space at the bottom of the page.

solution 2: "backgroundtop" is separate, absolutely positioned, and I use z-indexes to put it in the right layer.
problem: the positioning seems to need separate ie6 and ie7 style sheets (container div is centred, but fixed width)
fear: I worry about absolutely positioned divs popping about the page in future browsers or something.

Can anyone give me advice?
I guess the generic question is: which is worse? absolutely positioned divs and z-indexes, or negative relative positioning?

06-08-2010, 04:50 PM
Can't you have 2 divs, one inside the other, with the content inside the inner div....have the outer div as your top gradient & the inner div as your bottom image...this way both divs stretch to fit the content, eg.

<div class="top_grad">
<div class="bot_img">
<p>Content in here</p>

Does that fix your problem?

06-08-2010, 05:43 PM
That's so much better. I don't have a clue why I didn't do that in the first place - it's so obvious, isn't it?
Thank you - really appreciate your help