1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS 100% or HTML and CSS?

Discussion in 'HTML & Website Design' started by Bulishel, Aug 10, 2007.

0
Page 2 of 2
  1. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Ok sorry for double post but few other things about why is css better popped in my mind.

    1) CSS layout is usually more SEO and search engines index it better (this is true only when styles are coded smartly and clean).

    2) You can change the order of divs... this means that you can select which part of your site you want to load first... So for example you will see the text while some eye candy graphics are still loading.

    3) And one more reason why CSS loads faster. It is because layout made in css will be about +-50% smaller than the same layout made using tables. Just try converting one of your layouts from CSS to tables and you will see that the file is suddenly almost twice as big (again this will be visible mainly at medium or heavy sized websites, not some simple blogs etc....)
     
    risoknop, Jan 15, 2008 IP
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #22
    I'm sorry, but I have to disagree. CSS does load/render/what-ever-you-want-to-call-it quicker than a table based layout when you're on dial-up, especially when designers use tables to chop up images. I'm not a CSS purist, but I try to use CSS as far as possible, and only use a table when I need to. I know getting an equal-height, three-column css layout without javascript or faux columns to work in all browsers can be a bitch but sticking everything in a table is justa cop out IMHO.
     
    qazu, Jan 15, 2008 IP
  3. jeeky

    jeeky Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    I personally think that designers use Strict XHTML, Pure CSS, and table-less not only to flex their power with designing, but to show that they can do a good job, and it's still accessible, you have to know that tables and whatnot look like crap on a mobile phone or an old browser. CSS can just be turned off or older browsers just wont accept it, but they will still get the information.
     
    jeeky, Jan 15, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #24
    ANOTHER arguement that makes little or no sense - ESPECIALLY in terms of 'older browsers' - unless of course you are going all the way back to Mosaic, Viola, Midas, IE2, Netscape 2 or some other pre HTML 3 browser.

    You'll excuse me if I scoff a bit - but as I've said a few times when a 386SX/16 running nyetscape 4.x or IE 4 with only 8 megs of RAM can handle a table layout JUST FINE without even breaking a sweat, I have to call a bit of bullshit whenever I hear that 'tables on older and/or less capable browser' rubbish... anyone creating a 'modern' device that cannot handle what was commonplace a decade ago on a quarter the hardware (I'm ballparking an 150mhz ARM for comparison) probably needs a brick upside the head. Of course, if people would bother OPTIMIZING their shit images, reducing the number of files through image recombination, and stopped coding crap bloated pages where half a meg is 'lightweight' - they probably wouldn't be having these issues.

    Seriously, there is NO reason that THIS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>3 Column Wacko SEO tables!?!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- <link href="screen.css" rel="stylesheet" type="text/css" media="screen" /> -->

<style type="text/css">
* {
	margin:0px;
	padding:0px;
}

body, html {
	height:100%;
}

table {
	border-collapse:collapse;
}

H1 {
	font-size:36px;
	line-height:48px;
	height:48px;
	padding:0px 8px;
	background-color:#FFE;
	position:relative;
	z-index:5000;
	margin-bottom:-48px;
}

#middle {
	width:100%;
	height:100%;
	empty-cells:show;
	table-layout:fixed;
}

#middle td {
	vertical-align:top;
}

td.content {
	padding:56px 8px 56px;
	background-color:#EEF;
}

td.nil {
	height:1px;
}

td.navigation {
	padding:55px 8px 56px;
	margin-top:-48px;
}

td.navigation,
td.nil {
	width:176px;
	background-color:#EFF;
}

td.sidebar {
	padding:56px 8px 56px;
	width:176px;
	background-color:#FEE;
}

#footer {
	height:32px;
	font-size:14px;
	line-height:16px;
	padding:8px;
	text-align:center;
	margin-top:-48px;
	background-color:#EFE;
}

</style>

</head><body>

<h1>3 Column Wacko SEO tables!?!</h1>

<table id="middle">
	<tr>
		<td class="nil"></td>
		<td class="content" rowspan="2">
			<p>Content</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
		</td>
		
		<td class="sidebar" rowspan="2">
			<p>Sidebar</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
		</td>  
	</tr>
	
	<tr>
		<td class="navigation">
			<p>Navigation</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
			<p>Blah blah blah</p>
		</td>
	</tr>
</table>

<div id="footer">
	<p>This craziness brought to you by Jason M. Knight (aka deathshadow)</p>
	<p>&copy; Paladin Systems North 2007</p>
