CSS Page Maker

CSS Source Ordered 1-3 Columned Page Maker v2.90 from ClevaTreva Designs

Features:

* Source Ordered Layout (Content First).
* Substantial x-browser support in one design.
* 100% page height design (except MAC IE 5.x, which is fluid height instead). Fluid height version soon.
* No images used to make layout (unless you add your own 3D effects).
* Fully customisable by user from online form (makes the css for you).
* Heavily commented css and source code to explain design.
* User can select from various Doctypes to use.
* On line Tooltips to explain the form.
* Uses source code ideas from Paul O'Brien, Big John, and loads of others, plus lots of ideas of my own!
* Allows multiple header and footer rows.
* Centered/Left Aligned fix-width design (fluid width design may come later), user sets the widths of all columns.
* Top and Bottom margins (shows background color) now possible within the 100% height.
* It's FREE.

CSS: Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

http://wellstyled.com/css-nopreload-rollovers.html

www.welie.com -- patterns in Interaction Design

A huge collection of patterns in Interaction Design.
http://www.welie.com/patterns/index.html

Typetester ? Compare fonts for the screen

What is Typetester?

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Technical details

Typetester's code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

300 Images From 1800 Sites

300 Images From 1800 Sites: "300imagesfrom1800sites"

The author says: "I started gathering little, iconesque web images for myself so that I could compare, contrast, and study the techniques used by other graphic artists on the web. My initial pool of images looked so interesting that I decided to continue methodically hunting and capturing the icons for a public display piece."

All Images are © by their owners. Please do not steal!

PhotoshopSupport.com

Free Photoshop Tutorials & Photoshop Tips

Here are the first installments of free Photoshop tutorials by Jennifer with more coming soon.

Working With Type In Photoshop CS2
Learn how to work with the type tools in Photoshop CS2.
Working With Layers In Photoshop CS2
Learn how to work with layers in Photoshop CS2.
I See iPod People — The Photoshop Silhouette
Learn how to make an iPod ad Silhouette in Photoshop.
Photoshop Web Template — Web Site Design Tutorial
Learn how to make a Photoshop web template with this web site design tutorial.
Blog Templates — Blog Design Tips And Resources
Tips on how to improve blog templates with your own designs. Includes resources.
Photoshop Keyboard Shortcuts
Learn how to edit and create sets of keyboard shortcuts in Photoshop CS and CS2.
How To Fix Overexposed Images In Photoshop
Two quick techniques to help you fix overexposed images in Photoshop.
How To Fix An Underexposed Photo In Photoshop
Two simple techniques that can make dark photos look great.
How To Wrap Text Around An Object In Photoshop
A quick and easy technique to wrap text around an object.
Tips And Tricks For Beginners
Photoshop tips and tricks that will save you lots of time down the road.
Create A Sepia Tone Effect In Photoshop
A simple way to create a Sepia Tone effect in Photoshop.
Turn A Photo Into A Sketch For Making Coloring Books
Want to make a coloring book? The first step is to turn a photo into a sketch.
The Night Vision Thing — A Photoshop Recipe
Learn to create the greenish glow associated with photos from night vision devices.
Resize Images Without Losing Sharpness
This simple trick will eliminate the dreaded blur often found after resizing.
Pixel Fonts To The Rescue
All about Pixel fonts — how to use them and where to get them.
Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
Learn how to create tiny custom icons that appear in the address bar of a web browser.

CSS Techniques Roundup - 20 CSS Tips and Tricks

CSS Techniques Roundup - 20 CSS Tips and Tricks

Pete Freitag is a software engineer, and web developer located in central new york.

Here are 20 CSS techniques, tips and tricks from Pete Freitag that you may find handy:


Rounded Corners
Rounded Corners without images
Creating a Netflix style star ratings
Tableless forms
Styling Lists with CSS
2 Column Layout Technique
3 Column Layout with CSS
3 Column Fixed width centered layout
Printing with CSS
Adding a CSS stylesheet to an RSS feed
Footer Stick
CSS Element Hover Effect
Styling Horizontal Rules
Clearing Floats
CSS Popups
Box Punch
CSS Badge
Orange RSS Buttons with pure CSS
10 CSS Tricks you may not know
10 More CSS Tricks you may not know

Photoshop Tutorials - Tutorial Select

