No coding done today, but will arrange a meeting with the Client as soon as humanly possible to get a requirements specification from them.

I’m pretty certain that this project is going to be iteratively developed, as then I can offer said client a tangible product at least once before the deadline.

Onwards!

What’s What:

• Borders: Borders are pretty easy conceptually – they’re just a border around an HTML object. A good example would be having a border around table cells. A border declaration looks like this:
  element {
border:1px solid #000000;
}
• Width and Height: Width and Height are again pretty easy to describe – it’s how wide or high the element in question is. This can be an absolute (e.g. 10px) or relative (e.g. 50%). A width appears thus:
  element {
width:100%;
height:70px;
}
• Padding: Padding is a little more complicated. In an HTML element, you have the content of that element (usually text), you have a border where the element stops (usually invisible, but it’s there none-the-less), and you have a space between the content and the border. The Padding is the space in between. Protip: use absolute values. It looks like this:
  element {
padding:5px;
}
• Margins: Margins behave like padding; except margins are the space between different elements. Protip: use absolute values. They look like this:
  element {
margin:10px;
}

What’s the Problem:

If all was fine and dandy with CSS boxes then I’d not really need to write this. Anything CSS box like (that’s pretty much any block level element) behaves differently in different browsers. This as you can well imagine is a pretty big ball ache. There are also some outright weird behaviours that are counter-intuitive that you will need to know about, and again these effect different browsers differently.

Different Browsers:

The main issue, and the one any designer will encounter most often, is the difference between Trident Engined Browsers and other browsers that are more standards compliant.

The key to this particular problem is how the Width and Height properties are dealt with. In CSS compliant browsers, the total size of the box is Width + Border + Padding. In Trident, the total size of the box is just the Width declared. Now, if you don’t have any borders or padding this is fine; but things start falling apart very quickly if you do.

There are 3 main ways that you can mitigate this issue:

1. You can can work with this problem, rather than against it – Create a page that will work in both compliant and non-compliant browsers, but will look a little different in the two types. To do this you’ll just have to keep in mind not to rely entirely on sizes being the same for your positioning. Using float:left; and float:right; will be very useful if you take this route.
2. You can force Trident to be standards compliant – but you need to be very precise in how you do so. Read my article on CSS Quirks Mode and Standards Mode for how in detail, but it’s all related to the doctype declaration.
3. You can use a box-model hack. There are a couple of different ones about,

I’d advise against using a box model hack – IE5.0 and IE5.5 have a minuscule proportion of the browser market, and IE6 can be forced into standards mode very easily by having the correct doctype.

Personally I’ve found that too many people take far too much time bodging together something that look exactly the same in Trident and others, which can compromise the design’s ease of use for a design client. My best advice is accept that things will look slightly different in different browsers.

Odd Behaviour:

As consise the CSS standards are, some bits are a bit difficult. Linking in a little with the point made above on different browsers, CSS can display some pretty odd behaviour at times that you wouldn’t think possible or doesn’t make sense.

When you have an element that’s positioned staticly or relatively, under most circumstances its width will be defined by its parent element. Set the width to 100% and it will remain unchanged. However, when you add padding and borders to a defined width, things start going awry. Any padding and border will add to the width of the element if it’s declared, not compact it inwards. Bizarrely though, if you don’t define a width it will behave how you’d expect – the padding will push the box contents inwards.

A good example can be seen at CSS Tricks on this particular subject.

There are a couple of ways you can work around this. Firstly you can set all of your widths absolutely (in px usually), and you can use extra <div> tags. Setting widths in pixels is pretty easy, so I won’t go into detail there; but I will explain what I mean by extra <div> tags.

Both Trident and others all render margins correctly, and margins are naturally ‘outside’ a box if you visualise it; so they can be a bit easier to work conceptually and also behave predictably. The code is pretty simple:

HTML:

<div id="wrapper">
<div id="container">
Content goes here
</div>
</div>

CSS:

#wrapper {width:100%;}
#container {margin:5px;width:100%;}

In Summary

