Hi,
(Note, I'm still trying to pull this design together in compliant
browsers, and I have dared not look at it Exploder yet...)
See the 3 colored block areas here?:
http://dev.hearthstone.wd-2.net/
Note, all the relevant CSS is in the top-level stylesheet "site.css"
(not in the other things it imports).
The pain here is all about (1) getting the quarter-circle graphic
thingy to snuggle into the bottom right corner of each colored box, and
(2) maintaining a uniform height for all the boxes. Safari and Firefox
will each let me have one, but not the other :-(.
I started with a <table> to get the equal height boxes... no flames
please :-), I hate doing this — but I do it anyway, because Exploder
doesn't do "display: table-cell", and as bletcherous as it is to use
<table>, to me the pure CSS alternatives, "faux" this and that etc.,
all seem even more bletcherous. So I just bite the bullet in this
situation.
To handle the corner thingummys, at first I thought "no problem,
absolute positioning". Except it turns out that there is no way to
establish the <td> as a containing element, because the effect of
"position: relative" is undefined for table cells, which means the
browsers aren't required to treat it in any particular way, and the
ones I've tried in fact do nothing at all with it. So, gone was my
layout when I tried it that way. It was a no-win — I needed the table
cell for uniform height, but then the table cell killed absolute
positioning.
The original design from the graphic artist called for a kind of text
flow around the corner elements that is simply not possible in
HTML+CSS, but I figured I could get away with having some text overlap
the corner elements as it would if absolute positioning had worked.
When I realized that wasn't going to work, I fell back to trying to
stack the corner elements below the text. This makes the colored boxes
less compact than in the designer's comps, but I think I will still be
able to get by with it.
So now, the difficulty is keeping the boxes at a uniform height,
and I'm back in another no-win situation. In order to get the freaking
corner elements down to the bottom, I need to nest another <table>
inside the colored box <td>, with a top row for the content and a
bottom row for the corner thingy, so that I can use "vertical-align:
bottom" to force the corner element down (more on that later, but for
now I'm just trying to get something that will look right :-(..). I
added a nested table, and moved the "color box" styling rules from the
<td> onto its new <table> child. When I did that, I lost the uniform
box heights in Safari. (Had I not moved the "color box" rules — which I
think I just did because it made the selectors more straightforward, or
something — it would have been no better; the colored boxes would have
stayed the same heights, but the corner thingys would not have snuggled
down to the bottom, they'd still have stacked right up underneath the
content just like you see now in Safari).
Firefox, on the other hand, is doing what I want w.r.t. to the box
heights, but it's also showing a gap between the bottom nested table
cell and the bottom of the nested table.
Help! How do I fix this?
Thanks a lot,
— Mark, the Frustrated
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
