Eklog

Welcome to the brand new Ekstasis.net web site.

While putting together the web site I’ve learned a few of the basics that may be helpful to others who are starting to design a site and haven’t used XHTML mark-up or CSS before. They’re some suggestions for putting a site together with ways to enhance the site in terms of layout, navigation, flexibility and management.

Good code writing for W3C validation

• Use the right Doc type. A List Apart explains: The right doc type
• Validate your site using the: V3C validation tools
• Check your site on PC Internet Explorer, PC Firefox, PC Opera and Mac Safari for a start. If Google has cached your page check that as well. Check how changing the text size affects your layout.
• Make sure your site is listed on the WayBackMachine
• If you have a raw ampersand in a link query string within your code the W3C validator reports this as “cannot generate system identifier for general entity.” Replace all & with &amp; in URLs.
• All images should have width, height and alt tags.
• Check for missing end tags. The w3c validator reports this as a tag that stands by itself and doesn’t have an inherent end tag, so you must use the xml style / delimiter to signify that the tag ends itself. So, instead of < br /> you would write < br />.
• When creating forms you must specify a form processing agent ( action="uri" ) and any attribute needs a name - i.e. change checked to checked="checked"
• It's best to keep your CSS and JavaScript in separate files then link to them.

PHP

Include or Require all 're-useable' components into the page using PHP. I found this indispensable for site management once I implemented it, and not too difficult to do. A List Apart has an excellent overview: Manage your content with PHP Use PHP for lots of stuff.

CSS

• Understand the difference between ids and classes: Class and ID
• For lists of things, put each item in li tags and all the list items in a ul tag. That way you can set general rules by giving a class (or ID) to the whole unordered list. I've replaced the 'bullets' in this unordered list with images.
• All images should have css classes applied to control the positioning.
• Use image replacement for background images and any image you want full control using css.
• Use CSS for navigation menus. Check the tutorials section in this site for sites with help.

Layout

I go with the view you plan where you want everything, decide how the component parts should move relative to each other when the browser window size is changed, then find out how to implement the CSS to give you exactly what you want.

Here are a number of sites which give examples and advice on layout: CSS layouts.

Browser bugs and filters

When using CSS boxes and floats beware of bugs. Here are some sites with info: Browser bugs.

When using margins, padding and floats: When in doubt assign a border or background colour (color) to see the outline of the box as you code. Firefox renders CSS as it should be seen. Internet Explorer [ed: 6] follows some illogical rules and has many bugs. The best advice is to develop for Firefox then hack for Internet Explorer [6]. Some bugs you are going to want to look up when creating a CSS based site are:

• double float margin bug
• escaping floats bug
• peekaboo bug
• guillotine bug
• three pixel jog
• line-height bug
• italics bug
• duplicate character bug
• creeping text bug

There are details for patching these bugs at PositionisEverything.net

There are two main methods for creating CSS rules that are only recognised by Internet Explorer 6:

1. The star html parsing bug:

* html ( or ) is only recognised by IE 5 and IE 6. Internet Explorer 7 will not recognise (misinterpret) * html. As IE 7 has also corrected many of the bugs in IE7 these hacks should not be necessary.

2. Conditional comments:

I believe this is the best method to use. It imports separate style sheets for different browsers, so it's the best method to future-proof a site and organise any hacks you use. This is how they look:

1. [if IE] - if above or equal to version 5
2. [if IE 6] - if equal to version 6
3. [if lt IE 6] - if less than version 6
4. [if lte IE 6] - if less than or equal to version 6
5. [if gt IE 6] - if greater than version 6
6. [if gte IE 6] - if greater than or equal to version 6

Flash

Flash is great. It's the best and most universally used way to reduce file size for moving images. There's almost no differences between the way different browsers render the layout and scripting. It is a good idea to keep loading time to an absolute minimum.

You can insert it and still attain W3C validation ( A List Apart - Embedding flash and Deconcept.com - Embedding flash with java).