http://www.tutorialselect.com/ is a good source for handy tutorials that help in everyday photoshop work.

FireFox Search Plugins are availalble for searching tutorials on Photoshop and PHP topics.

CSS and Round Corners: Build Boxes with Curves

CSS and Round Corners: Build Boxes with Curves

One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, author Trenton Moss uses CSS to create this box with round corners, without an 'img' tag in sight!

The Code:
Our finished HTML now looks like this:

div class="bl"
div class="br"
div class="tl"
div class="tr"
Lorem ipsum dolor sit amet consectetur adipisicing elit
/div
/div
/div
/div

div class="clear"
 
/div

Here's the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

Cross Browser DHTML

Cross-Browser.com is an outlet for Mike Foster's DHTML hobby. This site features X - a cross-browser DHTML javascript library, and many demos, applications, articles and documentation.

The X library is designed for Opera 5+, Mozilla, Firefox, Safari, Netscape 7.x, Internet Explorer 4+, Konqueror, Netscape 4.x and browsers with similar object models. Object-detection (instead of browser-detection) is used as much as possible.

Painting in Photoshop - The Basics

by Nykolai Aleksander

Index of Full tutorial with contents below:

Basic PS Settings

• Scratch Disk Settings
• Opening a new file & Canvas Settings
• Changing Colours
• Canvas Sizes
• Docking Palettes

PS Brushes

• Which Brushes to use?
• Basic settings
• Installing Brush Sets
• Loading Brush Sets
• Making Custom Brushes

Drawing Tablet

• Changing settings
• Getting used to the pen - exercises

Use of Colour

• Grass isn't always green
• Colour Theory (by Socar Myles)

The Use of Layers

• The Meaning of Icons
• Creating Layers & naming them
• Moving Layers in the Palette
• Merge Visible Layers
• Merge Linked Layers
• Layer Sets
• From Scan to Transparent Layer
• Transforming Layers
• Flatten Layers

Painting

• Do I need to be able to draw to paint in PS?
• Pre-painting sketches - yes or no?
• Basic detailed painting steps
• Saving your Painting
• Special: Evil Tools

One last piece of warning: If you are hoping for a magic solution, there is none. You will not become a great painter overnight - it takes some time, patience and practice.

Free Usability Resources

PDF documents available for download from resources at infodesign.com.au.

Topics include:

General

• Affinity Diagramming
• Writing Usability Reports
• Facilitation Techniques
• Usability for Technical Communicators
• Handling Logged Data
• Pre-publication Checklist
• Website Redesign - a Case Study
  
• Reading List

Analysis

• Contextual Enquiry
• Contextual Enquiry Report
• User Profile Forms
• Site Visit Materials

Design

• Scenarios
• Card Sorting
• Paper Prototyping Graphics
• Participatory Design
• Documenting a User Interface

Evaluation

• Conducting Walkthroughs
  
• Usability Testing
• Minimal Test Lab
• Usability Testing Materials
• Conducting Usability Reviews
• Usability Testing Mistakes
• Web Evaluation Materials
• Voice Interaction Evaluation Checklist
• Structure Evaluation

gotomedia : resources

gotomedia : resources :

Goto Guides

Many have found the following goto guides (PDFs) to be helpful Usability resources. These were originally created as resource material for Kelly's regular lectures and eventually evolved into her 281 page book, Web ReDesign | Workflow that Works.

• Setting the Stage, 2000 [PDF 485k]
  
• Usability Testing, 2000 [PDF 776k]
  
• Web Design Workflow, 2000 [PDF 1.9mb]
  
• Enhancing Creativity, 2002 [PDF 468k]

Techniques

The Macromedia Website Production Management Techniques site represents a joint effort by Macromedia and Kelly Goto.

• Client Survey [RTF]
  
• Creative Brief Worksheet [RTF]
  
• Creative Brief Sample [RTF]
  
• Technical Survey [RTF]
  
• Budget Tracker [ZIP]
  
• User Profile Sample [RTF]
  
• AC (additional charges) Form [RTF]
  
• Meta Tag Worksheet [RTF]

Lombergar.com - Free Photoshop video tutorials

Lombergar.com - Free Photoshop video tutorials

Here you will find free Photoshop training trough video tuition - each of the tutorials will teach how to achieve a cool technique

PDF Book - Research-Based Web Design & Usability Guidelines

