DivitoDesign » CSS

Browser Compatibility Testing for the iPad

Stefan Vervoort — Thu, 29 Jul 2010 21:07:47 +0000

Over time, I have been testing websites for compatibility issues on different browsers and devices. Back in the days, when your website renders flawless in Firefox 2.0, Internet Explorer 6.0 and 7.0, you was there. Today, Browser Compatibility goes much further.

We are now not only talking about different browsers and their different versions, but the screen size of your visitor is as important. With the rise of mobile phones and smartphones, we have another device that can cause troubles for your websites.

One of those devices is the recently released Apple iPad. With over 3 milion iPad’s sold we have a device to keep in mind. The iPad has the browser Safari installed by default, but there are a few alternatives available. Pretty difficult to keep up with all those browsers, but fortunately the support for HTML/CSS is pretty alright.

There are a few difficulties along the way as I found out today. Take a look below to read a few tips to make your website iPad compatible.

Testing Stage

How do you solve compatibility issues for the iPad when you don’t have one? Fortunately, there are always nice people that develop an app that help: iPad Peek. All you have to do is enter your URL and you see how your website looks on the iPad. Great tool, check it out.

Browser Compatibility Testing for the iPad

Safari Adds Default Styling to Elements

Safari on the iPad adds specific styling the buttons. When you try to add your own style declarations to your button, the default styling overrides that. So how can we change that behavior?

This solution should work.

input {    -webkit-appearance: none; }

Detect iPad for Different Stylesheets

To add a stylesheet specifically for smaller devices (as the iPad and iPhone), add this between your head tags:

"only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

You can also use this for larger devices:

"screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

This gives you more control over the look of the website for both type of devices. Pretty handy of the iPad isn’t working with you.

That’s it for today, I hope this helps.

Case Study: Revamping an Existing Site

Stefan Vervoort — Tue, 27 Apr 2010 21:39:00 +0000

Jacques Soudan, a client and friend I met through DivitoDesign, sent me an email with a guest post about a case study on revamping his outdated site. Enjoy reading about his revamping project.

Below is a case-study on how I used the Blueprint CSS Framework and jQuery JavaScript library to rebuild an outdated site – somehow you helped me with it, so in return I share my work, hoping it can be of future use. Thank you!

The website we are talking about was build back in 2001. As you would understand we are talking about a heavily-aged website that had the following ‘problems’ or difficulties:

using some CSS, but mainly tables
the menu is a separate JS file: easy to maintain, but it doesn’t look too good
a few years ago I added the rounded corners (using JavaScript) and the red backdrop/border, but that doesn’t look too flashy either
the source is not W3C compliant (outdated code like
– instead of the current
)
the footer is embedded in each page (hard to update for about 100 pages)
in general, look & feel is not ‘up to date’
the enquiry form uses a JavaScript file that is no longer supported
in Firefox, the banner is not centered (in IE it is…..) and looks like this (also in a table – probably easy to fix, but never got to it):

For a website in the modern internet world, that is not acceptable. For this reason, I compiled a list of features I would like to have on the modern, good looking website.

Site Features we Need

W3C compliant code
CSS and HTML in separated files
browser compatibility
rounded corners & drop shadow
1 central menu file
JavaScript support (instead of using several separate scripts that (might) interfere)
structured design (layout without tables)

Where to Start?

Last year I read this very useful article about building HTML/CSS sites using a template. This template has a grid CSS layout and the jQuery framework build in. I had seen those before, but was not yet using them in combination with WordPress.

I also found this site for dropshadow & rounded corners. As I wanted to avoid too many jQuery plugins, I didn’t use jQuery for the round corners. So far my experience is that jQuery rounded corners can interfere with other plugins, needing too much work to fix (and warrant) it.

For this reason, the no-Java-script solution seemed preferable. Provided, it had worked – it did not – as it uses several , it messed up the Blueprint classes, it didn’t display properly ‘underneath’ the header images etc. The typical pain when it comes to CSS and different techniques in different browsers.

So…. dropping Blueprint? Or dropping the very sleek (and easy!) rounded corners? Dilemma there….. Until playing around with Blueprint a bit more…. as it comes with grid.png, to display the columns for design purposes, which you can switch off when you go live. But then, if you can remove that backdrop, why not adding your own???? Using my own image I had created for the initial technique, but thought useless now, it worked flawlessly!

Here is what I did – in the Blueprint folder, there is a screen.css – just add one line and comment the grid-line – that’s all!

In your container-DIV, just add the ‘showgrid’-class: (you need that anyway, if you want to display the Blueprint-columns):

