Eklog

This is the web: it moves. We have small screens, wide screens, and a variety of needs for the desktop space on any screen. Fixed layouts are for magazines.

If visitors have a 1024 pixels wide screen – and they don’t want to stretch the browser widow across the entire width – any 1024 pixel wide fixed layout means horizontal scrolling – and that’s not very nice.

In order to demonstrate liquid or fixed CSS functionality within the page it’s necessary to have a liquid layout. It’s even possible to have a liquid elastic layout.

Here’s a list of some of the best liquid layout tutorials on the web: CSS Liquid Layouts.

Liquid layouts do need a minimum width to stop the design breaking when the browser is narrowed. CSS or JavaScript can be used to do this (click here for some links.)

O.K., a rant about liquid layouts within a fixed layout design may be the epitome of irony but hypocrisy is this “blogger’s” speciality. This liquid layout for Wordpress: SeaBeast looks great. It doesn’t have a minimum width but uses a drop column technique so the design looks good at narrow widths.

Here’s a couple of liquid layouts with border images to give great flexibility with web page design:

Make like the polar ice caps: go liquid.

This Multiple CSS/AJAX rating bar from http://www.masuga.com/ is the dog’s blox. Everything is set up so you can just stick as many as you like anywhere in your site. The mark-up for any star rating component is a very simple ‘PHP require’ with a unique ID and the JavaScript id pretty unobtrusive. It automatically creates an entry in the MySQL table whenever anyone votes. Looks like a good place for design help at http://www.masugadesign.com/.

Continue reading »

Aldous Huxley explores the mind, society and the human situation:

Conditional comments

IE conditional comments ( Websemantics.co.uk – conditional comments )

The format is:
< !--[if "condition" IE "version number"]> Only IE displays this text if the condition is met < ![endif]-->

There are 6 conditions that can be applied (there’s a “logical not” case too):

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

Valid version numbers are 5, 5.5, 6 and 7. (There is support for specific version numbers such as 5.0453.)

For adding a style for IE v5 only:

< !--[if IE 5]> < style type="text/css">@import “IE5_only.css”;< /style> < ![endif]-->

Validators do not check the code inside the comments so take care.

Internet Explorer 6 hacks

Min height fast hack ( Dustindiaz )

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Continue reading »

Here’s some tips and tricks from a few sites:

Positioning elements

Block vs. Inline Level Elements ( Webcredible.co.uk – More CSS tricks )

Nearly all HTML elements are either block or inline elements.

The characteristics of block elements include:

• Always begin on a new line
• Height, line-height and top and bottom margins can be manipulated
• Width defaults to 100% of their containing element, unless a width is specified
• Examples of block elements include < div>, < p>, < h1>, < form>, < ul> and < li>

The characteristics of inline elements, on the other hand, are the opposite of block elements:

• Begin on the same line
• Height, line-height and top and bottom margins can’t be changed
• Width is as long as the text/image and can’t be manipulated
• Examples of inline elements include < span>, < a>, < label>, < input>, < img>, < strong> and < em>.

Continue reading »