FREE Download - full 128 pages book :
Research-Based Web Design & Usability Guidelines from http://usability.gov/pdfs/

Guidelines by Chapter

Chapter 01 – Design Process and Evaluation (6 pages)
Chapter 02 – Optimizing the User Experience (6 pages)
Chapter 03 – Accessibility (4 pages)
Chapter 04 – Hardware and Software (3 pages)
Chapter 05 – The Homepage (5 pages)
Chapter 06 – Page Layout (6 pages)
Chapter 07 – Navigation (6 pages)
Chapter 08 – Scrolling and Paging (3 pages)
Chapter 09 – Headings, Titles, and Labels (5 pages)
Chapter 10 – Links (8 pages)
Chapter 11 – Text Appearance (4 pages)
Chapter 12 – Lists (4 pages)
Chapter 13 – Screen-based Controls (Widgets) (10 pages)
Chapter 14 – Graphics, Images, and Multimedia (7 pages)
Chapter 15 – Writing Web Content (5 pages)
Chapter 16 – Content Organization (5 pages)
Chapter 17 – Search (4 pages)

Essential Bookmarks

Essential Bookmarks - Links to great webdesign resources

Topics include:

CSS
XHTML
PHP
Usability
Accessibility
Design
Inspiration
SEO
RSS
Validation
Miscellaneous

Styling even more form controls | 456 Berea Street

A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems.

Styling even more form controls | 456 Berea Street

CSS Help Pile

CSS Help Pile: Links and Discussion About the Best CSS Resources Available on the Web - artypapers

Topics of Interest:
- How to Create a Photographic Gallery Using CSS
- Devil's Details: Web Design Details Blog
- Mobile CSS First Steps
- Image rollover effects
- CSS Tabs
- Nifty Corners: rounded corners without images
- A CSS styled calendar
- Applied CSS Management and Optimization

CSS: Hybrid CSS Dropdowns: A List Apart

Author Eric Shepherd says:

This technique is a bulletproof way to ensure browser compatibility and to maintain usability even for people who have old browsers or difficulty accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm. It also does a much better job than standard dropdown menus of orienting the user within the site.

Warning: This technique will not work as well for lists that require large numbers of items, where dropdowns either shine or collapse under the weight of their own sheer mass, depending on your perspective.

We’re going to create a hybrid menu that runs horizontally across the window. It has two levels of navigation (in our example, main topics and their associated pages). Our menu will allow for dropdown access to all pages in both navigation levels, display the current choices in the selected topic area constantly, keep the user aware of where he is in the site, and be clean and light to boot.

Sound good? Let’s get going.

Hybrid CSS Dropdowns: A List Apart Article

Hybrid CSS Dropdown Sample

CSS Design: Taming Lists: A List Apart

Most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

CSS Design: Taming Lists: A List Apart

Photoshop CS Optimization Tips

Design Your Site Team Tip: Photoshop CS Optimization Tips

This question comes up quite frequently in the Graphics and Multimedia forum so we thought we would address some of the issues of optimizing Photoshop CS for Windows and Macintosh systems.

Here are just some of many ways you can ensure Photoshop CS is running properly for best performance.

Troubleshooting

There are a few instances where Photoshop's files can become damaged or corrupt. Here are some ways to correct those problems.

Photoshop Preferences File
There may be times when your preferences file will become corrupt which will cause a variety of problems with Photoshop. Such problems include menus and tools disappearing, the program running slow or system lock-ups
To re-create the Photoshop preferences file:
1. Quit Photoshop.
2. Drag the Photoshop preferences file to the Trash:
Drag the Adobe Photoshop CS Prefs.psp in the Users/[ user profile ]/Library/Preferences/Adobe Photoshop CS Settings folder to the Trash.
Restart Photoshop.

If the problem recurs after you re-create the Photoshop preferences file, the problem isn't related to the preferences file. To restore custom settings, drag the file you moved in step 2 back to its original location, and then click Yes to replace the new preferences file.

Troubleshoot Fonts
System errors can occur if Photoshop accesses a damaged font.

To troubleshoot fonts to determine if they cause the problem.