</div>

</body></html>
    Code (markup):
    would load ANY slower than a DIV layout - in fact it should load FASTER than most equivalent CSS/DIV layouts because... IT'S LIKELY LESS CODE. Less code transferred = faster, anyone who tells you otherwise is packing you full of manure. Let's see a content first 100% height model three column layout in less code...

    ... and the 'render' issue is also taken out of the equation since the table is set to table-layout:fixed - telling browsers to render the content as soon as it's recieved.

    The problem is people have mis-coded/mis-used/abused tables to death - these same people do the exact same **** when they work with DIV's, so it's no improvement at all. Either way most of the time you end up sitting there waiting for the fifty to eighty odd sub-images created by some fireworks/dreamweaver/photoshop /b/-tard to load, all because they gave no thought during playing in their goofy paint program to how the images would actually work on the page.

    There are so many wild claims against tables that are nothing more than fearmongering and ignorance... YES, using floats and DIV's brings a different level of versatility (particularly on reskinning without touching the HTML), but if you have to dig knee-deep into REAL hack territory just to use them, you have NO EXCUSE to be calling VALID markup a hack... When the alternative uses 50% more CSS and about the same HTML, you have NO EXCUSE for claiming it's going to 'load faster'... etc, etc, etc.
     
    deathshadow, Jan 15, 2008 IP
  5. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #25
    You might be right at some points you made but...

    You must look to the future. Internet is no longer only in computers, it is used more and more in mobile devices, like in mobile phones, cars (gps) etc. And this trend will continue.

    Despite all disadvatages using tables posses (I have already listed few of them), the major flaw of tabled layouts is their counter-intuitiveness.

    Using tables destroys logical flow in page. For instance, when you have two columns (left and right), information stored in left column ought to be logically preceding information stored in right column. This means that tabled layouts are less accessible than css layouts.

    Soon, internet will be used also in devices that aren't screen-based. In cars there will be voice-based devices. Also internet for blind people will be probably voice-based. These applications will be very dependent on logical flow.

    Using tabled layout mixes content of the website with information about how should the content appear on the screen. I mean this is another reason why tables are counter-intuitive or just plain illogical. On the other hand, css stores appearance of website in isolated files.

    And one more thing. In CSS you can very easy utilize your website for printed version, still in single stylesheet.
     
    risoknop, Jan 15, 2008 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #26
    Only if you set up your layout to render properly when the browser window's width is set to about 750px or so (making it "800x600 compatible"). Ignoring "800x600" compatibility will require a separate printer stylesheet.

    Besides, you should use a printer stylesheet anyway - there's a lot of crap on Web pages (like menus, ads and so forth) that don't even belong on the printed page (I will admit, I am equally guilty of not doing this, but my pages typically don't have ads on them).
     
    Dan Schulz, Jan 15, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #27
    Ooo ooo! Ooo! Dan! Question!

    If a site is flex-width with min an max width, an the min makes the full site still show at 800X600 machines--- if sent to a printer, will the printer try to print that, or will it try to print the wider width you've set??

    I don't have a printer so I can't test, but if it accomodates the min width then I'm cool printing at least one site : )
     
    Stomme poes, Jan 15, 2008 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #28
    It should. But again, it's not something you want to leave to chance anyway, which is why I recommend using a printer stylesheet.
     
    Dan Schulz, Jan 16, 2008 IP
  9. TechieGuy

    TechieGuy Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #29
    I use both a screen and printed stylesheet for my blog and have had no problems. I used a CSS layout at one time, but the amount of time and effort it took to make it look the same in all browsers was not worth it.

    I agree that CSS is the better alternative, however, I don't think it is ready for primetime yet. Compared to table layout it is still relatively new.

    For me, I went back to the tables (with CSS providing the actual layout) and have had now issues. I will probably go back to CSS again in the future, possibly when I learn more about it.
     
    TechieGuy, Jan 16, 2008 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #30
    So, you'd rather update 200-300 files instead of edit a value in a stylesheet when a client changes his mind about something? all that maintenance time will add up to multiple times the time spent on making it work cross-browser.

    using tables for layout is semantically wrong, and UNPRODUCTIVE.
     
    soulscratch, Jan 16, 2008 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #31
     
    Dan Schulz, Jan 16, 2008 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #32
    Well, actually no... That's when CGI/SSI/SGC/PAFNA comes in handy. Once you start using 'include' be it php, asp, perl, SHTML, what have you, that arguement ALSO doesn't hold water.

    Really? See, that "It's not tabular data" rubbish never holds a lot of weight with me, but then I look at my copy of American Heritage and come across:

    An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form.

    ALL content is 'data', if you are dividing it into columns and/or rows that SOUNDS like tabular data to me - not to deprecate the W3C or a great many web designers, but it often seems they need a dictionary since I wasn't aware one could talk down to tags in a condescending fashion. Such misues of the language depreciates the value of their work. Oh the humanity it's such a mute point I might just go rouge.

    Mind you, abusing it to make cutesy borders, THAT's non-semantic. (but then, you could say that about sandbag DIV's or any other 'empty' tag as well)

    and spending three hours throwing hacks at a layout you could code in seconds with a table is not?
     
    deathshadow, Jan 17, 2008 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #33
    ^I thought soulscratch's comment was directed towards Techguy who said he would maybe go back to CSS someday but doesn't use it now. Thus, all the styling is in his HTML and if he manages/builds a large site, he'd have to edit 200 or whatever pages.
     
    Stomme poes, Jan 17, 2008 IP
  14. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #34
    jamesicus, Jan 17, 2008 IP
  15. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #35
    Well, it depends on how the site was structured. My comment is going towards people coding tables like they did 5 years ago. Even if you were to use SSI's/includes and you had junk markup (presentational/deprecated attributes and elements) you would still have to go through every page.

    The one exception is if you ONLY used a table for the height effect and no presentational elements/inline styles/etc... if the markup was still clean inside of the table then it's all good.

    And what about screen readers? Or would you just use a minimal amount of table cells that it wouldn't matter?

    Again, I'm referring to a bloated table layout (TAG SOUP) which you probably wouldn't code, but almost everyone else that isn't at a certain level of knowledge in regards to semantics and structure.

    And when it comes to those sites, 99% of digitalpoint posts that use tables, it would take much longer updating all pages in those sites than it would using a stylesheet.
     
    soulscratch, Jan 17, 2008 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #36
    The link James put in his post is interesting... it isn't really geared towards tables as layouts per se but it's good reading anyway, esp when you need any kind of table. Even with "axis" an "headers" my table still aren't as easily readable with JAWS as I'd like it to be. I'm going to read that link further. Thanks, James.
     
    Stomme poes, Jan 17, 2008 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #37
    Which was kind of my point - the people who ran tag soup nested tables now just go nuts throwing DIV's around everything, still inlining hordes of presentational markup making either 'method' make no difference at all - despite the wild claims to the contrary.

    Tables, Tables/CSS, DIV/CSS makes no difference if you are throwing tags and attributes at everything like they were going out of style.

    I can't count the number of times I've seen people lately doing:

    <div id="mainMenu"><ul>

    when the inner UL has no styling on it besides list-style:none; PUT THE ***ING ID on the UL and style THAT. There is NO reason for the extra DIV.

    The people who nested tables five deep now nest their DIV's five to ten deep - same crap code, different technique. Remember one of my basic rules - if you format your code with proper indenting for block level elements, and end up tabbed in more than six times, you are probably doing something WRONG... like using a table for a single column, or using a table for a single row, or wrapping DIV and/or SPAN around objects for no good reason since you could style the tags inside the wrappers directly.

    But I can tell bad site design and coding just from filesizes and doing a ^C from the browser. Copy the text out of a page, and count the size of it... then use the following formula:

    5k + size of content * 1.5 + 200 bytes per 'content' image. (presentational images should be in the CSS)

    That gives one a ballpark figure on the upper limit on how large the HTML should be for a modern page. Let's say you have 5k of actual text content without tags on a page, with 5 'content' images. That should work out to 13.5k. To me that's the upper limit on how big the HTML should be.... Which is why I laugh my ass off when I see people using 120k of HTML for 5k of text content. (especially when you add in 270k of javascript that 75% of which doesn't seem to anything HTML/CSS couldn't manage on it's own - YAHOO anyone?)...

    Crap code is crap code, blaming tables for it when most DIV based layouts aren't much better is just stupid.
     
    deathshadow, Jan 18, 2008 IP
  18. Aaron111

    Aaron111 Well-Known Member

    Messages:
    4,301
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    185
    #38
    css is great all though it is tricky"
     
    Aaron111, Jan 31, 2008 IP
Page 2 of 2