Web Design, CSS compatibilty and suchlike

[Rob]

I'm trying (very trying) to build a new website for work. I want to make sure this is compliant with all proper standards. Thus being good I'm wanting to use css stylesheets to control the formating. That should be simple enough. Trouble is I think I have something cracked, in that it displays OK using Internet Explorer, I then look at it in Firefox and it's completely different and often hideous.

Does anybody have recommendations for a good textbook that actually deals with CSS stylesheets and indicates what is and is not compatible?

Am I being unrealistic to try and control the entire page layout with CSS? The fewer codes I embed in the actual page, the more consistent the site will be, and the less errors I'll make as I build up, and subsequently edit the pages.

I've read that I shouldn't be trying to use tables to control page layouts. The use of tables can confuse those needing page reader software as those can't differentiate between layout and tabulated content needs. Am I just making a rod for my own back by avoiding tables?

What about frames? Are they out of favour too?

I really want to Keep It Simple, if I can, but equally it does need to look reasonably professional. Our current site can only be described as pathetic, but then I did do that in Frontpage back in 2000. It's now time to do it properly using text editors and the like.

[dev]

Coding to the CSS spec is only one part of making a proper web site now. You shouldn't be using tables/frames/iframes for the layout, tables are fine for tabulated data (ie what they are meant for). The site should be usable without the CSS stylesheet applied too, obviously it won't look the same but it should have a recognisable flow to it. Things to help with that include putting the menu in a list (using <ul> & <li>).

As for compatibility across sites, you should be testing in (imo anyway) IE6 & 7, Opera, Firefox and Safari. If you add some CSS styling and it looks wrong in one of the browsers, think about how you expect the code to work and make sure the code you've added does what you want it to. When you're sure the code should do what you want, get googling to find a fix for the browsers getting it wrong.

Few things to think about:

IE6 + transparent PNGs don't mix well and will require IE6 specific CSS fixes to get them to work
IE6 + float + margins on elements result in the margins being doubled and again require specific CSS fixes
If you float elements inside another, the parent element will need to have 'overflow:auto' set otherwise it won't stretch to its containing elements.

[Gavin]

I can't recommend a specific book, normally just experience and google.

IE is the worst for standard compliance so what I do is code for Firefox/Opera, and then perform whatever workaround is needed (and there are a few) to get the site looking OK in IE. If you come across something not displaying fine in IE, then google for a workaround.

Ideally you should use 100% CSS (called Strict specification), but sometimes this is impractical and its just easier to use as much as you can (called Transitional) and use tables, etc, for the rest. There's nothing too wrong with that, although you should be aware that mobile browsers won't render it (tables) perfectly. However, the amount of non-WAP mobile browsers out there, and especially if its not a mobile-needed site, then its worth it.

Frames should definitely be avoided for all sites.

If you're bored you can read the specifications on the www.w3.org site. More helpful though are the validators to check your code for compliance. Also, as important as CSS, aim to get your code XHTML compliant too.

[Zeph]

<table>
<tr>
<td>
Good for anything!
</td>
</tr>
</table>

[Gavin]

To get started, decide on what layout you want (header/left-sidebar, header/left-sidebar/right-sidebar, etc), and then google for the CSS. Then you can just build your content off of there.

[Rob]

Am I trying to be too clever, perhaps in my naivety of how search engines work. I'm trying to get each page to have the prime content as the first stuff in the coding order, with the repeating stuff, that doesn't change from page to page, written in after that, say for example:

header stuff & stylesheet links

<body>
<div class="content"><!-- main page content goes here --></div>

<div class="header"><!-- page header goes here --></div>

<div class="menu"><!-- page menu goes here --></div>
</body>

Obviously the various classes include all the layout positioning background and other stuff, and may well include nested classes for sub divs of the elements as required.

[dev]

Originally Posted by Rob

Am I trying to be too clever, perhaps in my naivety of how search engines work. I'm trying to get each page to have the prime content as the first stuff in the coding order, with the repeating stuff, that doesn't change from page to page, written in after that, say for example:

header stuff & stylesheet links

<body>
<div class="content"><!-- main page content goes here --></div>

<div class="header"><!-- page header goes here --></div>

<div class="menu"><!-- page menu goes here --></div>
</body>

Obviously the various classes include all the layout positioning background and other stuff, and may well include nested classes for sub divs of the elements as required.

Although it is possible, I wouldn't recommend it as sites nowadays should be able to work without the CSS loaded and so in that case, the flow of the site would be all wrong.

[Gavin]

That should be OK. If you're using pure CSS with the absolute positioning (see below) then it doesn't matter what order you code it.


div.header {
position:absolute;
top:0px;
left:0px;
height:150px;
width:100%;
}

div.menu {
position:absolute;
top:150px;
left:0px;
width: 100px;
}

div.content{
position:absolute;
top:150px;
left:100px;

/* etc...*/
}

Then you order the divs however you want, header, menu, content, or content, menu, header. They are all repositioned accordingly when the source is parsed.

Little tip for free: If you have repeating content like a header, menu or footer, look at using PHP or something to import it

<?php include('header.php'); ?>
Rest of HTML here...

and then you can store the header information once in header.php and then alter it once and all pages will then use the new header. You can also do this via Javascript if you don't like or have PHP for whatever reason (it is free and on all OSes)

[Rob]

Yep I was going down the PHP include router for the standard stuff As for the rest, I can see a few headaches coming

[handyman]

Originally Posted by Rob

Yep I was going down the PHP include router for the standard stuff As for the rest, I can see a few headaches coming

I've gone down this route as well as it makes my sites easy to build up with repeatable code.

However you do need to make sure you change your commas to , and your pounds to &pound; etc.

I'm getting pretty good at cross browser css layouts so would be happy to try help, u got my msn if you wanna ask anything.

Basic stuff is

Container div with left and right margins set to auto will centre the site in the browser.
You can float the container left for a left aligned site

header div set to same width as container with a right clear
columns floated left and right (just make sure your margins and padding adds up so that everything stays in the container).
Footer after the columns with width and clear set the same as the header, job done.

I've started adding in a css reset as well which helps with the cross browser compatibility be setting all default margins and styles etc to 0.

---------- Post added at 17:33 ---------- Previous post was at 17:26 ----------

Originally Posted by Zeph

<table>
<tr>
<td>
Good for anything!
</td>
</tr>
</table>

= Old fashioned as well.

If you want to change the layout you will have to go into each and every file on the site. When you have sites running to 100's if not 1000's of pages this is impossible.

[Zeph]

Originally Posted by handyman

If you want to change the layout you will have to go into each and every file on the site. When you have sites running to 100's if not 1000's of pages this is impossible.

Not when you're the master of the PHP Include

[Gavin]

Don't even have to be a master if you use ASP.NET Master Pages.

[webcrawler2050]

I had a hard time trying to get my new site to validate - it takes alot of fussy little things, PHP doesnt help either. I fyou need any help just drop us a PM

[tweetiepooh]

Use HTML validator on Firefox (only available for Windows).

Code with XHTML 1.0 Transitional or Strict. Fix the errors in Firefox.

Using the XHTML DOCTYPE will help IE try to get it right.

I use Perl CGI and then build a module to handle the repeatable stuff like headers, footers and so on.

Then the page code looks more like :

#!/usr/local/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);   # errors to browser

use mymodule;

# call my wrapper code, return the CGI object for local stuff
my $q = mymodule::StartPage("Page title","Subtitle","css file");
...

At some point I'll need to look to templating.