- Drag the contents of the Library: Fonts folder to a new folder on the desktop. (If you manually added fonts to the Library: Application Support: Adobe: Fonts folder, also drag those fonts to the new folder.)
- At the Finder, choose File > Find.
- Type adobefnt.lst , select the system drive, and then press Return.
- Delete all adobefnt.lst files found (for example, adobefnt06.lst).
- Restart the computer.
- Restart Photoshop. Photoshop creates new adobefnt.lst files.
- Try to re-create the problem, and continue as follows.

-- If the problem doesn't recur, move one font back to the Library: Fonts folder, and then repeat the steps until you identify the problematic font.

-- If the problem recurs, move the contents of the new folder on the desktop back to the Library: Fonts folder.

Troubleshoot ICC profiles.
A system error can occur if Photoshop accesses a damaged ICC profile.
To troubleshoot ICC profiles to determine if they cause the problem:
1. Move all profiles from the following folders to another folder:
-- Library: ColorSync: Profiles
-- Library: Application Support: Adobe: Color: Profiles
2. Restart Photoshop, and try to re-create the problem.

-- If the problem doesn't recur, move profiles back to their original folders one at a time, and try to re-create the problem after each move, until you identify the problematic profile.

Optimization

Allocate more memory to Photoshop
Low memory in Photoshop can create real problems for you especially if you are working with large files. It’s best to shut-down all applications running in the background (if you don’t need them), and work with only Photoshop.
You can allocate a larger percentage of memory to Photoshop to eliminate problems caused by low memory.

-Start Photoshop.
-From the Photoshop menu, choose Preferences > Memory & Image Cache.
-In the Memory Usage section, increase the value in the Maximum Used by Photoshop text box.
-Click OK, and then restart Photoshop.

Optimize scratch disks.

Photoshop uses a scratch disk file (that is, temporary disk space for storing data and performing computations) when insufficient RAM is available for image editing. Photoshop CS can create 64 exabytes of scratch disk files on up to four hard disk partitions, while Photoshop 7 can create 4 exabytes on up to four hard disk partitions. An exabyte is 1,074,000,000 gigabytes.

The hard disk partition you specify as the primary scratch disk should have adequate free space equal to several times the size of your file. A good performance indicator is to have space available equal to three to five times the size of the average image file; specify additional scratch disks if you have additional hard disk partitions. If disk space is insufficient, remove unnecessary files from hard disks.

To specify a scratch disk in Photoshop, choose Photoshop > Preferences > Plug-Ins & Scratch Disks.

CSS - Creating a centered page layout

Creating a centered page layout with CSS

CSS Box Model Hierarchy

The author writes:


The order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.



3D CSS Box Model Hierarchy

Resources For Web Design

Resources For Web Design

CSS - Styling a button

Sample CSS:

#btn a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:4px outset #cc9900;
background-color:#00ffff;
display: block;
width: 160px;
padding: 3px 5px;
margin: 1px;
}
#btn a:hover {
background-color: #00c0c0;
color:#000000;
padding-left:4px;
border:4px inset aqua;
}

CSS Cursor values

In CSS syntax, 'cursor' properties supports the following values:

auto: Allows the Enduser's browser to select the Cursor.
crosshair: Crosshair
default: Default Cursor
pointer: Pointer that indicates a link.
move: Indicates something is to be moved
*-resize: Cursor used to reposition windows.
text: Text I-bar.
wait: Busy or wait hourglass cursor.
help: Help cursor




More details may be found at:CSS Cursors - Tutorials - HTMLCenter: "auto: Allows the Enduser's browser to select the Cursor.
crosshair: Crosshair
default: Default Cursor
pointer: Pointer that indicates a link.
move: Indicates something is to be moved
*-resize: Cursor used to reposition windows.
text: Text I-bar.
wait: Busy or wait hourglass cursor.
help: Help cursor "

Quirksmode and Strictmode

IE 6.0 - QuirksMode - for all your browser quirks: "" and XML prologue details and the modes at which IE renders XHTML.

CSS Rounded Corners example - redmelon.net

CSS Rounded Corners example - redmelon.net


A Demo page showing sample HTML code and VIew Source shows the CSS

This is the essential CSS:

/* set background images for corners */
.rbroundbox {
background: url(simple_background.gif)
repeat;
}
.rbtop div {
background: url(simple_top_left.gif)
no-repeat top left;
}
.rbtop {
background: url(simple_top_right.gif)
no-repeat top right;
}
.rbbot div {
background: url(simple_bottom_left.gif)
no-repeat bottom left;
}
.rbbot {
background: url(simple_bottom_right.gif)
no-repeat bottom right;
}

