View previous topic :: View next topic |
Author |
Message |
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Tue Jul 25, 2006 4:41 pm Post subject: Need some CSS table Help. [Solved] |
|
|
I have a box that I cannot expand using CSS. I know that this can be possible
in tables but CSS is another story. If you set the height of the table in CSS, you
cannot expand the table. The problem is that I need a fixed height of 400x400
pixel box, along with some text that can expand the box.
Edit: This issue has been resolved. Thanks anyway.
Last edited by TRUSTAbyss on Wed Jul 26, 2006 1:50 am; edited 4 times in total |
|
Back to top |
|
|
abyssisthebest -
Joined: 30 Jun 2005 Posts: 319 Location: Boston, UK
|
Posted: Tue Jul 25, 2006 5:15 pm Post subject: |
|
|
Use the min-height instead of height. This will allow the text to expand it _________________ My online Portfolio |
|
Back to top |
|
|
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Tue Jul 25, 2006 7:34 pm Post subject: |
|
|
abyssisthebest wrote: | Use the min-height instead of height. This will allow the text to expand it |
Sorry but it seems that only a few browsers support this CSS parameter. IE
does not support min-height and it's a popular browser. Is there any other
way to make non-supported browsers support this? |
|
Back to top |
|
|
Anonymoose -
Joined: 09 Sep 2003 Posts: 2192
|
Posted: Tue Jul 25, 2006 9:55 pm Post subject: |
|
|
Juggle the order a little, and remember that IE will ignore elements that it doesn't support.
Here's a fixed version - just tested it in IE7 Beta 3, Opera 9.something and Fx 1.54, working fine.
Code: |
div.box { position: absolute;
color: white;
background-color: gray;
border: 1px solid white;
width: 400px;
height: auto !important;
height: 400px;
min-height: 400px;
}
|
Firefox will pick up the auto height + min height, IE will ignore min-height because it doesn't understand it and use height:400px instead because it's the last version of height it reads. God knows what Opera thinks of it but it works :P
You can see it here :
http://anonymoose.co.uk/good_table.htm
Hope this helps. _________________
"Invent an idiot proof webserver and they'll invent a better idiot..." |
|
Back to top |
|
|
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Tue Jul 25, 2006 10:09 pm Post subject: |
|
|
If I add an extra column to this, will both of them expand like the example
you've provided? I tried getting two columns to expand and they don't in IE. |
|
Back to top |
|
|
Anonymoose -
Joined: 09 Sep 2003 Posts: 2192
|
Posted: Tue Jul 25, 2006 10:13 pm Post subject: |
|
|
Not sure - I'm more of a fixer upper than a real web designer... Want to put up the page you're talking about and I'll give it a poke? _________________
"Invent an idiot proof webserver and they'll invent a better idiot..." |
|
Back to top |
|
|
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Tue Jul 25, 2006 10:43 pm Post subject: |
|
|
Edit: This issue has been successfully resolved.
Last edited by TRUSTAbyss on Wed Jul 26, 2006 1:51 am; edited 1 time in total |
|
Back to top |
|
|
Anonymoose -
Joined: 09 Sep 2003 Posts: 2192
|
Posted: Tue Jul 25, 2006 10:56 pm Post subject: |
|
|
Ah, you want column A and column B to both be the same height, even if it's only A that is actually forced to expand by text? Could be tricky, it's not how divs normally behave... _________________
"Invent an idiot proof webserver and they'll invent a better idiot..." |
|
Back to top |
|
|
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Tue Jul 25, 2006 10:59 pm Post subject: |
|
|
That's exactly what I want. :-)
Last edited by TRUSTAbyss on Tue Jul 25, 2006 11:07 pm; edited 1 time in total |
|
Back to top |
|
|
Anonymoose -
Joined: 09 Sep 2003 Posts: 2192
|
|
Back to top |
|
|
AbyssUnderground -
Joined: 31 Dec 2004 Posts: 3855
|
Posted: Tue Jul 25, 2006 11:03 pm Post subject: |
|
|
I would use table's personally as they are much easier to work with, but as you want pure css as much as possible, that might be a very last resort. _________________ Andy (AbyssUnderground) (previously The Inquisitor)
www.abyssunderground.co.uk |
|
Back to top |
|
|
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Tue Jul 25, 2006 11:10 pm Post subject: |
|
|
I don't want to really use JavaScript because it can be disabled by proxies. Also
it could be a problem if a browser doesn't support the JavaScript.
I will try and use tables instead. Thanks for all your help anyway. |
|
Back to top |
|
|
AbyssUnderground -
Joined: 31 Dec 2004 Posts: 3855
|
Posted: Tue Jul 25, 2006 11:12 pm Post subject: |
|
|
TRUSTAbyss wrote: | I don't want to really use JavaScript because it can be disabled by proxies. Also
it could be a problem if a browser doesn't support the JavaScript.
I will try and use tables instead. Thanks for all the help anyway. |
Tables will work fine. Both columns will be the same size. To align the text at the top I use <td valign="top"> otherwise as one becomes bigger, instead of the text aligning at the top it will align in the center instead. You must use valign="top" on all the <td>'s. _________________ Andy (AbyssUnderground) (previously The Inquisitor)
www.abyssunderground.co.uk |
|
Back to top |
|
|
TRUSTAbyss -
Joined: 29 Oct 2003 Posts: 3752 Location: USA, GA
|
Posted: Wed Jul 26, 2006 1:56 am Post subject: |
|
|
I successfully converted my new website to a table layout, it validates and
looks great in all browsers. I will stick to the classic design method. |
|
Back to top |
|
|
|