Mobile Friendly Website


Doing it with style


Percentage PLUS Pixels
A width as a percentage plus pixel amount.
Min-Width for IE6
Min-width in Internet Explorer IE6.
max-width for IE6

A CSS only max-width in IE6ions.
Min-Height for IE6
A cross browser min-height.
Snazzy Borders
Snazzy curved corners, no images.
More Snazzy Borders

Another idea for snazzy borders.
Krazy Korners
More corners without images.
Chunky borders

Chunky borders and bubbles.
Side slants - revisited

Another look at side slants/dd>
CSS3 Background Images

Background image 100% of the conatainer
Responsive 'background' images

For IE7/8 to emulate background-size:cover
Jack in the Box
A flip top box.
CSS3 3D Jack-in-the-box

A 3D Jack-in-the-Box demo
Curved Corners
An unusual way to do curved corners.
Three curved corners

A <dl> used for 3 curved corners.
Four curved corners

A <dl> used for 4 curved corners.
Border Writing
How to put text in your borders.
Border Colors
A look at the way different browsers do border colours.
Transparent borders for IE5/6

How to style transparent borders for IE5.x and IE6.
Transparent border error in IE7

IE7 styling error for transparent borders.
Left Scrollbars
How to place the scroll bar on the left.
IE6 3px Float Fix
Another way to fix the 3 pixel float error in Internet Explorer.
Percentage border widths and text size

A CSS only method of producing percentage border widths and text sizing without using @media queries.


These examples explore what is possible using the box model.

From simple rounded corners to complex borders and even a css only fix for the lack of support for min-width in Internet Explorer.

Please note that in most cases you will need to use a standards compliant doctype to ensure that IE6 correctly renders the box model.
Unfortunately IE5.x will need hacks to compensate for it's incorrect interpretation of the box model.

For a list of standards compliant doctypes see the website's recommended DTDs to use in your web document.

Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page