Hi,
Seems like there's lots of folks here who'd be more than happy to explain this to me. I see the power of a good negative-margin CSS layout, and the zengarden is very cool, but there's no way that I can see to do tables in CSS.
What I mean is, ALA and Zen and whatever else all display purely text -- 'easy' content. What about when I want to display a form, or a table with columns that line up but size to their content? How come a <table width="100%"> inside a div takes the width of the page instead of the width of the div?
I'd like to experience all of the CSS advantages, but I don't see how to create a table inside a div. Is there an easy solution, or is CSS just not equipped for this yet?
The specific page in question: <!-- m --><a class="postlink" href="http://kitchen.uwmike.com/?action=submit">http://kitchen.uwmike.com/?action=submit</a><!-- m -->
Currently it's a hybrid-- some divs and one table.I think when things lend themselves to tabular layout, use tables.Originally posted by DUNSEL
I think when things lend themselves to tabular layout, use tables.
That was my feeling also, but threads like this one (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?threadid=42418">http://www.webdeveloper.com/forum/showt ... adid=42418</a><!-- m -->) are full of people who seem determined that a table layout is a sign of being 'scared' or 'unwilling to learn', so I was just curious if there was a way to do this.What the CSS purists dislike is the use of tables for page layout. If some portion of the data on your page is of a tabular nature, then using a table is fine: that's what it's supposed to be for. It's when you use a table for non-tabular material (such as displaying multiple columns of text, creating headers and footers, etc.) that the purists get upset.
Think of it this way: the <table> tag is for something you'd see in a book that could be labeled: "Table 1: Some Title", but not for the rest of the information on that page.Well let the code nazis do what they will. TO me, the simplest solution that meets the need perfectly is the best one. I can't see ever altering that viewpoint, although one never knows.Originally posted by NogDog
Think of it this way: the <table> tag is for something you'd see in a book that could be labeled: "Table 1: Some Title", but not for the rest of the information on that page.
I'm aware of that.
The difficult is that my content (the form), contains genuine, legitimate, tables, but the browser doesn't want to display a table inside a DIV.
What I want is this:
1. div-content has minimum (default width)
2. table width sizes to maximum available within div-content
3. if table's content exceeds available width, gracefully expand the width of div-content to make room for it
I haven't been able to acheive this with CSS, but it's a snap with tables.1. Page content is written and marked up with semantically appropriate HTML elements. When done, your page should make sense and be operational without having link stylesheets, script elements, and generic HTML elements(<div> and <span>)
2. The sketch (image file) of the layout is created. Stylesheet is written. In the process generic HTML elements can be added to page markup if needed for positioning and styling.
3. Scripting components are added to enchance page functionality.Originally posted by Vladdy
1. Page content is written and marked up with semantically appropriate HTML elements. When done, your page should make sense and be operational without having link stylesheets, script elements, and generic HTML elements(<div> and <span>)
2. The sketch (image file) of the layout is created. Stylesheet is written. In the process generic HTML elements can be added to page markup if needed for positioning and styling.
3. Scripting components are added to enchance page functionality.
I understand this utopian view of the whole business. The issue is that my content is not pure text with the occasional image or link... it's a wide form involving a table nested inside another table.
Either the tables need to become divs somehow, or I need to know how to get a table to co-operate with being inside a div.What I want is this:
1. div-content has minimum (default width)
2. table width sizes to maximum available within div-content
3. if table's content exceeds available width, gracefully expand the width of div-content to make room for it
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>overflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
div {
width:60px;
border:1px solid red;
}
table {
width:100%;
overflow:visible;
}
-->
</style>
</head>
<body>
<div>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>default width</td></tr>
</table>
</div>
<br />
<div>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>I'mTooBigGiveMeSomeRoom</td></tr>
</table>
</div>
</body>
</html>Originally posted by Fang
...
In Firefox, it runs over the border, rather than expand the DIV. Is this a browser-bug, or is that the standards-compliant behaviour?
Firefox gives the compliant behaviour (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow">http://www.w3.org/TR/REC-CSS2/visufx.html#overflow</a><!-- m -->), but there is a fix:
div {
display:table;
width:60px;
border:1px solid red;
}Originally posted by Fang
Firefox gives the compliant behaviour (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow">http://www.w3.org/TR/REC-CSS2/visufx.html#overflow</a><!-- m -->), but there is a fix:
div {
display:table;
width:60px;
border:1px solid red;
}
Wow...
...
it works.
*looks up the 'display' rule and wonders why it's never been mentioned until now*
Thanks. I'll know where to come back to if I have more questions.Looks like I jumped too soon.
The div expands correctly in Firefox, but not in IE: <!-- m --><a class="postlink" href="http://kitchencss.uwmike.com/index2.php">http://kitchencss.uwmike.com/index2.php</a><!-- m -->
Looking at it now, I'm thinking it might be preferable to actually have the table break the div without expanding it, so that it continues contains the text properly: <!-- m --><a class="postlink" href="http://kitchencss.uwmike.com/index3.php">http://kitchencss.uwmike.com/index3.php</a><!-- m -->
However, in either case, IE botches it.
Any suggestions?Originally posted by Fang
display:table;
where is this mentioned? looking at <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#display">http://www.w3.org/TR/REC-CSS1#display</a><!-- m --> there is no mention of table. thx
Originally posted by pawky
where is this mentioned? looking at <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#display">http://www.w3.org/TR/REC-CSS1#display</a><!-- m --> there is no mention of table. thxYou're looking in the CSS1 spec. The CSS in question is CSS2. See: <http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop>.Originally posted by fredmv
You're looking in the CSS1 spec. The CSS in question is CSS2. See: <http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop>.
haha, thx
i should have looked there also just found it in css1 and didnt think to look in css2. thank you Your implementation is incorrect.
Remove the inline style from the table (width:1000px in css 100px ?).
Remove the <p> from within the table.
Add #content p {max-width:770px;}
Change #mytable width:100%;
This will allow the table contents to expand as required while keeping the text within the content area.
css error in #loginbar width: 100%-1px;Originally posted by Fang
css error in #loginbar width: 100%-1px;
u can do that?
u can have a certain % minus a certain amount? if so, sweet Originally posted by Fang
Your implementation is incorrect.
Remove the inline style from the table (width:1000px in css 100px ?).
Remove the <p> from within the table.
Add #content p {max-width:770px;}
Change #mytable width:100%;
This will allow the table contents to expand as required while keeping the text within the content area.
css error in #loginbar width: 100%-1px;
Sorry, I don't fully understand.
The inline style in the table was only to demonstrate that if there was a large amount of content (ie, a wide form), it would break the layout. And I don't want to limit the width of 'p'... it should expand to fill the page.
I saw the problem with the loginbar, but I'm not sure why that's illegal or what the fix is. (FF and IE both render that as expected, and without it both make the bar 1px too wide with the border.)Originally posted by pawky
u can do that? u can have a certain % minus a certain amount? if so, sweet
No, you can’t (AFAIK…), that’s why that particular rule generated an error.Okay, I didn't really solve the problem, but it works now. I've narrowed the wide table that was the problem, and just locked it with
body {
min-width: 795px;
}
IE doesn't reconize this, but FF does, and that's good enough for me.
Final Result (<!-- m --><a class="postlink" href="http://kitchencss.uwmike.com/layout/">http://kitchencss.uwmike.com/layout/</a><!-- m -->) (critiques welcome)In IE with a narrow window the main text block drops below the right column.Originally posted by Fang
In IE with a narrow window the main text block drops below the right column.
I'm aware of this problem, but I don't really know the solution.
I'm currently limiting the width with the width property of 'p', but I could use 'max-width' as well. FF will give the same output, and IE will completely ignore it. Would this be a better tradeoff?
Seems like there's lots of folks here who'd be more than happy to explain this to me. I see the power of a good negative-margin CSS layout, and the zengarden is very cool, but there's no way that I can see to do tables in CSS.
What I mean is, ALA and Zen and whatever else all display purely text -- 'easy' content. What about when I want to display a form, or a table with columns that line up but size to their content? How come a <table width="100%"> inside a div takes the width of the page instead of the width of the div?
I'd like to experience all of the CSS advantages, but I don't see how to create a table inside a div. Is there an easy solution, or is CSS just not equipped for this yet?
The specific page in question: <!-- m --><a class="postlink" href="http://kitchen.uwmike.com/?action=submit">http://kitchen.uwmike.com/?action=submit</a><!-- m -->
Currently it's a hybrid-- some divs and one table.I think when things lend themselves to tabular layout, use tables.Originally posted by DUNSEL
I think when things lend themselves to tabular layout, use tables.
That was my feeling also, but threads like this one (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?threadid=42418">http://www.webdeveloper.com/forum/showt ... adid=42418</a><!-- m -->) are full of people who seem determined that a table layout is a sign of being 'scared' or 'unwilling to learn', so I was just curious if there was a way to do this.What the CSS purists dislike is the use of tables for page layout. If some portion of the data on your page is of a tabular nature, then using a table is fine: that's what it's supposed to be for. It's when you use a table for non-tabular material (such as displaying multiple columns of text, creating headers and footers, etc.) that the purists get upset.
Think of it this way: the <table> tag is for something you'd see in a book that could be labeled: "Table 1: Some Title", but not for the rest of the information on that page.Well let the code nazis do what they will. TO me, the simplest solution that meets the need perfectly is the best one. I can't see ever altering that viewpoint, although one never knows.Originally posted by NogDog
Think of it this way: the <table> tag is for something you'd see in a book that could be labeled: "Table 1: Some Title", but not for the rest of the information on that page.
I'm aware of that.
The difficult is that my content (the form), contains genuine, legitimate, tables, but the browser doesn't want to display a table inside a DIV.
What I want is this:
1. div-content has minimum (default width)
2. table width sizes to maximum available within div-content
3. if table's content exceeds available width, gracefully expand the width of div-content to make room for it
I haven't been able to acheive this with CSS, but it's a snap with tables.1. Page content is written and marked up with semantically appropriate HTML elements. When done, your page should make sense and be operational without having link stylesheets, script elements, and generic HTML elements(<div> and <span>)
2. The sketch (image file) of the layout is created. Stylesheet is written. In the process generic HTML elements can be added to page markup if needed for positioning and styling.
3. Scripting components are added to enchance page functionality.Originally posted by Vladdy
1. Page content is written and marked up with semantically appropriate HTML elements. When done, your page should make sense and be operational without having link stylesheets, script elements, and generic HTML elements(<div> and <span>)
2. The sketch (image file) of the layout is created. Stylesheet is written. In the process generic HTML elements can be added to page markup if needed for positioning and styling.
3. Scripting components are added to enchance page functionality.
I understand this utopian view of the whole business. The issue is that my content is not pure text with the occasional image or link... it's a wide form involving a table nested inside another table.
Either the tables need to become divs somehow, or I need to know how to get a table to co-operate with being inside a div.What I want is this:
1. div-content has minimum (default width)
2. table width sizes to maximum available within div-content
3. if table's content exceeds available width, gracefully expand the width of div-content to make room for it
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>overflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
div {
width:60px;
border:1px solid red;
}
table {
width:100%;
overflow:visible;
}
-->
</style>
</head>
<body>
<div>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>default width</td></tr>
</table>
</div>
<br />
<div>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>I'mTooBigGiveMeSomeRoom</td></tr>
</table>
</div>
</body>
</html>Originally posted by Fang
...
In Firefox, it runs over the border, rather than expand the DIV. Is this a browser-bug, or is that the standards-compliant behaviour?
Firefox gives the compliant behaviour (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow">http://www.w3.org/TR/REC-CSS2/visufx.html#overflow</a><!-- m -->), but there is a fix:div {
display:table;
width:60px;
border:1px solid red;
}Originally posted by Fang
Firefox gives the compliant behaviour (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow">http://www.w3.org/TR/REC-CSS2/visufx.html#overflow</a><!-- m -->), but there is a fix:
div {
display:table;
width:60px;
border:1px solid red;
}
Wow...
...
it works.
*looks up the 'display' rule and wonders why it's never been mentioned until now*
Thanks. I'll know where to come back to if I have more questions.Looks like I jumped too soon.
The div expands correctly in Firefox, but not in IE: <!-- m --><a class="postlink" href="http://kitchencss.uwmike.com/index2.php">http://kitchencss.uwmike.com/index2.php</a><!-- m -->
Looking at it now, I'm thinking it might be preferable to actually have the table break the div without expanding it, so that it continues contains the text properly: <!-- m --><a class="postlink" href="http://kitchencss.uwmike.com/index3.php">http://kitchencss.uwmike.com/index3.php</a><!-- m -->
However, in either case, IE botches it.
Any suggestions?Originally posted by Fang
display:table;
where is this mentioned? looking at <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#display">http://www.w3.org/TR/REC-CSS1#display</a><!-- m --> there is no mention of table. thx
Originally posted by pawky where is this mentioned? looking at <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#display">http://www.w3.org/TR/REC-CSS1#display</a><!-- m --> there is no mention of table. thxYou're looking in the CSS1 spec. The CSS in question is CSS2. See: <http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop>.Originally posted by fredmv
You're looking in the CSS1 spec. The CSS in question is CSS2. See: <http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop>.
haha, thx
i should have looked there also just found it in css1 and didnt think to look in css2. thank you Your implementation is incorrect.Remove the inline style from the table (width:1000px in css 100px ?).
Remove the <p> from within the table.
Add #content p {max-width:770px;}
Change #mytable width:100%;
This will allow the table contents to expand as required while keeping the text within the content area.
css error in #loginbar width: 100%-1px;Originally posted by Fang
css error in #loginbar width: 100%-1px;
u can do that?
u can have a certain % minus a certain amount? if so, sweet Originally posted by Fang Your implementation is incorrect.
Remove the inline style from the table (width:1000px in css 100px ?).
Remove the <p> from within the table.
Add #content p {max-width:770px;}
Change #mytable width:100%;
This will allow the table contents to expand as required while keeping the text within the content area.
css error in #loginbar width: 100%-1px;
Sorry, I don't fully understand.
The inline style in the table was only to demonstrate that if there was a large amount of content (ie, a wide form), it would break the layout. And I don't want to limit the width of 'p'... it should expand to fill the page.
I saw the problem with the loginbar, but I'm not sure why that's illegal or what the fix is. (FF and IE both render that as expected, and without it both make the bar 1px too wide with the border.)Originally posted by pawky
u can do that?
u can have a certain % minus a certain amount? if so, sweet No, you can’t (AFAIK…), that’s why that particular rule generated an error.Okay, I didn't really solve the problem, but it works now. I've narrowed the wide table that was the problem, and just locked it with
body {
min-width: 795px;
}
IE doesn't reconize this, but FF does, and that's good enough for me.
Final Result (<!-- m --><a class="postlink" href="http://kitchencss.uwmike.com/layout/">http://kitchencss.uwmike.com/layout/</a><!-- m -->) (critiques welcome)In IE with a narrow window the main text block drops below the right column.Originally posted by Fang
In IE with a narrow window the main text block drops below the right column.
I'm aware of this problem, but I don't really know the solution.
I'm currently limiting the width with the width property of 'p', but I could use 'max-width' as well. FF will give the same output, and IE will completely ignore it. Would this be a better tradeoff?