Topic: More table trouble (Page 1 of 1)

Thanks to twitch for helping with that last question. Now I have another... =)

I'm trying to take a single table cell and get text inside of it, having some of the text aligned to the top of the cell, and some to the bottom of it. Splitting this table cell up is the last thing I want to try to do, although it may be possible to do it correctly without messing up the rest of the design, if I must - but it would be messy.

I've tried putting a table inside of this cell, containing two cells, with its height="100%" and both cells set with height="50%", and that works in IE. But it doesn't work in Mozilla. I'm questioning as to whether there really is a way to do this in mozilla.

While we're at it... is there a way to use stylesheets to specify that text should be aligned to the bottom of a box? (like a div tag or something.) By default, all text is aligned to the top of the box it's in, I'm wondering if there's a way to change that. Something like valign="bottom" in table cells.

Slime,

Your much better with code then I am, so if your stumped Im not gonna be too much help. The only thing I can think of off the top of my head, other then two data cells with which you don't want, is using layers. Although I'm sure this is less desirable then the data cells. Also on your other question about the stylesheet, not a clue. Nothing I could think of, sorry.


.sig by Weadah.

Yah, netscape will accept a percentage width, but does poorly with a percentage height, who can tell why? If you specify a px value for height, thsat wwill work though. If there is more content than will fit in a table that tall it will simply force it larger. Hard to say what IE will do with that, though.

Your pal, -doc-

CSS Level 2 does support the vertical-align : <baseline, sub, super, top, text-top, middle, bottom, text-bottom, %value> tag.

However, since it is CSS-2, it's got *some* quirky responses with IE5 and NS4 browsers. But, it *should* work in Mozilla because Mozilla is a 100% compliant browser, if I'm not mistaken.

Hope that helps.


stephen

Well, I know about the vertical-align thingy, but what that does is specify how images and such should be aligned to a line of text. It doesn't change where the *text* is relative to it's containing box. Unless I misread that in my HTML, but I went over it a few times...

I'd do what you said, Doc, but the table cell's height depends on the amount of content in an adjacent cell. I could read the height of that cell and dynamically change the other cell's height, but that would have to be done *after* the page has loaded, which could look weird.

Eh, I'll see what i can do, maybe I just won't put any text aligned to the bottom.

If all that doesn't work, what about trying to put a blank.gif in between the two sets of text? I don't know if Mozilla will take a 100% for the image width and height properly but it might be something to try if all else fails.

Well, again, the problem is that the table cell's size may change very often, I don't want to have to update the height of the gif image.

I'll probably come up with something, or if not, I'll make it work in IE and just have the text not be aligned to the bottom in other browsers.

I appologise if you know any of this, but I'm not sure if you tried this or not. I had to do this for a page of mine. I had a single table that was off to the right and the text had to be aligned a very certain way.
I resolved this be using CSS-P (Cascading Style Sheet Positioning).

I made each section of the text a different CSS attribute placing each text exactly where it needed to be within the <div> tags. So the top line that is to be aligned would be one CSS tag, something like this:

.container { margin-top: 20px;
margin-left: 50px;
height: 400px;
background-color: #564698;
}

.text1 { margin-top: 10px;
margin-left: 10px;
color: #FFFFFF;
}

Then placed each one in the body of a <div> tag.

<div class="container">
<div class="text1">Text Goes Here</div>
</div>

This way you can control where the text will be within the "container" tags.

It is more code to write but the end result is worth it. Just be careful, Netscape 4 doesn't let you but <br> within the <div> tags. It just won't show anything.

Hope this helps.