The grid.png is repeated both horizontally & vertically, but my one large image is not, so it fits perfectly – I stretched it to 1600px, as the backdrop is hardly ‘repeatable’: it is a scanned letterhead-paper with a unique texture – using only a small slice/strip and repeating that would make it look unnatural. And I use a footer-image – including it in php, it neatly fits underneath the length of the actual content – not the full background image of 1600px – it ‘stretches’ to the maximum height, but resizes to the needed height.

I wanted to use this menu for this website. One problem though: it has no single menu file (eg. menu.php) you can add to your website. After building that menu.php file myself, the jQuery menu worked perfectly.

When I created the header.php and footer.php files and included in the website using PHP, they are easily updated in those 100 different pages. Depending on the page of the website, I can now include different images via one page. Pretty efficient.

The Template

With all this now in place, this is how the code looks like (this is what I will use as the ‘page-template’ (there is some test copy in, to show in Blueprint columns – all the ‘body-text’ for an individual page is placed within the (both -classes, in blue) – everything remains in place, no fluid/stretched text (in different browsers).






 
"container" class="container showgrid">
"header" class="span-24 prepend-top">
"prepend-1 span-22 append-1">


"CONTENT" class="prepend-1 span-22 append-1 prepend-top">
"span-17">
Main content
Put your main text here (17 columns wide).


"span-5 last">
Sidebar
Some sidebar on the right (5 columns wide).




"footer" class="span-24">

Blueprint-grid enabled:

And this is how it looks like (pictures not optimized yet):

I need to finalize the CSS and do some tweaks here and there, but the very flexible yet sturdy framework is there. You can visit the live version of the website right here to check how it works.

Thank you – I hope this is of help to you – let me know if you have any questions or feedback by adding a comment.

CSS Conditional Comments Guide

Stefan Vervoort — Mon, 16 Mar 2009 11:55:08 +0000

As you might know, Internet Explorer 6 isn’t the most modern browser out there. In fact, it is almost 8 years old, but many people are still using this un-secure access to the web. Because of this fact, webdesigners still have to worry about how their work looks in Internet Explorer 6.

When CSS Frameworks & Templates came around, some layout problems have been fixed, but definitely not all. These problems can usually be solved via normal CSS, but sometimes it is better to only display some (style)information to Internet Explorer users only.

That is possible with conditional comments. Conditional comments are only supported by Internet Explorer versions on a Windows machine. With these ‘tricks’, we can add special behavior to Windows based versions of Internet Explorer 5, 6, 7 and 8. The good thing is that this HTML code validates as well.

The Form of a Conditional Comment

All the conditional comment tags available are based on the same principle. This conditional comment is for all Internet Explorer versions.

Depending on the situation you need to add a version number. Maybe you want to show a different stylesheet to Internet Explorer 5.5:

1
2
3

Or only to IE7:

1
2
3

You get the point, right?

What Else Can We Do?

Microsoft have added a couple parameters to these conditional comments too. For example, we can add “version Greater Than or Equal to” and “version Less Than or Equal to“. And that’s pretty handy.

Let’s say we want to add a different stylesheet for the Internet Explorer version 7 and below. We can do that like this:

1
2
3

Or if we want to create a different stylesheet for version 6 or higher:

1
2
3

We can any of these parameters in our conditional comment:

lte – less than or equal
lt – less than
gte – greater than or equal
gt – great than
(IE6)|(IE7) – if Internet Explorer 6 OR Internet Explorer 7
(IE6)&(IE7) – if Internet Explorer 6 AND Internet Explorer 7
For more examples click here

Conditional Comments to Ask People to Upgrade Their Out-dated Browser

I usually don’t use conditional comments to fix browser bugs. The way I use them is to tell people they have an out-dated browser. In that message, I tell them they should upgrade their browser for more security and features.

Via this way, you can tell people they shouldn’t be using this version and when they read it, they might upgrade to a more modern browser. As you can see, these conditional tags have many advantages to use in your next website.

Building HTML/CSS Sites: Use a Template

Stefan Vervoort — Fri, 27 Feb 2009 13:04:51 +0000

If you are developing HTML/CSS websites with occasionally a little bit of JavaScript (just like myself), it can be very un-productive to write your basic codes over and over again.

For example, if you want to include a JS file for your dropdowns, a CSS framework file and print CSS files every time you start working on a new project, you better read this article for some time-solving solutions.

Create a Template for Starting From Scratch

We are going to make a Template Folder we use every time on a new project. This includes a basic index page, the JS files, the CSS files and our basic images. In my projects, I use these files almost every time:

JavaScript (folder /js/)

pngFix.js (to have transparant PNG files in IE6)
custom.js (with a search form fix + the suckerfish JS to make dropdowns work)
jQuery.js (to have a good JS library to start with)

CSS (folder /css/)

Blueprint CSS Framework
- screen.css
- print.css
- ie.css
custom.css (for all my custom styles)

Images (folder /images/)

RSS icon

I suggest you take a look at some of these links I provided in the list and check out what you need yourself in a regular project. If you need other JavaScript fixes or basic CSS code, be sure to use them instead and add them in the same way I will describe below.

Let’s build our Template’s Index page

I hope you have placed all the files you need in an appropriated folder. For example, I have placed my images in /images/, my CSS files in /css/ and my JavaScript files in /js/. This will make things look pretty structured.

Alright, Let’s start with a standard HTML page:

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=utf-8" />
</span>Untitled Document<span class="html-other-element">

Description + Keywords + Robots

Any site needs a proper description and maybe some keywords. They won’t do much to your SEO rankings, but they will help you displaying your search engine results in a proper way. It could also be a good idea to add a meta tag for robots, so your search engine knows they can index your site.

Here is what I have added to my standard META tags. You should add all the following codes + inclusions between the tags in your HTML page.

"description" content="" />
    "keywords" content="" />
    "robots" content="index,follow" />

CSS Framework

We have to add our CSS Framework first. Depending on the way your framework needs inclusion, here is the Blueprint way:


    "stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
    "stylesheet" href="css/print.css" type="text/css" media="print" />

Custom Styles

Next, I think it’s important to have a custom stylesheet at hand, so let’s add our custom.css stylesheet.

1
2
3


    "stylesheet" type="text/css" media="all" href="css/custom.css" />

JavaScript files

Now we have added style to our template, let’s add some JavaScript. I suggest you include jQuery first, because if you include jQuery plugins before the original library, they won’t work. So, here’s how I include my JavaScript files:

Everything we needed to include is done right now. We can now start adding some more code to our template’s Index file.

Structuring codes

Depending on your framework, you could add a basic structure between your tags. Most sites I developed have this structure:

Container
- Header
- Content
  - Content
  - Sidebar 1
  - Sidebar 2
- Footer

That’s why I have already created the structure so I can start right away.

"container" id="container">

    "span-24" id="header">

    "span-24" id="content">

       "">
       "">


    

    "span-24" id="footer">

As you can see, I haven’t given my DIV’s inside my Content DIV any ID and I even commented one of them. This is for the simple reason I don’t know what I will be adding to the content area yet. Every project is different, however, I usually choose two or three DIV’s inside the content.

Our Custom CSS Files

Next thing we will do is creating some basic CSS styles.

For example, it is important to structure your codes pretty well. When you need to work fast, you often work less structured and nice. With the use of a template, the structure is already there. You only need to fill it up.

Comments

I am not going to teach you how to write structured code as Woork has some great tutorials on them. You should always start with the basics details on your project. You can add more or less details in here, that’s up to you.

/*
Author:           Stefan Vervoort
Author URI:       http://www.divitomedia.com/
Version:	   0.9

Project:
Description:
*/

I think next, a table of contents is appropriated:

/*
---------------------------------------------------------------------------------------
TABLE OF CONTENTS
	-- RESETS
	-- BASICS
	-- CUSTOM
---------------------------------------------------------------------------------------
*/

You should add a heading above each section of your stylesheet. For example, when styling basic stylesheet attributes, you can do it like this:

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
body { }
a { }
a:visited{ }
...

And, next, you add this section to your table of contents. I suggest you only place only your larger sections in your table of contents. This is just a basic lesson in structuring your CSS file.

CSS Resets

First, I have added a Reset. My personal favorite is the Eric Meijers’ Reset Reloaded.

/*---------------------------------------------------------------------------------------
--- RESETS
---------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
	p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	:focus {
		outline: 0;
	}

	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

The basics

The next thing I have added are a couple basic styles, without adding to much behavior. I have added default font sizes, some classes I always use (like .left, .right, .clear, .padding) and some image styles. Be sure to include your own preference in there too.

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
html{		font-size:100%;	min-height:101%;}
body{		font-size:62.5%; color:#666;}

a{		}
a:hover{	}
a:active{	}
a:visited{	}

.left{		float:left; }
.right{	float:right; }
.clear{	clear:both; }

img.left{	margin:0 1em 1em 0; }
img.right{	margin:0 0 1em 1em; }

.padding{	padding:10px; }
#content p{	margin:1.1em 0; }

Dropdown Menu

Because I tend to use a dropdown menu in all my latest projects, I have all the styles added to my stylesheet to make the dropdown menu work proper, just without color styles. This makes it easy for me to style these menu’s easily.

If you want to use the suckerfish dropdown menu and want to add some basic behavior to your stylesheet, here are my codes. I always place my navigation menu inside a DIV with ID navigation.

/* ------------------------------------------------------------------------------------
NAVIGATION MENU				 */
#navigation, #navigation ul {		padding:0;	margin:0; list-style:none; line-height:1; float:left;	}
#navigation a {			display:block; padding:6px 10px; text-decoration:none;	}
#navigation a:hover{			text-decoration:underline; padding:6px 10px; }
#navigation li { 			float:left; width:auto;	}
#navigation li{			padding:0; margin:0; }
#navigation li ul li{			padding:1px 0px;}
#navigation li ul li a{		padding:6px 10px; width:110px; }
#navigation li ul { 			position:absolute; padding-top:1px; width:130px; left:-999em; }
#navigation li ul ul {			margin: -1.5em 0 0 130px;	}

#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {	left: -999em;	}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul,
#navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { left: auto;	}

Site Structure

It’s easy to gather all your structure DIV’s and put their ID’s under each other. This way you always know where to look when something isn’t right in your structure.

/* ------------------------------------------------------------------------------------
STRUCTURE					 */
#container{	overflow:hidden; border:solid #000; border-width:0 2px; font-size:1.5em; }
#header{}
#footer{	clear:both; }
#content{}
#right{}
#left{		}

Time for the custom code

My default styles I use in any project are in my stylesheet now. One thing I do next is adding this comment:

1
2
3

/* ------------------------------------------------------------------------------------
CUSTOM				 */

Which means, we are ready to start.

Template Done

We are ready to start developing with our new template system. Remember to always make a copy of your template before you start editing there. If you don’t do that you will loose your basic template, because you’ll save custom files over your original.

One tip I can give you is to email your template to your own email address. Once you, accidentally, lost your original template, you will be able to retrieve your original one! A backup is a live saver.

Download my Template

I can give you my template to use on your own projects and you will have everything all together. I hope you see the advantages of this way of starting on a project and I hope it’ll save you some time.

Download HTML-CSS-Template.

Any Tips?

If you spot any faults in the code, or if you think some code can be optimized, or if you have some tips to add to the template, don’t hesitate to leave a comment!

Blueprint CSS Framework – Learn The Basics

Stefan Vervoort — Sun, 01 Feb 2009 18:17:56 +0000

Because of the success of the latest “Learn the Basics” article about the 960 CSS Framework, I feel there is a need for detailed tutorials on how to start with CSS Frameworks. It’s not uncommon that people don’t know the basics before they start. It’s time to change that.

In the mentioned article, many people commented they like the Blueprint CSS framework more than the 960.gs. They feel it gives them more flexibility and works easier. That’s why I took a better look at this CSS framework and decided to teach you exactly how the basics work.

This tutorial will only gives you the basics of the Blueprint CSS framework. You need to understand CSS before you should be using CSS frameworks.

The Basic Principles

Before you can really develop with this framework you need a few things up-front.

Which files do you need

We need to download the CSS framework first. You can download the files here. Once you have opened your .zip/.rar, you will notice a lot of files. That’s because this isn’t your basic CSS framework alone, there are many other features we won’t discuss today.

We only need screen.css, print and ie.css, which you can find in the blueprint folder.

Do not edit templates

I suggest you don’t edit these CSS files, because they are part of a template. A template that might gets a few updates in the future and if you add customizations there, you won’t have an easy updating procedure.

How to add Blueprint to your site

Adding Blueprint only requires these lines of codes. You need to insert these between the tags of your site.

"stylesheet" href="screen.css" type="text/css" media="screen, projection">
"stylesheet" href="print.css" type="text/css" media="print">

But, of course, you want to add some custom styles too. We have to create another separated CSS file that does that. For example, you can call that file style.css. Use this line of codes to add this file to your site.

"stylesheet" href="style.css" type="text/css">

What Can Blueprint Do?

We have a number of classes in the blueprint stylesheets we can use. I will explain the most important ones for our grid layout first.

Container

We have to start with a container. By default, this container is 950px width and is centered in the middle of your screen. You can add 24 columns in this container, with a width of 30px per column. A margin of 10px is added to the right side of the column.

"container">

Columns

There are 24 columns you can choose from. For example, you can choose a layout with 4 boxes with boxes composed of 4, 12, 4 and 4 columns. Here’s the structure:

"container">
"span-4">Sidebar
"span-12">Content
"span-4">Photos
"span-4">Sponsors

As you can see, blueprint uses the span-x class to determine how many columns you need to add.

Margins.

As you all know, every column in blueprint has a margin-right of 10px. When we leave the structure this way, the last column in the layout will have that margin as well. We don’t need it there because it’ll break our layout.

Blueprint has a solution for that in the form of the .last class. Where you add that like this, your layout will render perfectly.

"container">
"span-4">Sidebar
"span-12">Content
"span-4">Photos
"span-4 last">Sponsors

Styling Your Columns

Now that you know how to build your structure with Blueprint, it’s time to add some padding and maybe a background color. So how are we going to do that when we can’t touch the original screen.css and print.css? Simple. Remember the style.css file I asked you to make?

First we have to do something about our structure. Due CSS specificity an ID is more important than a Class and we are going to add ID’s to all our boxes. When we style ID’s, we will overrule the styles the classes give.

"container">
"sidebar" class="span-4">Sidebar
"content" class="span-12">Content
"photos" class="span-4">Photos
"sponsors" class="span-4 last">Sponsors

We can now open up our custom stylesheet (style.css or any other name) and style the ID’s we have given here. If you don’t understand what I mean, I suggest you start learning CSS from scratch first.

As an example, I have made a small layout and added some style myself, check it out.

More Practices

Blueprint is much more than all the above. For example, you can add classes like .hide (to hide an element), .highlight (to give an element a specific background and highlight the text), add borders, and the default styles for typography and forms are pretty nice as well.

Position classes are added as well, but I haven’t really worked with that yet. I will post a follow-up article on the Blueprint CSS framework once I have experienced to this CSS framework’s full potential. You can get a message when this article arrives by subscribing to the RSS feed or via email.

CSS Resources: The Ultimate Collection

Stefan Vervoort — Sun, 18 Jan 2009 22:00:25 +0000

As a CSS developer (or as a learning CSS developer) you use many resources and sites that help you along the way. May it be as a CSS tool, as a bug fix, or even learning CSS via tutorials. I have compiled the Ultimate List of CSS Resources.

If you have a suggestion for an inclusion, please let me know and I will update the list.

Beginners

CSS is a fairly easy language to learn. However, you need to know where to start. Check out the following links to start of well.

General

Here are some general links that don’t fit in any of the other sections but are worth mentioning.

CSS Books

Although I don’t read much offline, I’ve read these CSS books. If you are serious about CSS, you should consider buying any of these books, if not all.

Write Clean and Organized Code

You can write some crappy CSS, or you can create a clean and organized stylesheet. Mastering this will save you time in the end.

CSS Resets

Resetting the default CSS interpretation of browsers is a must. Use any of these CSS resets and you can really start building a site from scratch.

CSS Typography

Typography is an important part of the web. Use CSS to create beautiful looking headings, paragraphs and more.

CSS Compressors

Compressing your CSS once you are finished is a great way to optimize your code and make your CSS styles load faster. Make sure you keep a backup of your original stylesheet in case you want to make changes.

CSS Cheatsheets

CSS cheatsheets can be very handy when you need to reference to a CSS selector. You should print them and put them on your wall!

CSS Galleries

When you are writing CSS, you might need some inspiration along the way. That’s why CSS galleries are there: the most beautiful CSS layouts right in front of your eyes.

PSD to HTML

It’s important to be able to import your beautiful layout crafted in Photoshop into a quality HTML and CSS layout. The ins-and-outs can be learned via these tutorials.

CSS Frameworks

CSS frameworks can be great for coding perfect looking grid layouts with ease. I use them in my projects all the time.

CSS Tools

There are numberous CSS tools out there that will greatly improve your CSS workflow. I have bookmarked a lot of these tools and it save me lots of time.

CSS Bugs & How to Solve Them

When you are writing CSS, you will find numerous bugs on your path. Keeping a list of websites that will fix them will save you lots of debugging time.

CSS 3

While it can take years until CSS3 is finally supported on all major browsers, you can still use it for browsers that does have the CSS3 support. Just remember, your page should look good without these features too.

Tricks to Solve 960 CSS Framework Problems

Stefan Vervoort — Sun, 04 Jan 2009 15:57:26 +0000

A couple weeks back we have learned about the basics of the 960.gs CSS framework. Today we will talk about 2 problems with the 960 framework you might have struggled with. This post acted like a problem solver.

Many of these “problems” are very simple to solve. You will need a basic understanding of the framework though to understand why and how things get solved. You should learn the basics here.

Add padding

All the boxes in the framework have a specific width and margin and this creates the grid look and feel. However, sometimes you want to create a “box” or just want to add padding to your div.

As in any framework, this isn’t possible in the regular way. When you add padding to the div, the div will become wider and this will screw up your whole grid layout.

Solution

There is a simple solution to solve this problem. We will add another div inside the div you want to add padding to. We don’t give the new div any width declarations. So, we don’t give it a .grid_xx class.

Now, if we want to style this box and you have added a class or ID, we can add padding. Because we didn’t specific any width declaration, it is automatically 100%. If we add padding, the width of your div will stay the same. Take a look at our example to clear things up.

"container_16">

Let’s say we want to add padding to the div with ID “left”. Usually, like this:

div#left{
padding:10px;
}

However, this gives your div an extra 20px width. We work differently today:

"container_16">
     "left" class="grid_8">
          "special-div">example

Together with this CSS:

div#left div.special-div{
padding:20px;
}

