CSS, HTML, XHTML - Code tips, tricks, links

[DBLL]

A common question also seam to be how to create rounded corners using CSS and divs in place of tables, while not fully possible yet without additional divs, there is a position based technique to Create a Fluid Box with Rounded Corners at Brugbart, which still uses a few additional divs.

[johndodrill]

I'm looking at CSS tables trying to find a reason that's better than "because they exist" to use them instead of standard tables. This is the nature of my question: "Why do you think CSS tables are better?" Newer isn't always better.

I like standard HTML/XHTML tables because they're easy to read. I can go back to code that is years old and instantly understand what I did. I don't use a programming format like most do but what I use is very readable to me. To see what I mean, you'd have to look into some of the tables on
Home Page of A Southern California Computer / Network Technician .

The only drawback I find with tables is that what the browsers do with the code isn't necessarily what the W3C has specified, in a few instances. A loosely related example might be that cellspacing and cellpadding are supported by XHTML (Standard, Transitional and Frame) according to W3Schools.com but not according to the W3C Validator. There might be analogues in CSS tables as well I haven't really experimented with them because I haven't found the need. However, if there are real functional advantages, from a programming perspective, I will consider adopting them.

I just know someone is going to run my site through the W3C Validator and see the 200-400 errors the Google translator links throw (thanks, Google), the 2-3 valid errors I'm cleaning up now and the keywords I have to fix. FYI, it's an experimental personal site intended to try to stay pretty close to UTF-8 and XHTML1.1, I don't care if Google lists me or not, I (and many others) have a 8Mb/s fat-pipe, so I don't care if the background takes 130 seconds to load and I'm not selling anything to anybody. What I want is a Web site that is functional but is more like looking out a window to an enticing environment than a flat hypertext markup document. The graphics do still need a bit of work but the experimental part is that it changes environments automatically according to time of day, season and, soon, holidays too. The idea is not to re-invent the Web-site for every occasion but to have the site re-invent itself in accordance with the moment so I don't tire of it quickly. (Also, kudos to imaize.info I used their code right out of the box, for the snow, and gave credits accordingly.)

You might want to comment on what you think of the concept , if you feel so inclined.

Thanks, in advance!
John Dodrill
Home Page of A Southern California Computer / Network Technician

[DBLL]

Hallo John...

I find it hard to comment on your site (http://john.dodrill.name) from a professional standpoint, I'm not sure that I've seen anything worse in years, pointing out just a few of your mistakes would be a tedious task. But the advantages of using divs instead of tables, should be obvious to people in the industry, you don't appear to be working with Webdesign professionally though?


You are on the wrong track in so many aspects other then using tables, (using tables is not your biggest problem). Your use of, Meta tags, JavaScript for layout purposes, inline styles, br tags for layout purposes, no doctype, and obsolate use of XHTML, is of so much more concern to me.

The code amounts to nothing less then 2605 lines, at a whooping 92kb, just for the index page alone. And thats without taking into account, external files which are loaded. You should easily be able to cut that down to about 5-15kb.

Your use of animated gifs takes up to much CPU, which is also why you don't see many professionally designed websites using animated gifs to the same extend. Flash dose however not take up as much CPU, and it allows for 32bit color, rather then the limited 256 found in gifs.

Use of XHTML can be explained by the Bandwagon effect. There is no real practical benefits from using XHTML above HTML 4.01, but there are many disadvantages. This is not recognised in the amature comunity, but professionals should know about these disadvantages. Heres a few articles on the subject:

Brugbart on XHTML vs HTML
Sending XHTML as text/html Considered Harmful

[wadeinni]

IE Vs Firefox Cross Browser Css Tip.

I struggled with having to hack one css file to fit both IE and Firefox for a while until i came across the bracket [] markup code.

Typical example that would make your code work in both FF and IE:

Firefox: (WITH BRACKETS)

#divnameattribute[id]
{
text-align:left;
border: 0px solid #F8D78F;
width: 350px;
margin-left: 14px;
padding-left:3px;
}



IE 6, 7, 8 (WITHOUT BRACKETS)

#featuredlinks
{
text-align:left;
border: 0px solid #F8D78F;
width: 350px;
margin-left: 14px;
padding-left:3px;
}

[johndodrill]

I put up a question about the merits of CSS tables, citing the use of tables in my personal home page (Home Page of A Southern California Computer / Network Technician) which I acknowledged was an experimental design and archaic code. What I got what someone railing on my site for every flaw I had already noted without even considering the question posed, which was about CSS tables.

I would like to point out that there are a fair number of people who don't have or want Flash because the sound can't always be muted short of unplugging the speakers, which makes Flash not a universal solution. I think I'll decline to hop on every code bandwagon that comes along or having so-called "professionals" write code that takes a month to decipher, in favor of brevity.

In light of the response, I'm inclined to believe that Web Pro World might have been the wrong place to go for relevant advice.

[DavidF]

This should be updated for HTML 5 and CSS3

[stevecane]

Just a quick recommendation, CSS The Missing Manual is the best book I've found anywhere about learning CSS. It's a good reference too. The Dreamweaver and Photoshop books are very good as well.

S

[AvailHosting]

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it does not.
div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }
This CSS code will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.