Posted on Leave a comment

CSS : IE and FireFox inconsistancies
…or any browser for that matter

In a life where every browser renders the same way you don’t need to worry about cross browser compatibility, but until that time maybe some hints and tips will help you out (and me when I forget and have to search again!)

I’ll be adding to this list as I find more irritating cross-browser compatibilities…

Display your site the same across all Browsers

First and foremost…

Always have at least two browsers open while building and testing the site. Do not leave it til you are ‘finished’ to have a look and then try to fix things that are wrong. I usually choose IE6 and FireFox 2.0. This way you will notice problems immediately and be able to easily rectify the differences (usually).

Watch your padding carefully

Padding likes to render differently within individual browsers. Margin is your better friend in most cases and should display more consistantly throughout.

Floats and widths

From my experience, IE6 could care less in most cases if you allocate a width on a floated item but FireFox will demand one to display properly. Make sure that any items with float:right or float:left’s also have some sort of a width associated to them.

Posted on Leave a comment

Pure CSS Menu :
Two tiered css menu …
three tiered css menu …
however you like it!

Want a css menu for your website? (See here for an example)

Firstly, get this file:

In your stylesheet add:

behavior: url(/;

Ok, so now you’ll have the css hover capabilities pulled into your website. Next for the menu code itself…

I’m sure you’ll find that some of this code can be reduced or perhaps completely removed to suit your specific needs, but it works as it is and should be a good base to get your menu working!


/** MENU **/ {
font-size: 0.90em;
padding: 0;
position: relative;
margin:40px 0 10px 0px;
width: 585px;
} LI{
background-color: #FFF;
font-weight: bold;
list-style-type: none;
margin: 0 0 0 12px;
padding: 4px 0 0 4px;
} LI:hover
background-color: #FFF;
} LI A {
color: #999;
} A {
margin:-4px 0 0 -5px;
padding:6px 0 1px 5px;
color: #000;
font-size: 1em;
height: 20px;
position: relative;
} A:hover{
} UL{
background-color: #FFF;
margin: -5px 0 0 40px;
margin-left: -5px;
padding: 0;
width: 205px;
} UL LI, UL LI A {
width: 205px;
background-color: #F5F5F5;
background-image: none;
padding-left: 5px;
color: #999;
margin-left: 0;
} UL LI:hover
background-color: #D5D5D5;
} UL LI A:hover{
} UL UL{
background-color: transparent;
border: 2px solid #CCC;
margin-left: 100px;
width: 300px;
margin-top: -20px;
width: 295px;
background-image: none;
padding-left: 5px;
background-color: #666;
color: #FFF;

/* Begin non-anchor hover selectors */ LI:hover{
} LI:hover UL UL, LI LI:hover UL UL, LI LI LI:hover UL UL, LI LI LI LI:hover UL UL
{display:none;} LI:hover UL, LI LI:hover UL, LI LI LI:hover UL, LI LI LI LI:hover UL
{display:block;} UL UL UL LI, UL UL UL A
} UL LI UL LI A:hover {
background-color: #777;

/* End of non-anchor hover selectors */

/* Styling for Expand */ a.x, a.x:visited{
} a.x:hover{
} a.x:active{

For your front-end

[ul class="menu"]
   [li][a href="#"]Home[/a][/li]
   [li][a href="#"]About Us[/a]
	[li][a href="#"]The Company[/a][/li]
	[li][a href="#"]How It Works[/a][/li]
	[li][a href="#"]Made-To-Order[/a][/li]
	[li][a href="#"]Design your own[/a][/li]
	[li][a href="#"]Flexibility[/a][/li]
	[li][a href="#"]Fabric or Leather[/a][/li]
	[li][a href="#"]Corner Sofas[/a][/li]
	[li][a href="#"]Chesterfields[/a][/li]
Posted on Leave a comment

Best Practice CSS

The below is a guide that I follow and I believe it’s great for maintaining best practice CSS. I’d be interested to hear of your best practices as I’m certainly not claiming to know the one and only way!

CSS Stylesheet Layout

Keeping classes and id’s in a particular order will quicken development between multiple developers and avoid unnecessary confusion.

Order your tags by authority

Place the predefined tags such as ‘BODY’ and ‘A’ at the top
Next have your main framework tags, followed by main classes, and then lastly a general section.

This way you will be able to quickly scroll to the general area you want to add/modify.

An example is as below:
/** Standard tags **/

TD {}
A {}
H1 {}

/** Framework tags **/

#full_page {}
#main_content {}
#footer {}

/** Main classes **/

To contain all general classes, with sections for each different area. This may have a sub-section grouped with ‘News classes’, ‘Resource Classes’ … etc.

Note that the predefined tags (BODY, A, H1…) are all in UPPERCASE. Another quick and easy way to identify and organise your code.

Style Arrangement

Keep styles formatted with properties listed alphabetically and in a vertically listed format.
(Ok it MAY be a little OTT for some of you less organisation-enthusiasts, but every little bit helps)


.info_box {
border:1px solid #fff8f3;
margin-bottom: 10px;

General Rules

It is important to have a style sheet for accessibility. This style sheet will replace certain objects for non-graphical / resize-able objects depending on the situation/media used. It is also best practice to create a style sheet to adapt your website specifically for printing. Don’t waste all your visitor’s ink on pointless menus they can not use!

Re-using Code
Re-usable code is best. If there is a consistently repetitive attribute within your style sheet, consider creating a class specifically for the repetitive code and calling in two classes within your pages.

Example #1

.class1 { border:1px solid #000; color:#F00; }
.class2 { border:1px solid #000; color:#F09; }
.class3 { border:1px solid #000; color:#233; }

[div class=”class1”]This text[/div]
[div class=”class2”]This text[/div]
[div class=”class3”]This text[/div]

Example #2

.border { border:1px solid #000; }
.class1 { color:#F00; }
.class2 { color:#F09; }
.class3 { color:#233; }

[div class=”border class1”]This text[/div]
[div class=” border class2”]This text[/div]
[div class=” border class3”]This text[/div]

The second example is better because by combining the repetitive code it will prove to be more flexible, if for example, you decided to change the border to 2px and blue.

Naming Conventions

Especially if multiple developers will be working on a project, a naming convention should be decided upon and kept consistent throughout the project. There are two main adopted methods of naming your classes: camelCase and underscore_separated.

For this guide I make use of the ‘underscore_separated’ method.

Use a generic name for your styles

Use something that describes what it is the class/id will do, NOT how it does it. For example do not say .yellow_text but rather .highlight_text. This way if you were to change the colour to green it would still be relevant without having to change the class/id name throughout your project.

Tidbits of Knowledge

These are little bits that I have found to be saviours of otherwise frustrating situations. Have a go and see if they work for you as well. I’d be interested in hearing little things you do as a developer that makes things more fluid.

Use margins instead of padding wherever reasonably possible. Different browsers still read padding values differently, resulting in different spacing.

Develop using Firefox and then fix bugs in IE. From my experience, and that of other developers I’ve spoken to, it has proved to be far easier to get your desired results matching throughout different browsers if you use Firefox while developing and then flip over to IE to fix any inconsistencies.

Make use of predefined tags by applying classes/id’s to tags already in use throughout your code without loading it down with div’s and span’s. (Example below)

[div class=”highlight”][a href=”mylink.asp”]My site[/a][/div]

[a href=”mylink.asp” class=”highlight”]My site[/a]

See how the class is applied directly to the ‘A’ tag. Reducing of code where reasonable should be one of your targets. In case you are wondering what the stylesheet would look like, here are the two styles that would have been used in the above examples:

.highlight A {
color: #067;

A.highlight {
color: #067;

or even

.highlight {
color: #067;

Use EM in font size and not pixels or other. EM is recommended because of it’s ability to easily scale when required for accessibility. It also makes it very easy to scale your text throughout the project.

And that’s my CSS bible!

Hopefully it will help you sort out what might currently be a disaster of a stylesheet.

Posted on 1 Comment

CSS : Difference between # and . (ID’s and classes)

# represents an id ( #content)
. represents a class ( .highlight_text)

ID’s are a unique identifier and as such can only be used once per page. Use these to define the main structure of your site. The # symbol is used to declare your ID styles.

Classes can be used an unlimited amount of times within a page. It is good to use classes for formatting that will be used to keep your layout consistant and easily adaptable to changes. The . symbol is used to declare your class styles.

When you want to amend a preset html tag, do not put any characters ( . or # ) before it. These only apply when defining whether a style is a class (.) or ID (#) For example:
BODY { font-size:1.0em; }
A { color:#F00; }

however you do apply the identifying character to its classes / ID’s as shown below:

A .quick_link { color: #067; }

Posted on Leave a comment

CSS : Center your page (The better way)

I previously had a post showing how to completely center a page, which works, however if the browser becomes too narrow then the page’s far left side becomes hidden as the center of the page continues to take precedence. (Also the previous post would explain how to also center vertically as WELL as horizontally)

Use this instead, besides, its less div’s and quicker:


/* Set left & right margins ‘auto’ keeps .content in the center of the screen */
/* Left aligns .content text (otherwise it would follow suit and be centered) */
/* Set desired width (I use 775 so fits on 800*600 with scrollbar) */

.content {
margin:0px auto;

And the html code as follows:

<div class=”content”>
This is my content. Everything inside these tags will be constrained within the 775px boundary however it will adjust depending on the width of the screen to always be centered