One of the major headaches that I came across when making my transition to tableless web layout was that I would often want a graphic to repeat all the way down a page, but setting the height of a div to 100% doesn't work as you'd expect. The problem comes in when you start to scroll.
The height: 100% attribute only means 100% of the initial display of the page. When you try to scroll down it cuts off the below what you can first see on the page when it loads. Essentially your div is only 768px or whatever 100% of your screen height is. I was surprised at the lack of solutions to this problem, but I've recently seen people espousing the same fix I came up with as well.
For example, perhaps I want a center aligned page with drop shadows on the left and right. I believe the rational way to approach this would be making three divs and floating them all left inside a center aligned container and putting the shadow graphics in the outside divs with a background repeated in the y axis for 100%.
Instead what I do now is actually somewhat simpler. I make one graphic thats one pixel tall(if it doesn't have a repeating texture) and then making it say 760 pixels wide and leaving a space in between the two drop shadows for my content. I then center align that background and repeat it down and make a container div to make sure that my content stays within the two drop shadows.
Of course you can make the the graphic fatter in order to incorporate a texture. I've also used absolutely position graphics to make a gradient at the top that fades into the repeating background for added effect. You just have to make sure they're not longer than 100% the height of the minimum screen resolution you're designing for.
I'm sure that future versions of browsers will change this to give the desired effect or possibly CSS3 will add it as a feature. We'll just have to wait and see.
|
|