Click to See Complete Forum and Search --> : Adding style to a table...


stmasi
06-10-2003, 03:01 PM
Is there any way to set the HEIGHT of a table using CSS?

Thanx.

David Harrison
06-10-2003, 04:15 PM
How about this:

<table style="height:100px;" width="100">

stmasi
06-10-2003, 04:28 PM
Tried using the HEIGHT property, but the table isn't recognizing it. It recognizes the WIDTH just fine, but not the HEIGHT.

Here's what I'm doing:

HTML
----------
<table id="main">

CSS
----------
#main {
height: 100%;
width: 600px;
}

Am I doing something wrong? Any other ideas?

David Harrison
06-10-2003, 04:45 PM
What browser are you using because I'm using IE 6.something on win XP and what you wrote works fine.

stmasi
06-10-2003, 04:51 PM
I've tried it on IE6, NS7, O7, and M1.

Thanx.

David Harrison
06-10-2003, 05:02 PM
I've put the style's on 1 line just because that's the way I code and I put a border around the table just so you can see the effect. This works on mine how about yours.

stmasi
06-10-2003, 05:15 PM
Looks like it is working when we use the inline styles, but when I attempt to place the styling in a css file, the height property doesn't want to work for some reason.

David Harrison
06-10-2003, 05:18 PM
I can't remember how to link to a separate css file so I can't test that, can you refresh my memory and I might be able to.

stmasi
06-10-2003, 05:20 PM
<link type="text/css" rel="stylesheet" href="default.css">

in the head section.

Thanx.

David Harrison
06-10-2003, 05:27 PM
Well I tried it and it worked fine, this is the page source:

<html>

<head>

<title>Tables With Style</title>

<link type="text/css" rel="stylesheet" href="default.css" />

</head>

<body>

<table id="main" border="1">
<tr><td>

a

</td></tr>
</table>

</body>

</html>

and this is the file default.css:

#main{height: 100%;width: 600px;}

and there's not a single problem with it.

stmasi
06-10-2003, 05:37 PM
Ah ha!

Now add the following line as the VERY FIRST line in your HTML...even before the <html> line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Then take a look at it.

8^)>

nkaisare
06-10-2003, 07:34 PM
Its actually working. The table is already 100% of its contents.It will not stretch until the bottom of the screen.

For more info on 100% screen height, refer to one of my earlier post. Sorry, need to rush so cant help u more right now.

David Harrison
06-11-2003, 01:15 PM
Yep you're right, when I tried it I didn't bother with a DOCTYPE or meta tag.
I forgot that with a DOCTYPE it puts the browser in standards mode rather than quirks mode.
In that case I don't know how to help you, sorry.

Robert Wellock
06-12-2003, 07:43 AM
Present me with a logical an semantically valid argument why you require the <table> element to have the same height dimension of the user-agent canvas and I might just divulge on how it could be achieved using CSS alone.

stmasi
06-12-2003, 09:15 AM
What does that mean? Does that mean that if I can't come up with a "logical and semantically valid argument" that satisfies your nerual network, that you will not grant me any sort of assistance?

All I am trying to do is make a page that looks like the following, using tables instead of frames as the frames don't show up properly in all browsers I've tested on (IE6, O7, NS7, M1):

http://home.bendcable.com/theallensplace/

Thanx.

(I hope.)

8^)>

DaveSW
06-12-2003, 10:03 AM
tell him it's for a div

The only thing I can find on your link is an Iframe...

stmasi
06-12-2003, 10:17 AM
Yes, I know.

I want to move away from frames, but I want to use something that I can "stretch" (like frames) to the height of the user agent and be able to have borders at the same time.

Thanx.

DaveSW
06-12-2003, 10:27 AM
what's wrong with a div anyway? you can make your borders with css: <div style="border:1px solid #ffffff;"> and do all the other height things too. i think

stmasi
06-12-2003, 10:30 AM
I guess nothing would be wrong with using divs, but I can never seem to get them to "stretch" properly in the different browsers...only seems to work properly in IE.

I also need to be able to load other pages into the space where the different divs occupy...kinda like frames.

Thanx.

