Need some CSS table Help. [Solved]

 
Post new topic   Reply to topic    Aprelium Forum Index -> Off Topic Discussions
View previous topic :: View next topic  
Author Message
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Tue Jul 25, 2006 4:41 pm    Post subject: Need some CSS table Help. [Solved] Reply with quote

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 View user's profile Send private message Visit poster's website
abyssisthebest
-


Joined: 30 Jun 2005
Posts: 319
Location: Boston, UK

PostPosted: Tue Jul 25, 2006 5:15 pm    Post subject: Reply with quote

Use the min-height instead of height. This will allow the text to expand it
_________________
My online Portfolio
Back to top View user's profile Send private message Send e-mail MSN Messenger
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Tue Jul 25, 2006 7:34 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
Anonymoose
-


Joined: 09 Sep 2003
Posts: 2192

PostPosted: Tue Jul 25, 2006 9:55 pm    Post subject: Reply with quote

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 View user's profile Send private message
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Tue Jul 25, 2006 10:09 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
Anonymoose
-


Joined: 09 Sep 2003
Posts: 2192

PostPosted: Tue Jul 25, 2006 10:13 pm    Post subject: Reply with quote

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 View user's profile Send private message
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Tue Jul 25, 2006 10:43 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
Anonymoose
-


Joined: 09 Sep 2003
Posts: 2192

PostPosted: Tue Jul 25, 2006 10:56 pm    Post subject: Reply with quote

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 View user's profile Send private message
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Tue Jul 25, 2006 10:59 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
Anonymoose
-


Joined: 09 Sep 2003
Posts: 2192

PostPosted: Tue Jul 25, 2006 11:01 pm    Post subject: Reply with quote

Have a look at this, should explain why this is a problem... Skip down to "DIVs Are Not Table Cells"

http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

They have a neat solution for this too, but you will need to use a little javascript. Here's an example of it in action.

http://www.projectseven.com/tutorials/css/pvii_columns/col4fixed.htm
_________________

"Invent an idiot proof webserver and they'll invent a better idiot..."
Back to top View user's profile Send private message
AbyssUnderground
-


Joined: 31 Dec 2004
Posts: 3855

PostPosted: Tue Jul 25, 2006 11:03 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Tue Jul 25, 2006 11:10 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
AbyssUnderground
-


Joined: 31 Dec 2004
Posts: 3855

PostPosted: Tue Jul 25, 2006 11:12 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA

PostPosted: Wed Jul 26, 2006 1:56 am    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    Aprelium Forum Index -> Off Topic Discussions All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB phpBB Group