Always keep an eye on what your CSS boxes are up to, because if you’re not familiar with them their behaviour will be quite unpredictable.

1. Make sure that you’ve upload your file first – if you’ve not got your own server to put your page on, use something like googlepages
2. Type out the test that you’d like the link to read, for example, ‘This is an example page’
3. Select the text you just typed
4. Then hit the link icon in your post bar and type in the URL of your file

You’ll end up with something akin to this: This is an example page that’s been made with some awesome CSS.

Why exactly? Well, if you give thought to the semantics of a list element: a list is a group of related objects really. Grouping your important links together like this is very useful for computers, spiders and assistive technologies.

The HTML that we’ll need for our link list is very simple:

<ul>
<li><a href=”#”>Link Item 1</a></li>
<li><a href=”#”>Link Item 2</a></li>
<li><a href=”#”>Link Item 3</a></li>
</ul>

That will give us something that looks like this:

• Link Item 1
• Link Item 2
• Link Item 3

We could use that as it is if we liked, but that’d be a bit boring to be honest. You can keep the dots or not; or change them to something else if it takes your fancy. The code to do this is:

li {
list-style-type: none;
}

This will set the bullet to none.You can choose from a number of different bullets, available here.

Depending on the location of our new menu (along the top or in a column to the side), you may want to set the display property to either block or inline. If you want it down the side, set it to block; if you want it across the top (or indeed the bottom), set it to inline. e.g.

li{
display: inline;
}

Clever manipulation of the display element on the UL and LI tags can yield some excellent results. You can also wrap the list in its own div to aid with positioning.

Couple these two, relatively simple lines of code with some hyperlink rollovers and positioning, and you have a very powerful construct for a menu.

However, a lot of webpages were built to take account of these broken standards. As the push for standards compliance started to occur, someone realised that all of these older webpages would break in new standards compliant browsers. To get around this, all browsers have this thing built into them called ‘Quirks Mode’. Quirks mode renders a page including all of these incomplete CSS implementations. Standards mode displays everything correctly.

The way to get a browser to render something in quirks mode or standards mode is through the DOCTYPE declaration. This is the thing that goes before your HTML tag and looks a little like this: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>. We need to ensure that every page we create will be displayed in standards mode. As web designers it’s important that  we know that our pages are going to be displayed consistently between broswers. Standards mode is the easiest way to do this.

Doctypes

If you want HTML 4.01, then use the following doctypes:
Strict:  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
Transitional:  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
Frameset:  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>

If you want to use XHTML 1.0, use the following doctypes:
Strict:  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
Transitional:  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Frameset:  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>

Important notes

With XHTML, you must ensure that you don’t include the XML declaration before the doctype, unless you absolutely have to. There is a bug in Internet Explorer 6 that causes it to revert to quirks mode when the doctype isn’t first.

Annoyingly, Konquerer will not display in standards mode at all for any Transitional doctype.  As Konquerer accounts for only 0.01%¹ of browser usage, I’d not lose any sleep over it though.

Sources

1: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
2: http://www.quirksmode.org/css/quirksmode.html

How to build them:

The trick with CSS layouts is to harness the border, margin, padding and float properties of div tags to create something that looks like a web page. To start with, let’s have a look at a really simple 2 column layout. Something that will look akin to this:

In order to construct this, at least if you’re not a CSS god, is by using 3 divs. Two of these are the columns, but we need one more to hold those two together, called a wrapper. This wrapper separates the two columns from the rest of the page. Here is a quick image of the structure of the divs:

Assuming that we’re going to name these divs something sensible (warp, nav and content), your links will go into the Nav div, and your content will go into your Content div. The HTML code for this is pretty simple:

<div id=”wrap”>
<div id=”nav”>
</div>
<div id=”content”>
</div>
</div>

On the other hand, the CSS to get these to display as we want them to is much more finely tuned:

div#wrap{
border: 1px solid #CC0000;
padding: 5px;
}
div#nav{
border: 1px solid #00CC00;
float: left;
width: 150px;
}
div#content{
border: 1px solid #0000CC;
margin-left: 155px;
}