P.S. Also want to accomplish this without the use of javascript.

Robert Wellock
06-12-2003, 10:36 AM
.............

stmasi
06-12-2003, 11:21 AM
Huh?

Robert Wellock
06-12-2003, 11:35 AM
Typically 100% height is supposed to be relational to contents of the division, for example: http://www.xhtmlcoder.com/worthvalley/ not really the canvas although there is a CSS hack - use with caution.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>Robert's CSS Height 100% of Canvas Hack!
</title>
<style type="text/css">
<!--
body {
font-family: Georgia, serif;
margin:0;
padding:0;
height:100%; /* */
}
#lorem {
position:absolute;
left:0;
top:0;
padding:20px;
width:300px;
height:100%; /* */
color:#333;
border: 5px solid #ccc;
background: #f6f6f6;
color: green;
}
-->
</style>
</head>
<body>
<div id="lorem">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent imperdiet, nunc nec cursus sagittis, diam ipsum
mattis turpis, non blandit wisi quam ut dolor. Nullam quis
leo vitae orci tristique commodo. Donec mauris elit, mollis
vel, pharetra sit amet, sodales ac, nisl. Pellentesque tempus
nisl quis sapien gravida bibendum. Integer quis libero sit
amet odio lobortis rhoncus. Ut eu lectus. Proin augue wisi,
semper quis, dictum vitae, fermentum nec, nibh. Vestibulum
scelerisque, diam sed mattis mollis, elit magna aliquam sem,
eget imperdiet felis pede at metus. Curabitur pharetra
imperdiet augue. Duis dignissim dapibus mauris. Etiam quis
quam ac nibh commodo porttitor.
</div>
</body>
</html>

stmasi
06-12-2003, 11:40 AM
Cool!!!

Do you guyz just sit around and think all day long?!

8^)>

Now, here's the final request...

How would I do the following without javascript:

Div #1 = height: 100px
Div #2 = height: 15px
Div #3 = height: 100% of remaining height of canvas
Div #4 = height: 15px

Widths for all are 500px.

Thanx again.

Robert Wellock
06-12-2003, 11:48 AM
No, but I prefer it, to reading my Cisco Certified Network Associate (CCNA) material, :D.

stmasi
06-12-2003, 12:09 PM
In addition, it appears that the "strech" of the div only works in IE and O. NS and M "shrink" the div to about 100px justified at the top left of the user agent.

Thanx again.

nkaisare
06-12-2003, 01:31 PM
You'll have to use proper doctype in addition to the above. Thats why its better not to use CSS to get the stretch. The only way its possible currently is to use frames, as you currently do.

However, unlike your current implementation, I'd recommend the following change:
1. Use only body.html and foot.html with frameset (*,15)
2. In the body.html, use
<h1 id="head">HEADER</h1>
<div id="nav">Navigation</div>
<div id="main">...</div>

Use the styles:
h1#head{height: 100px; border-bottom: 1px solid #cc6; margin-bottom: 0; padding-bottom: 0}
div#nav {height: 15px; border: none}
div#main {border-top: 1px solid #cc6}

3. Use foot.html as normal
4. In the noframes part, give a link to body.html. This will take care of accessibility issues as well as search engine spidering

stmasi
06-12-2003, 01:36 PM
I'm not sure I completely understand your recommended changes.

Could you explain them in reference to my existing code?

Thanx.

nkaisare
06-12-2003, 01:56 PM
I have combined your hdr.htm, nav.htm and bdy.htm in a single html file (say body.html).

Your foot.html remains the same.

In frameset, you choose only 2 files (instead of 4 as you did before). There is no need to use iframe. In the main (frameset) page, within the <noframes> tag, give link to body.html, so that a frames-incapable browser can go to the body.html file. Since nav links are in this file already, the entire site is accessible to a non-frames browser as well.

HTH
Niket
--------------
tell him it's for a div
The answer will remain the same. Why do you need to do that with div? The question of semantics is not solved just by using div instead of table. If you noticed in the example above, I used <h1 id="head"> and not <div id="head">.

Robert Wellock
06-12-2003, 02:24 PM
I totally agree Niket, about 100% which is why I mentioned the "use with caution" and the words "CSS hack".