Take a look at our live example to see this works. As you can see, things are doing fine and the grid isn’t screwed up! I have added a border/background to the style declaration to make sure you can see what I mean

Tip! You can also do this with borders!

Wider or Narrower 960.gs Layouts

Width is a specific part of the 960.gs CSS framework. What if you want to create a layout that is wider or narrower? The facts first.

The 960.gs framework is called 960 for a reason: it’s 960px width. The whole grid is based on this 960px. You can’t make everything narrower or wider because everything gets screwed up. For a narrower layout however, we can use a trick. The wider layout isn’t possible with 960 gs and you should pick another framework like blueprint CSS.

Let’s create that narrow layout.

Solution

There are more CSS codes that can do the job, but I will just use the 960 way today.

Say we have this basic grid:

"container_16">
     "layout">layout

This means that inside our basic “container” div, we have another div. This div with ID “layout” will be (surprise!) our layout. You see this div don’t have a .grid_xx class? Explanation will follow.

We have to put another div behind our “layout”-div, so we can position everything. I will give this div the class .grid_12. You can of course change this in an appropriate width. Our grid now looks like this:

"container_16">
     "grid_12">
          "layout">layout

As you can see in the our HTML file, our container’s width “is” 16. Our container div’s width “is” 12.

Simple math shows that 16 – 12 is 4. We have the width of .grid_4 left. Because we need the same amount of space on both sides of our div, we can do some simple math again. We have .grid_4 / 2 sides = .grid_2 on both sides.

