Eklog

Image Toolbar

If you add the following meta tag:
<meta http-equiv=”imagetoolbar” content=”no”>
Then you won’t see the following for IE image hover:

Skype Toolbar

If you add the following meta tag:
<meta name=”SKYPE_TOOLBAR” content=”SKYPE_TOOLBAR_PARSER_COMPATIBLE” />
Then ONLY phone numbers within the following tags will be highlighted:
<!– sphoneid telnr=”+15551234456″ fileas=”John Smith” –>(555) 1234 456<!– sphoneid –>

Useful meta tag link: More information on meta tags

Wikipedia will tell you that the international symbol for accessibility is the wheelchair symbol. The International Commission on Technology and Accessibility have designated (and copyrighted) this as the International Symbol of Access (ISA).

The symbol is clear, and it denotes wheelchair access. An alternative to stairs or other obstacles which obstruct the access to wheelchairs will not be found where you see this symbol.

Here are a few symbols that could be used as an alternative to a wheelchair:

(more…)

Here’s a few tips to bear in mind now we have a new range of browsers.

Accessibility needs are becoming more important as a solution to giving cross-browser accessibility to everyone. It’s not just people who have accessibility needs, now it’s devices, or ‘thin clients’ which are having accessibility issues.

There’s some new rules for ensuring your web site works with browser zoom or in the new mobile browsers.

Phone browsers

There’s two new browsers in town: Apple IPhone and Opera Mini (testing on version 3.1.2). They shrink full websites down to a small screen size.

1. Css media=”handheld” is ignored by the iPhone and Opera mini browsers. They think they’re real browsers. Any style-sheet with media=”screen” will be rendered by these phone browsers.

2. Zoom isn’t a raster zoom. The text font size is reduced independently to the spacial elements. It should be reduced by exactly the same amount but it doesn’t always work perfectly.

(more…)

Good web dev reference books:

Testing and evaluating DHTML menu trees.

Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.

Here’s the list of menus with a link to the test and a link to the original sites:

(more…)

UPDATE: Schillmaina has produced a new improved solution. See it here.

It seems like there’s a million and one different solutions for creating round corners for boxes. There’s a good summary of many of the rounded corners solutions at www.smileycat.com: CSS Rounded Corners ‘Roundup’

That’s why it’s surprising to find there’s no cross-browser solution for rounded corners using PNG transparent images.

(more…)

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.

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;
}

(more…)

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>.

(more…)