stmasi
06-10-2003, 03:01 PM
Is there any way to set the HEIGHT of a table using CSS?
Thanx.
Thanx.
|
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. webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved. |