There are classes included in the 960 framework that can add a number of default padding like that .grid_1, .grid_2 etc. Padding-left is .prefix_xx and padding-right is .suffix_xx. Let’s add a padding-left of .grid_2 to our example.

"container_16">
     "grid_12 prefix_2">
          "layout">layout

Check out our basic example to see that our grid is in the middle of your screen, and narrower as our original 960 layout.

Conclusion

These are the problems I was facing when using the 960.gs CSS framework. I don’t have other problems I think that should be tackled in 960.gs. It works good for me.

Perhaps you?

You might have a questions or problem you are facing when using 960 CSS framework in development environments. Don’t hesitate to point them out in the comments and I will see if I can add a solution in a follow-up post.

960 CSS Framework – Learn the Basics

Stefan Vervoort — Mon, 15 Dec 2008 14:14:41 +0000

CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here.

I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.

This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.

The basics principles

You have to know a couple basic principles to “learn how the framework works“. You can learn these during the experimenting process, but I will explain them here for you, too. Let’s start.

Do not edit 960.css

A small note before: do not edit the 960.css file. If you do this, you won’t be able to update the framework in the future. Because we need to style our HTML though, we will create a separated CSS file.

Loading the grid

Before we can use CSS codes in an external file, we have to load these in our own HTML site. Which can be done via these codes:

<link rel="stylesheet" type="text/css" media="all" href="path/to/960/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/text.css" />

Once we have this ready, we have to include our own CSS file. For example, you can call this file style.css or site.css or anything else. Include this file with these codes:

<link rel="stylesheet" type="text/css" media="all" href="path/to/style.css" />

Containers

In the 960 framework, you can choose between 2 container classes namely .container_12 and .container_16. These containers are always 960px width (thence the name 960!) and the difference lies in the number of Columns. The .container_12 container is divided into 12 Columns and the .container_16 container is divided in 16 columns. These 960px width containers are horizontal centered.

Grids / Columns

There are numerous column widths you can choose from and these are different in the 2 containers. You can find these widths by opening the 960.css file, but this isn’t necessary to design a proper website. There is a smart trick that make the framework even easier.

For example, if you want 2 columns in your container (say sidebar/content), you can do that this way:

"container_12">
"grid_4">sidebar
"grid_8">main content

You can see that the sum of your first column (grid_4) added with the second column (grid_8) is exact 12. That’s for a reason, you don’t have to know the widths of these columns, you can choose column widths doing a very easy bit of math.

Let’s say we will create a layout with 4 columns. The codes will be these:

"container_12">
"grid_2">sidebar
"grid_6">main content
"grid_2">photo's
"grid_2">advertisement

