PDA

View Full Version : tables, we know they're bad, but are they necessary?



whackaxe
Aug 24th, 2004, 01:28 PM
i was just reading an article whilst searching for CSS hacks (more on that later) and it brought up the very good point that CSS hacks (which you will undoubtably have to use to get cross browser consistency) might brake things in futer browsers. this is all fine and dandy if your maintaining your blog or something, but what if it's for someone else? do you really have the money and time to go back over all of your previous projects and spend time (and hair ;)) fixing it. that's quite a scary prospect to be honest.

on the other hand, you could use tables, which are less likely to break in futer versions. (and lets face, often muc easier to implement than CSS).

an example:
i'm working on this very simple design at the moment which renders perfect in Firefox, but think of all the hacks and fixes you would have to use for IE (and whilst you're at it, tell me the most efficient ones :D)

symple.css


body
{
background-color: #e3e3e3;

margin-right: 20px;
margin-bottom: 20px;

}

div#logo
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;

position: absolute;
top: 20px;
left: 20px;

width: 250px;
height: 250px;

}

div#nav
{
background-color: white;

border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;

position: absolute;
top: 20px;
left: 290px;
right: 20px;

height: 269px;
width: auto;
z-index: 5;
}

div#main
{
background-color: white;
border: 2px #777777 solid;
position: absolute;
top: 290px;
left: 20px;
right: 20px;
z-index: 1;
padding: 10px;
}


html file:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>| theme: symple</title></title>

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

</head>

<body>

<div id="logo"> logo </div>
<div id="nav"> navigation</div>
<div id="main">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse dignissim, nisl et aliquet ullamcorper, justo neque volutpat nulla, at dignissim nisl quam eget nisl. Vivamus eleifend molestie libero. Donec nonummy augue blandit nunc dapibus fermentum. Nam semper volutpat wisi. Quisque laoreet vulputate lorem. Curabitur sapien. Fusce sit amet erat. Sed eros sapien, sodales et, placerat ac, consequat eu, erat. Praesent posuere. Vestibulum ipsum. Suspendisse potenti. Cras sit amet ligula sit amet sem laoreet luctus. Quisque ut sapien. Maecenas nec arcu non est interdum commodo. Maecenas egestas leo et wisi. Vestibulum id urna.


</div>


</body>

</html>



discuss :)

mindlessLemming
Aug 24th, 2004, 01:45 PM
(Without having loaded it up) I can't see why you would need any hacks for that layout...

None the less, you asked a question.
I have no issues selling my clients standards based designs because I don't hack irresponsibly. IE/PC hacks are delivered via conditional comments, so no new browser *should* ever pay attention to it. I also don't hack unless I have to - if that means a couple of extra nested divs, that's a price I'm willing to pay.
If one of the good browsers doesn't agree with the others, I try to find an amicable solution instead of hacking for that browser. I've built a tableless site per month for the last 9 months and it just gets easier.
Forget about the damn tables.
It's over ;)

mcrilly
Aug 24th, 2004, 01:52 PM
OK,

Tables are designed to control the layout of tabular data, such as results from a football league or a test. Using tables for layout may ensure your website displays correctly in future browsers, but it also ensures you waste bandwidth, storage space (though the amount may seem trivial, but it all adds up) and your sites will take longer to render and therefore display slower.

Tables are designed for tabular data, not to define the presentational logic of your content. CSS is designed to allow developers/designers to seperate the presentational logic from the markup to allow for clean, fast and efficient mark up... as it should be.

Indeed CSS hacks are required, but mostly to make things work in IE (which doesn't support CSS very well if you ask me) In the future when your clients need a hack removing because the top level browsers support the CSS you use and hacks are no longer needed, they can pay you to do it. More money for you then, is it not?

Things like this pressure developers like MS in to making their software support things like CSS, and comply with things like the standards.

Also, in the CSS you've outlined above you could use a <h1> tagged styled with CSS to display your logo. That's what I do, instead of going DIV crazy :O)

I've written this quickly to excuse any bad English and I hope I haven't missed anything out.

whackaxe
Aug 24th, 2004, 01:55 PM
for a start, i can't even get the z-index to work in IE :p i can't find an easy way to get the content div to span the whole screen (in IE i use 100% but in moz its left:20px and right: 20px). in IE i can't get the navigation div, to span the whitespace on the right hand side.

couple of questios. how do you conditionaly insert CSS. javascript? how would nesting DIVs solve the problem.