You can probally tell I have never been a fan of <iframe> since I was using XHTML 1.1 ;).

DaveSW
06-12-2003, 02:37 PM
Originally posted by nkaisare
The answer will remain the same. Why do you need to do that with div?

I've been trying to do it for a while to get my side menu background to go all the way down the page. It looks stupid when it stops part way. (so there :p LOL)

nkaisare
06-12-2003, 03:15 PM
divs do not stretch until the bottom of the page... height of a div is determined by its contents, unless explicitly specified using height: or some similar way. If you just want borders around the navigation, put borders around the enclosing div and the main content area instead. If you need background color stretching until the bottom, you'll need to use a trick. See for example
http://www.prism.gatech.edu/~gte207x/pyro.html
for emulating "stretching div" layout. Note that the divs do not actually stretch. It just seems that they do.

If this is not what you were looking for, show me a tables page. We can try and make it work together. I'll be glad to convert one more soul to CSS layouts :)

Robert Wellock
06-13-2003, 07:09 AM
What Niket is trying to tell you if you'd listen carefully is the div cannot be legally set to 100% of the canvas height, using CSS alone because the user-agent could theoretically scroll down to infinitum as would the division.

The reason the 100% width works is because we are taking into consideration visual media, which takes into account scrolling vertically rather than horizontally.

If you wanted to apply JavaScript you could then get a more correct representation of 100% of screen since the JavaScript would read the browser dimensions rather than something that cannot be truly quantified within the browser.

Hence the hack method has the illusion of working but like most visual hacks it uses nonsense to confuse the user-agent - just in-case anyone has lost the plot.

DaveSW
06-13-2003, 11:44 AM
That doesn't stretch at all for me in the way I mean...

here's my method, to do what I mean.

http://www.emdevelopments.co.uk/tollgate/third/index.htm

I just use a background image to simulate the background stretching. It's currently a template, which is why none of the links work.

nkaisare
06-17-2003, 10:10 AM
Originally posted by DaveSW
I just use a background image to simulate the background stretching. It's currently a template, which is why none of the links work.
Precisely!

In my example, I use a combination of background image and color to simulate background stretching for both left and right columns.
http://www.prism.gatech.edu/~gte207x/pyro.html
Its grey bg with brown bgimage (with repeat-y). Hence the left looks brown bg and right looks grey bg. Actually, both are transparent, and they do not stretch to the bottom of the div.

khaki
06-17-2003, 10:41 AM
Originally posted by Robert Wellock
...the div cannot be legally set to 100% of the canvas height, using CSS alone because the user-agent could theoretically scroll down to infinitum as would the division.