As you can see, this system works pretty well. If you try to load this in your browser however, you see something that isn’t right. That’s the introduction of our next topic.

Margins

By default, the columns have some margin between them. Every grid_(insert number here) class has 10px left and right margin. This means that in total, between 2 columns, we have a total margin of 20px.

20px margin is great to create a layout with enough white space to make everything looks smooth. That’s one reason I enjoyed using 960.

With our example from earlier, we had a problem when we loaded the page in our browser. We are about to fix that.

The problem is that every column has Left and Right margin. The first column and the latest column in the container doesn’t need any margin. Here’s the solution.

"container_12">
"grid_2 alpha">sidebar
"grid_6">main content
"grid_2">photo's
"grid_2 omega">advertisement

You can simple add the class alpha for no left margin, and the class omega for no right margin. This example layout we made is now aligned perfectly in any modern browser (and yes, also in IE6).

Styling

Perfect, you know all the basics to create a grid layout with the 960 framework. Of course, we would like to add some style to our layout, too.

"container_12">
"sidebar" class="grid_2 alpha">sidebar
"content" class="grid_6">main content
"photos" class="grid_2">photo's
"advertisements" class="grid_2 omega">advertisement

Because CSS uses specificity to determine which style declarations have priority above the other, the id is more important then the classes.