god, ive been out of HTML/CSS way to long :(

mcrilly
Aug 24th, 2004, 01:59 PM
Hi,

You can conditionaly insert CSS via a server side scriptnig such as PHP or Perl, or yes, as you stated via JavaScript - But I wouldn't suggest using JS for this.

It's not a case of nesting DIV's, but in what order you have these DIV's and what the CSS rules for these DIV's is?

When you say, "span the whole screen" doyou mean you want a DIV to go from the left to the right of the viewport?

whackaxe
Aug 24th, 2004, 02:12 PM
what i need is the logo DIV to stay at 250*250 pixels, and the navigation div to span from the logo+20px to the right of the screen (20px margin;) this works all nice in firefox if you take a look the nav and content divs sjhould be seamless too. so it not liquid, design really, its jello design

it just needs fixing in IE really

mcrilly
Aug 24th, 2004, 02:20 PM
Well as much as I'd love to help you, I'm in work at the moment and I have 1,300,000 worth of debt to collect :eek: :eek: :eek: :eek:

I'll see what I can do later on this afternoon/evening if no one else jumps in and takes my place.

Sorry about that!

]|V|[agnus
Aug 24th, 2004, 04:41 PM
Andrew touched on probably the best way to feed styles to IE. When you need to get more specific, there are future-proof ways of including IE5 specific styles (box model, etc.) and even IE6 specific styles. Just gotta look into it.

To answer the question posted in the subject (yet again): No. No they're not.

mcdougals4all
Aug 24th, 2004, 04:44 PM
A method to deliver specific CSS rules to IE is to use !important. Like:

#content {
background:white !important;
background:black;
color:black !important;
color:white;
}

IE ignores the rule containing !important, but compliant browsers give the associated rule precedence. So in the example above, IE users see a black background with white text, while Firefox, Opera, etc. see a white background with black text.

Here's more about !important:
http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules

Another method is to use IE conditional statements. Like:

<!--[if IE]>
<style type="text/css">
#content {
background: black;
color: white;
}
</style>
<![endif]-->


Browsers other than IE ignore everything in between, and you can also specify version number.

More about IE conditional statements:
http://www.dithered.com/css_filters/html_only/conditional_comments_ie.html

I've always used the first method, and there are others. Try searching google for CSS filters.

mcrilly
Aug 24th, 2004, 04:51 PM
A method to deliver specific CSS rules to IE is to use !important. Like:

#content {
background:white !important;
background:black;
color:black !important;
color:white;
}

IE ignores the rule containing !important, but compliant browsers give the associated rule precedence. So in the example above, IE users see a black background with white text, while Firefox, Opera, etc. see a white background with black text.


Do they?

Are you sure other browsers won't apply the new rule after the rule containing "!important"? All browsers should get the same result, should they not?

It should be like this...



#content {
background: white;
background: black !important;

color:black;
color:white !important;
}


This will achieve what you wanted.

mcdougals4all
Aug 24th, 2004, 05:36 PM
Feel free to test it out. It actually has the same effect whether the !important rule is declared first or last.

mcrilly
Aug 24th, 2004, 05:43 PM
Well that doesn't actually make any logical sense but OK :rolleyes:

mcdougals4all
Aug 24th, 2004, 06:00 PM
Maybe not in terms of what we normally expect from the cascading nature of CSS -- that the second rule would override the first since they are applied to the same element.

But the !important simply makes its associated rule more important than other rules applied to the same element.

mcrilly
Aug 24th, 2004, 06:08 PM
You know what! I got confused because I had it stuck in my head that "!" meant "NOT" in this case!!!

DO'H!!!

whackaxe
Aug 24th, 2004, 10:40 PM
ok ive inserted this into my page


<!--[IF IE]>
<style type="text/css">
div#nav
{
position: absolute;
float: middle;
top: 20px;
left: 290px;

height: 272px;
}

div#main
{
width: 100%;
}

</style>
<![endif]-->


now ive tried using ll types of positioning in IE realtive, static and in this example absolute. they all have a problem which i can't fix. if anyone has any idea, theyare more than welcome :(

bradyj
Aug 24th, 2004, 10:48 PM
Don't you need a width to define a float? I haven't gone back into the first bits of this debate, but I just saw that.

whackaxe
Aug 24th, 2004, 10:55 PM
well i can't really use any width, because there has to be a 290px margin (logo div + margins) and %s would screw it up. jello design ya see :(

bradyj
Aug 24th, 2004, 10:56 PM
As a side note, I always delve my junk out to IE in a different way, and allow the modern browsers to ignore it, similiar to your methods:



#indexcenter div {
display: block;
float: left;
width: 230px;
padding: 0px 0px 0px 0px;
margin: 20px 0px 30px 0px;
}
/* hide from IE mac and IE PC \*/
html>body #indexcenter div {
display: block;
float: left;
width: 230px;
padding: 0px 20px 0px 0px;
margin: 20px 0px 30px 0px;
}
/* end hide from IE mac and IE PC */

IE PC can't read the html>body, it chokes on that -- Mac IE can read that, but the \*/ kills it.
So that bottom option is for modern browsers, the top for all things IE.

If you want to do three (which I hope not and don't recommend) you can over ride them all:


#indexcenter div {
display: block;
float: left;
width: 230px;
padding: 0px 0px 0px 0px;
margin: 20px 0px 30px 0px;
}
/* Mac IE will see it, IE PC won't and everyone else will but will also read the next one instead */
html>body #indexcenter div {
display: block;
float: left;
width: 230px;
padding: 0px 20px 0px 0px;
margin: 20px 0px 30px 0px;
}
/* hide from IE mac and IE PC, but the modern browsers get it \*/
html>body #indexcenter div {
display: block;
float: left;
width: 230px;
padding: 0px 20px 0px 0px;
margin: 20px 0px 30px 0px;
}
/* end hide from IE mac and IE PC */


redundant, but can be useful. That iImportant doesn't always work for me, but I think that's an error somewhere between my chair and mouse:)

bradyj
Aug 24th, 2004, 10:59 PM
well i can't really use any width, because there has to be a 290px margin (logo div + margins) and %s would screw it up. jello design ya see :(

Yeah, that's a pain... that's almost why I liked IE's box model, though it's wrong, it allowed you to make the content perfect dimensions.

Couldn't you make the margin a percentage and em, but also make the element a larger percentage and em? That logo or background image would resize accordingly then, kinda like:
http://browsehappy.com/people/ron/

Look at the 'switched to: firefox' little orange rounded rectangle. That's an em size with a background image, doesn't it resize then, or am I way off on this one?

edit: here's their code:


#subject dd.switched-to div {
background: #FFF url("../imgs/switched_left.gif") 0 100% no-repeat;
margin: 0 0 0 -10px;
padding: 0 0 0 9px;
}

#subject dd.switched-to div span {
background: url("../imgs/switched_right.gif") 100% 100% no-repeat;
display: block;
padding: 4px 12px 5px 0;
text-align: right;
}

http://browsehappy.com/_share/imgs/switched_left.gif
http://browsehappy.com/_share/imgs/switched_right.gif

whackaxe
Aug 24th, 2004, 11:11 PM
hrm, no background image for me. the worst is i think i got it working on IE yesterday :p

mindlessLemming
Aug 25th, 2004, 12:28 AM
IE ignores the rule containing !important, but compliant browsers give the associated rule precedence.

IE doesn't ignore the rule, it just ignores the !important bit. No precedence is given to rules containing !important, but IE still aplies the value.

Back on topic (sort of)

Use tables = easy layout (apparently)

Use tables = possible phone call in 6 months from your client saying that they are being sued for inaccessibility and are in turn counter sueing you.

]|V|[agnus
Aug 25th, 2004, 12:38 AM
Use tables = bad at life?

No? Too harsh? I suck at this... :p

whackaxe
Aug 25th, 2004, 07:04 PM
so no one can solve my problem? oh dear... :(

bradyj
Aug 25th, 2004, 07:33 PM
so no one can solve my problem? oh dear... :(

so what's the problem? Using CSS that won't break in future browsers? Just like I said:


html>body #yourcustomidorclass


After the regular version will always take precedence in modern browsers... or is there another question in this mess I'm missing, it's a long thread:)

rmedek
Aug 25th, 2004, 07:57 PM
I think he's talking about having the expandable div that always has the right margin. I came up with this:
CSS:
body {
background: #e3e3e3;
margin: 0;
padding: 0;
}

#wrapper {
margin: 20px;
position: relative;
}

#logo {
background: #fff;
border: solid 2px #777;
width: 250px;
height: 250px;
position: absolute;
top:0;
left:-270px;
}

/* IE hack */
html>body #logo {
position: absolute;
left: 0;
}

#nav {
background: #fff;
border: solid 2px #777;
border-bottom-color: white;
border-bottom-width: 1px;
height: 269px;
margin: 0 0px 0 270px;
}

#main {
background: white;
border: 2px #777 solid;
padding: 10px;
}
There might be an easier way, but that's what I came up with :) I don't know why IE shifts the positioning over unless the negative margin is there, but it does, hence the hack.