The reason the 100% width works is because we are taking into consideration visual media, which takes into account scrolling vertically rather than horizontally.... Robert.... can you explain that?
I am confused as to how width differs from height as it relates to 100%
(it's all "visual media"... no?)

This is a serious question (really)...
so how is it different...
and why will one way work...
and why should the other way not work?

this makes absolutely no sense to me.
:confused: k

Robert Wellock
06-19-2003, 11:48 AM
Because the Wizard of Frobozz told me so...

What do you know about screens, books word processing and writing in general?

Because humans tend to read from top to bottom and paper came before the VDU and DOS before windows.

It was considered that a new sentence begins above an old sentence so that is why you have keyboard keys like Page Down and Page Up.

khaki
06-19-2003, 12:16 PM
oh-brother :rolleyes:

if you don't know why...
you don't know why.

i guess I'll accept your Wizard of Frobozz explanation.
at least it makes just as much sense as the other explanation...
and somehow it seems less insulting to my intelligence :rolleyes:

I'll be sure to document your analysis right along along with Jona's equally definitive analysis:
"As far as the height issue, learn to deal with it. I have. Nothing is handed to you on a silver platter--at least not for me. Working the only way to receive anything in this world; and you don't always get what you worked for".

Although I must say... you certainly succeeded in straying much further from the question than Jona...
so you can take some sort of pride in that, I suppose :rolleyes:

So... to summize...
The reasons for the lack of a 100% HEIGHT capability in CSS are as follows:
Books
Paper (possibly also Rock, and Scissors... although not specifically mentioned)
DOS
My Keyboard
Silver Platters
Hard Work


well... now it all makes sense.
thanks
:rolleyes: k

Robert Wellock
06-19-2003, 12:54 PM
Now I am on another machine in a different building I might be able to complete what I was saying; remember the olden day scrolls they were rolled-up well that's where the scroll idea came from.

Basically is all down to human genetics and evolution and it being more pleasing to the human eye to read things that way thus seemed sensible the computers follow the same principals. So CSS inherted the same princapals and hence why it basically works on content.

khaki
06-19-2003, 01:57 PM
Because humans tend to read from top to bottom and paper came before the VDU and DOS before windows.
actually... humans read either right or left.... then down.*
Why that inspired the creators of CSS to forego any 100% HEIGHT consideration is anyone's guess (although I'm pretty sure it wasn't related to Paper, VDU, DOS, or Windows)

It was considered that a new sentence begins above an old sentence so that is why you have keyboard keys like Page Down and Page Up. It was also considered that letters follow letters (and words would follow words) in a horizontal line. Letters are not stacked on top of each other (nor are words). *
And those who first created written language never considered the possible need for a "Page Up" or "Page Down" key (although I did see the first primitive painting of the "Escape" key while viewing cave drawings in the Sonora Desert a few years back).

remember the olden day scrolls they were rolled-up well that's where the scroll idea came from. well... actually I'm a little too young to remember that.... but yes... I am aware of it ;)
But yes... they scrolled the paper.
And if there was a lot of stuff on the page... the scroll was bigger.
But if there wasn't a lot of stuff on the page...
they didn't just have a tiny little piece of paper about an inch high...
they had a full-size piece of paper (which I believe equals about 100% of the page... even though the contents of the page didn't quite use all of it :eek: )

Basically is all down to human genetics and evolution and it being more pleasing to the human eye to read things that and it thus seemed sensible the computers follow the same principals. So CSS inherted the same princapals. And you don't always get what you work for either :)
I just don't understand what any of this has to do with design.

C'mon... this is just stupid.
THINK!!!

If YOU were going to create something that was going to be used for design purposes....
why would you omit the ability to interpret 100% HEIGHT (especially if you are going to include the ability to interpret 100% WIDTH)?

Does that make any sense?
(by the way... the answer to that is "NO")

The screen itself is a real thing... like a piece of paper.
So let's use that analogy:

If I ask you to cut a piece of paper (width-wise) in half...
you would cut 50% off... which would create a left-half and a right-half.
But altogether... it equals 100% width.
AND.... correctly so.... CSS understands that entire concept.

Now if I ask you to cut the same piece of paper in half (length-wise)...
you would do the same thing as above...

although CSS doesn't accept that.
CSS will only cut the part that has something written on it :rolleyes:

When interpreting length (HEIGHT) CSS doesn't recognize that the page itself exists...
it only sees the content.

CSS doesn't do that with width. Whether there is anything written on the page or not... CSS sees the width as the entire width.
But.... CSS will not recognize length in the same manner.

So that is an inconsistancy, and a poorly formulated means by which to hand-cuff designers.
It's not a well thought-out reason (as you are failing to explain)... it's a flaw (and a rather major flaw when you consider that CSS is supposed to be a "design" language!)

The bottom-line is...
I like CSS.
It's a really really good technology.

But if some of you want to bury your heads in the sand and think that anyone who questions (or fails to use) any aspect of it should be insulted...
well...
it's time for a reality check.

So here it is:
a page is a page.
it is 100% wide by 100% high .... regardless if there is anything on the page or not.

so if anyone wants to argue that with me...
LETS GO!!!

:rolleyes: k


* excludes Japanese pictures (which is a different animal altogether)

DaveSW
06-19-2003, 03:04 PM
Niket... I don't know what that page does for you, but here's what it does for me. (attached file)
I want the entire background of the div to go to the entire height of the screen. Your example does nothing like this in any of my browsers. That is why I've used a simple background image to go the full height.

Edit: I've just realised what's wrong. Your method fails dismally on a high res screen. LOL.