Bout #2: Boxing with CSS …
I continued with my box styles and removed each of the background elements and replaced them with colors so I could see which elements were where and how they overlapped thinking this could really help me place the backgrounds and it did.
My goals were to have as small and simple xhtml and CSS as possible. I wanted to see what I could remove and still have what I wanted rather then introduce new elements (DIV’s etc) just to support my markup. After all I thought CSS is meant to replace the need for tables and cells so I didn’t want to just rename these to DIV.
Onward I pressed and in very short time I had all the corners in place but the lower right was still giving me trouble so I turned the background colors back on to hopefully get more info. It turns out that the bottom right wasnt appearing the way I had wanted because of the background color and so I changed it and all was good. It’s possible something else may fix the bottom right without the need to change the background color but right now I’m ok with having to do this.
Now that I am done and I look back at the box that scales horizontally and vertically upto a point* and the simplicity of the xhtml I am very happy with the results. One DIV marked with a class and the contained DL/DT and DD all do the right thing, a knockout you could say. So the round and bout goes to CSS.
* The Bulletproof Web Design book suggests that the ’sliding doors’ technique that I have used is bulletproof because it scales horizontally and vertically which isn’t entirely true since increasing the font size will eventually reveal the extent of the graphics underneath. However a solution that allows a limitless scroll would require adding elements (DIV’s) to the xhtml to support the style which I didn’t want to do as it seems like a backward step.