/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%; height: 14px; font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 20em; margin: auto; }

and HTML:

[div class="rbroundbox"]
[div class="rbtop"][div][/div][/div]
[div class="rbcontent"]
[h2]Header[/h2]
[p]Text here my love.[/p]
[/div]
[div class="rbbot"][div][/div][/div]
[/div]

CSS - Transparency for Images

{img src="assets/misc/solar-radar.jpg" width="105" height="140"
alt="solar-radar (7K)"
style="-moz-opacity:0.5;
filter:alpha(opacity=50);cursor:hand" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"}

In the above code:

-moz-opacity:0.5; - alters opacity in Mozilla based browsers
filter:alpha(opacity=50); - alters opacity in Internet Explorer

More details

CSS - Effect for Transparent Images

Using CSS change the background colour behind transparent .gif images.
The changing background colours show through the transparent portions of the image.

Create an anchor with the following styles

Style:
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000;border:1px solid #990000;}

HTML:
[div class="rollover"]
[p]
[a href="#"][img src="image.gif" border="0"][/a]
[/p]
[/div]

XHTML Events

XHTML Events Complete reference includes:


onload
onunload

onchange
onsubmit
onreset
onselect
onblur
onfocus

onkeydown
onkeypress
onkeyup
onclick
ondblclick
onmousedown
onmousemove
onmouseover
onmouseout
onmouseup

XHTML Reference

Complete XHTML Reference from w3schools.com.


A Comprehensive and essential reference

CSS Presentation: Hi-Fi design with CSS

Hi-Fi design with CSS - presentation by Douglas Bowman covers the following areas:

• Colorswapping


• Fahrner Image Replacement and alternatives


• Adding multiple style sheets


• Styleswitching using scripts


• CSS Rollovers


• Sliding Doors - CSS for Tab Design

.. worth a read

CSS Presentation: The Good, the Bad, & the Ugly

CSS: The Good, the Bad, & the Ugly - presentation by Douglas Bowman covers the following areas:

• What is Image Replacement?


• Fahrner Image Replacement and alternatives


• CSS Code and Design Theft


.. very good reference

Some lesser known HTML character entities

Here's a list of some of the more useful but lesser known HTML character entities.

Character	HTML Entity	Description
¢	¢	Cent sign
£	£	Pound sterling sign
€	€	Euro sign
©	©	Copyright sign
‘	‘	Left single quote
'	’	Right single quote
“	“	Left double quote
”	”	Right double quote
«	«	Left angle quote
»	»	Right angle quote
—	—	Em dash
–	–	En dash
®	®	Registered trademark
™	™	Trademark sign
°	°	Degree sign
±	±	±
¼	¼	One quarter
½	½	One half
¾	¾	Three quarters
×	×	Multiplication sign
÷	÷	Division sign
α	α	Greek letter alpha
β	β	Greek letter beta
?	∞	Infinity symbol

A complete list of character entities is provided in the HTML 4.01 recommendation .

Sample Webcredible Usability Handbook

Webcredible Usability Handbook contains very useful usability tips for designing user friendly websites.

If you like the sample chapters you can purchase the 90-page Handbook at http://www.webcredible.co.uk/handbook.

Don't show scrollbar unless needed (IE)

/* This may make it impossible to scrolling using the keyboard! */
html, body { overflow-y: auto }

Web Development Bookmarklets

Web Development Bookmarklets - a useful set of web development tools that may be attached to IE/FF/Opera

Text Encoding

Text Encoding - Character and Base10 values
The basic format is &#xx (where &# is followed by a number )

space = &# 32;
tab = &# 9;
carriage return = &# 13;
line feed = &# 10;
less than = &# 60;
greater than = &# 62;
ampersand = &# 38;
single quote = &# 39;
double quote = &# 34;

Link:firstobject.com

Navigation menu with lists using :hover and :focus

CSS:

#focusexampleone ul{
list-style:none;
width:200px;
}
#focusexampleone li{
width:100%;
margin:1px;
text-align:center;
}
#focusexampleone a, #focusexampleone a:link, #focusexampleone a:visited{
display:block;
width:198px;
text-decoration:none;
border:1px solid #ddd;
}
#focusexampleone a:focus, #focusexampleone a:hover, #focusexampleone a:active{
background:#484;
color:#fff;
border-color:#000;
}

