skip to content
Advertise here

 


Boxes
Jack in the Box
A flip top box.
Curved Corners
An unusual way to do curved corners.
Three curved corners » 01-01-2007
A definition list used to produce three curved corners.
Four curved corners » 01-01-2007
A definition list used to produce four 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.x and IE6 » 17-09-2007
How to style transparent borders for IE5.x and IE6.
Transparent border error in IE7 » 17-09-2007
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.
Snazzy Borders
Adding snazzy curvedcorners without images.
Boxes
More Snazzy Borders » 22-07-2006
Another idea for snazzy borders.
Krazy Korners
More corners without images.
Chunky borders » 13-03-2007
Chunky borders and bubbles.
Side slants - revisited » 28-10-2006
Another look at side slants in modern browsers
CSS3 Background Images » 28-07-2010
How to make the background image 100% of the conatainer
Boxes
Percentage PLUS Pixels
How to define a width as a percentage plus a fixed pixel amount.
Min-Width for IE6
A fix for the lack of min-width in Internet Explorer.
max-width for IE6 » 05/10/2009
A CSS only answer for max-width in IE6, no javascript or expressions.
Min-Height for IE6
A cross browser method of using min-height.

Latest Demonstrations

Box Model
CSS3 Background Images » 28-07-2010How to make the background image 100% of the conatainer
max-width for IE6 » 05/10/2009A CSS only answer for max-width in IE6, no javascript or expressions.
Transparent border error in IE7 - 17-09-2007IE7 styling error for transparent borders.
Transparent borders for IE5.x and IE6 - 17-09-2007How to style transparent borders for IE5.x and IE6.
Chunky borders - 13-03-2007Chunky borders and bubbles.

CSS play Support



CSS play Recommend

Free, practical CSS menus, layouts, and examples

Follow CSS play

Facebook  Twitter  Facebook Fan Page



Just CSS | Designs for the future

Like the CSS Zen Garden?
Then why not visit Just CSS and see it you can design for the future.



NEXT

Information

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 not 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 w3.org website's recommended DTDs to use in your web document.


Copyright

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.




  • Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
  • We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London

 

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth

CSS play Links