Understanding how this works is very important, as you will encounter a scenario when you’ll need to change it.

The div#wrap is relatively simple. All it needs to do is be there – it doesn’t necessarily need to have any styles attached to it at all. In this example, it’s got a red border and has a little padding to it. If you need a fixed-width layout, this is where you’d define your width.

The div#nav is a little more complicated. You need to specify the width you’d like here, as it’s holding your navigation, and for other reasons I’ll mention in a second. It also needs to float to the side that you need it.

The div#content is potentially the most complicated. The vital part is the left hand margin. This needs to be at least the same as the width of the div#nav. If you need some space in between these two, add this to that number. E.g., if you want 10 pixels gap between them, and your nav is 200 wide, you’ll need to specify the left margin as 210px.

Stuff that’s already been done:

As CSS has been around for a while, and support for CSS is improving greatly, thankfully some talented folks have already produced some simple cut-and-paste layouts that can be used as a starting block for something more elaborate:

CSS Layout Templates – a whole load of CSS based layouts available from dynamic drive.
The Holy Grail – a 3 column fluid layout.
Practical CSS – tips and tricks on using floating divs.
Faux Columns – a method to create the illusion of full columns in CSS.

Anyway, my opinions aside, CSS has good points and bad points

Good Points

Centralisation: CSS simplifies altering the design of a webpage, or indeed the entire website, by having all of the info telling it how to look in one place. Is the font size too big? Not an issue, I change it once in the CSS and the entire page (or site) will reflect that change. WIN!

Size: The amount of equivalent HTML formatting that is removed from the page is much greater than the size of 1 CSS document. As such, it’ll save on bandwidth costs and loading time.

Accessibility: CSS will greatly assist users who are visually impaired. Many users use their own stylesheets to assist with their browsing, or indeed will use other audio-based assistive technologies. By getting rid of all of the superfluous formatting HTML

Cool Features: CSS has a few things in it that plain HTML coding doesn’t have. 2 Pertinent examples are rollovers and media. Mouseover rollovers on links are a nice, subtle feature that HTML cannot do, and greatly enhance a site that has them. The ability to select different stylesheets for different media, e.g. on screen and printing, allows a designer to hide unimportant bits (navigation / adverts) for printing.

Flexibility: Generally, CSS is  much more flexible at manipulating the look of a page than HTML is.

Bad Points

Learning Curve: CSS has a pretty steep learning curve, especially for the more advanced stuff such as tableless layouts. Newbies will be rather overwhelmed by it.

Browser Compatibility: Because Microsoft think that the internet belongs to them, they only pay lip-service to established design standards. Although this is improving, it can cause massive inconsistencies.

Links

A few links that I have come accross on the subject:

http://www.vordweb.co.uk/css/advantages-of-css.htm
http://webboy.net/presentation/ict2003/04.htm
http://www.wise-women.org/resources/listarchives/css02/
http://www.webmasterworld.com/forum83/2683.htm

>> Go to the Well Designed Webpage

Here’s a file that implements the difference between markup and styles: http://asteconn.pbwiki.com/f/quickpage.htm

It’s markup is in HTML 4.01. and styles in CSS 1.

Something that a lot of web masters don’t do, especially newbies, is separate the two. Markup tells a computer what the data is. Markup will instruct the computer “Oh hai there! This bit of text is a heading!”. Styles tell a computer how to display it, like “Colour this bit in sky blue!” for example.

Annoyingly though, I’ve not been able to find anything like studies or reviews relevant to RSS in the context that I’m looking at it in: on blogs and in the point of view of publishing. There is, however, an interesting study on the quality of feeds from a few top news sites here: http://www.icmpa.umd.edu/pages/studies/rss_study_details/rss_study.html

This study states: “This study showed, however, that the RSS feeds provided by most news outlets work very poorly for anyone who uses news as more than an entertainment medium or for more than an alert when a major something – anything – has just happened.” Which is a bit of a shame, as from what I know about RSS, it could be much more potent.