HTML:

• Link One
  
• Link Two
  
• Link Three
  
• Link Four
  

Printing table details spanning multiple pages

thead, tfoot and tbody allow you to separate the table into header, footer and body. This is particularly useful for large tables and when printed for example, the header and footer rows should appear on every page.

These elements must be defined in the order thead - tfoot - tbody

Note: IE fails!
IE doesn't have a clue when it comes to headers and footers, and although it renders them in the table, they will not appear at the top and bottom of every printed page.

Link:htmldog.com

How to style table columns directly?

How to style table columns directly??

Use a style in the required 'col' of the 'colgroup'
More details at:htmldog.com

The only styles that can be applied to columns are borders, backgrounds, width and visibility.

Tan Hack - (Edwardson Tan)

Basic Syntax:
Only for adjusting the width setting due to wrong CSS1 box model of IE5.x/Win browsers

/*selector recognized-IE only*/

* html selector 

{

  width:value; /*total width-IE5x/Win)*/

  w\idth:value;/*content width-otherIE)*/

}



selector

{ padding:value;

  width:value; /*content width-others)*/

}

The selector of the first rule is meant to be recognized only by IE. It utilizes the star html selector. The first declaration in the rule supplies IE5.x/Win its width value. But since other IE versions which do not have the box model bug will also pick up this value the second declaration is necessary to serve them the correct width. This second declaration has the escape character (backslash) embedded in the middle of the property name, thus, making it "invisible" to IE5.x/Win only. Character escapes are recognized by IE6/Win and IE5/Mac. Keep in mind that the backslash cannot appear before the first letter of the property since IE5.x/Win understands that.

The second rule above is recognized by all CSS-aware browsers. All the properties declared here are for all browsers including IE. The only values which IE will not apply from this rule will be width values since the first rule has a higher specificity. And because of this difference in specificity placement of these two rules relative to one another is irrelevant. Either one can precede the other.

Advantages:
One advantage of the modified form of the SBMH is that it effectively hides any escapes from browsers (other than IE) that may have difficulty with them. When a browser (other than IE) reads the star html selector it will not find any matching element in the markup and will simply move on to the next rule. It will not bother reading the declaration block. Therefore, such browsers as Opera 5 and NS4.x are effectively shielded from w\idth.

Moreover, the modified SBMH is obsolescence-proof. If and when the star html selector bug finally is fixed by Microsoft the hack will not have any negative impact on the browser. Just like Mozilla or Opera 6 for instance the hypothetical new IE without the star html bug will simply ignore the entire rule and pick up the width from the other rule. And since this new IE will presumably be implementing the correct box model (IE6 and IE5.x/mac do so already) all will be as it should be.

Example:

div#footer p{

 margin: 0 30% 0 0;

 padding: 0.5em 2em 0.5em 10%;

 background: #eee;

 font-size: 90%;

}



* html div#footer p{

font-size: 75%;/* for IE5.x/win */

f\ont-size: 90%;/* for other IEs*/

}

Tantek Celik's IE5 CSS1 Box Model Hack

Tantek Celik's IE5 CSS1 Box Model Hack

To achieve an equal width of 120px in all browsers,

Add border and padding values to text width and specify the sum (130px) as the width for IE5
(120px content width + 5px left padding + 5px right padding = 130px)

Other browsers interpreting the CSS box model correctly would identify the width as 120px from the last line of the following #container code.

However the html>body line is required for Opera5 which gets the box model wrong but understands the CSS2 Child Selector '>' correctly.

#container{

  padding:5px;

  width:130px;

  voice-family:"\"}\"";

  voice-family:inherit;

  width:120px;

}

html>body #navigation{width:120px;}

More Details: here at tantek.com

Welcome!

Ah..Yes, finally I have decided to buckle down and key-in a few lines...
It takes a lot of patience and drive to do this...!

Me..
Ramnath Ramachandran - thats my full name..
well i like to be called 'ram' :)
Working as 'Graphic Designer' at Sobha Renaissance IT, Bangalore, India.

webramdesign.blogspot.com
well this doesn't sound very friendly, but I tried all easier ones but they all were used out!
webramdesign - is the abbreviation for 'Web Design and related topics by Ramnath'

well thats all for now...