This way we can overwrite rules that have been set by the classes (like width, padding, borders etc) in our own CSS file.

I have added some style too, which took me exactly 5 minutes to get this whole example together. Check the source for the example and style declarations.

We are done

That’s it. You have just learned how to use the 960.gs framework to build cross browser compatible and smart layouts. When you have completely mastered the 960 framework you will greatly decrease the time you are writing CSS.

If you haven’t already, check out the example.

My questions for you!

Do you use the 960 CSS framework? Or any other framework? Do you think a framework help you to improve your code?

Excellent printing brochures available at PsPrint.com

9 Tips to Smaller & Optimized CSS Files

Stefan Vervoort — Sun, 30 Nov 2008 15:55:18 +0000

Because CSS files are loaded from inside the tags, every visitor download these files. We optimize images and PHP files, but CSS files are often overlooked. We should though and that’s what we will do today.

We can use CSS optimizers to make your CSS file smaller and that works great. However, I feel that if you use any of these tips WHILE you are writing CSS codes, your productivity and skill will improve.

Optimizing your CSS file is also necessary to save bandwidth and to have a good loading time of your page.

Tips for optimizing your CSS writing style

1. Comments

Comments are especially helpful when writing CSS and your fellow workers need to understand what you are coding. There are different ways of how to add comments though. You can use this:

/*-------------------*/
/*-----Comment-------*/
/*-------------------*/

While you can use this too:

/*Comment*/

That saves, say 20 characters. Say we have 15 pieces of CSS comments, that saves 300 characters!

2. Color Prefixes

Color prefixes are defined in HEX codes. The HEX codes are 6 characters long, but in some cases, you can use 3 chars to define the same colors. Take a look at the example:

div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */

3. Combine Elements

For example, if you have a couple elements like h2, h3 and h4 and all of them have the same properties. They just differ in one point. You can do this:

h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}

h2{	font-size:1.2em; }
h3{	font-size:1.1em; }
h4{	font-size:1em; }

In this way, you have combined the elements and you have added an extra style declaration for the font-size property. This will save you lots of space when you get used to this.

4. Leave Out Px/Em/% When Value = Zero

The value zero (0) doesn’t require Px, Em or percentage. 0px is of course the same as 0em or 0%. So when you use the value 0 in your CSS layout (I guess you do!) than this trick will save you a couple chars every time.

1
2
3

div{ padding: 0px 5px 5px 10px; }
/* Shortcode: padding: 0 5px 5px 10px; */

5. Combine Properties

Some properties as padding, margin and border have been split. For example, padding has padding-top, padding-right, padding-bottom and padding-left.

If the possibility exist, you should always combine these to one property because it make editing easier and it saves you space too.

div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px; }

/* Shortcode: padding:50px 4px 23px 0; */

When the bottom/top values are the same and the left-right values as well, you can optimize it even more:

div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px; }
/* Shortcode: padding:5px 0; */

6. Choose Classes/ID’s wisely

You should choose classes and ID’s that are short, easy to understand and descriptive.

Don’t choose something like “HeaderMiddleLeftCategories” if you can choose something like “h-cats“. That save you many chars along the way.

7. Save Space by Cleaning up your CSS file

When developing CSS websites you have idea’s that might or might not work. The idea’s that don’t work have been coded inside the CSS file, so they take up space and they are not necessary.

You should look through your CSS file for faults and unnecessary codes. This could save you lots of space.

8. Delete Semicolons on the Last Property of a Selector

One trick I found out via the use of a CSS compressor is that you have the possibility to delete the semicolon of the last property of a Selector. Take a look at this example:

body{
background:#ccc;
color:#333; }
/* Shortcode: color:#333 */

You see I deleted the latest semicolon? This isn’t a very large optimizing trick, but every char adds up to the sum. Say you have 50 selectors, you save 50 characters.

9. Delete Unnecessary Spaces & Enters

You might want to delete all the spaces and enters, as they are all count as one character. The problem with deleting these characters is that your CSS file loose structure and is less readable.

I usually don’t use this point when optimizing my CSS file because of structure is more important to me. An option to consider is that you save 2 different files, one without enters and spaces (and you use that file on your site), and you keep a copy with the enters and spaces so that editing is still easy to do.

Conclusion

If you want a CSS file fully optimized, I suggest you use a CSS compressor. You should teach yourself these tips, so you can write faster and code higher quality CSS.

Maybe you have other tips you use when optimizing your CSS file and I would love to hear them. You should add the tips to the comments!

Let Internet Explorer 6 Behave Like Internet Explorer 7

Stefan Vervoort — Mon, 17 Nov 2008 18:06:34 +0000

We all hate Internet Explorer 6 because the lack of support for CSS and the security issues it has. The browser is 7 year old and dated, but is still used by too many people.

Before we are finally ready to make our websites only work in the modern browsers, we have to deal with this problem. One solution could be the IE7.js JavaScript library.

What is the IE7.js JavaScript library?

IE7.js is a JavaScript library to make Internet Explorer 6 behave like Internet Explorer 7, a more modern browser. This library fixes many CSS and HTML issues developers are constantly trying to deal with.

What bugs does IE7.js fix?

Many CSS properties are supported by most modern browsers but not by IE6: IE7.js solve these problems. IE7.js also fixes many IE6 bugs that annoyed us from day one. Here are the most important ones:

CSS Selectors

parent > child
.multiple.classes
:hover
:first-child
[attr]
[attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"]
[attr*="value"]

CSS

Background-image – PNG alpha transparency (IE5.5+)
Background-attachment – Support fixed positioning
Position – Support fixed positioning
Margin – Support auto (IE5.x)
Cursor – Support pointer for IE5.x
Display – Convert list-item to block for IE5.x

HTML

img – PNG alpha transparency
abbr – Bug fixed

How to implant this library to your website?

Yes I am sure you are. Next we will implant the library into your website. You can do that by adding this code between the tags.

It sounds to good to be true, right?

There is only one real disadvantage of this library. Like any other JavaScript script, it won’t work unless JavaScript is activated on the computer of the user.

The change exists that IE6 users have turned off JavaScript because of the security risks IE6 has. And if that’s the problem, IE7.js won’t work, and so won’t the features you have implanted.

With the result your website might not show correctly on these computers. So, you still have to make sure your website works in IE6 if Javascript is turned down and that doesn’t solve the whole IE6-hate-thing.

The IE8.js file

I decided to focus this article on IE7.js because that solves the most common bug fixes a normal developer would require and because Internet Explorer 8 is still in BETA. If you decide to use the IE8.js file instead of the IE7.js file, here’s how to do that:

Note: You don’t need to include the IE7.js if you are using IE8.js.

DivitoDesign » CSS

Browser Compatibility Testing for the iPad

Testing Stage

Safari Adds Default Styling to Elements

Detect iPad for Different Stylesheets

Case Study: Revamping an Existing Site

Site Features we Need

Where to Start?

The Template

Main content

Sidebar

CSS Conditional Comments Guide

The Form of a Conditional Comment

What Else Can We Do?

Conditional Comments to Ask People to Upgrade Their Out-dated Browser

Building HTML/CSS Sites: Use a Template

Create a Template for Starting From Scratch

JavaScript (folder /js/)

CSS (folder /css/)

Images (folder /images/)

Let’s build our Template’s Index page

Description + Keywords + Robots

CSS Framework

Custom Styles

JavaScript files

Structuring codes

Our Custom CSS Files

Comments

CSS Resets

The basics

Dropdown Menu

Site Structure

Time for the custom code

Template Done

Download my Template

Any Tips?

Blueprint CSS Framework – Learn The Basics

The Basic Principles

Which files do you need

Do not edit templates

How to add Blueprint to your site

What Can Blueprint Do?

Container

Columns

Margins.

Styling Your Columns

More Practices

More Reading About Blueprint CSS Framework

CSS Resources: The Ultimate Collection

Beginners

General

CSS Books

Write Clean and Organized Code

CSS Resets

CSS Typography

CSS Compressors

CSS Cheatsheets

CSS Galleries

PSD to HTML

CSS Frameworks

CSS Tools

CSS Bugs & How to Solve Them

CSS 3

Tricks to Solve 960 CSS Framework Problems

Add padding

Solution

Wider or Narrower 960.gs Layouts

Solution

Conclusion

Perhaps you?

960 CSS Framework – Learn the Basics

The basics principles

Do not edit 960.css

Loading the grid

Containers

Grids / Columns

Margins

Styling

We are done

My questions for you!