Expression Web Resource

CSS Tips, Links and Resources

Resetting Styles for browser compatibility

Whilst modern browsers are becoming much better in their standards compliance there are still issues that often mean our pages have slight differences when viewed in them.

(And here let me stress the importance of testing our creations in as many browsers as we can. It's imperative!)

One of the cleanest ways around these inconsistencies is to reset the styles for all the tags and then specifically declare what we want in terms of font size, padding, margins etc. (It's worth noting that the CSS Sculptor add-in for EW uses this technique to ensure consistent layouts).

This item from the Yahoo Developer Network Library explains the theory in depth.

Another useful resource is Eric Meyer's MeyerWeb.

CSS Layouts

Struggling with a table-less CSS layout?

Getting a cross-browser layout working can be difficult. There are several resources that can help. One of the easiest to use is the Inkfish 'Layout-o-matic' tool, which lets you select the type of layout you want and then generates the css for it.

See www.inknoise.com

They also have a tool for creating CSS based rollovers which is useful to explore.

Other sources of CSS layouts:

Iron Myers: Build a layout stage by stage

A source for full CSS templates, is www.freecsstemplates.org

CSS Menus

CSS MenuMaker an easy to use tools for creating CSS menus. Create them on-line and then download the HTML, CSS and images

CSS Menu Generator a free downloadable tool for creating CSS menus. No graphics with these so slightly plainer, but a good tool.

Tabs Generator an on-line tool for creating menu tab images . Set the colours, corner radius, borders etc and then download the image.

Webmaster Toolkit CSS Menu Generator. An online tool.

MyCSSMenu Another on-line tool with a range of options, colours, tab styles etc

PureCSSMenu.com An online toll creating cross-browser css menus without using JavaScript.

Using CSS to format printed versions of a page.

If you try to print a web page more often than not you get navigation links, large pictures that take up a lot of space (and ink), banner adverts and a host of other things you don't need.

Alternatively you may have the option of a 'Print this page' link that opens another window with a fairly plain version of the page suitable for printing.

There is a better way....

This is done by specifying an '@media print' group of styles within your stylesheet:

@media print{

.noprint {display: none;}
body {font-size: 12pt;}
}

This example specifies that the styles enclosed apply to printing only and contains a class called 'noprint' which lets you define areas of the page as non-printable, perhaps menus, graphics or banners. It also sets the body font-size to 12pt, rather than pixels, em or %'s, which aren't really suitable for printing.

In a similar way you can specify certain areas of a page for printing only, using a '@media screen' group of styles. The example below uses a class 'nodisplay' with 'display: none;' to define area of the page you don't want displayed on the screen. (The classes can use any name you want for easy recognition).

@media screen {

.nodisplay {display: none;}

}

To see this in action, print this page or use 'print preview'. You'll see that the top of the page and the footer are not printed. A title is printed, but it's not the one shown on the screen.

Indenting the second and subsequent lines of a paragraph (a hanging indent)

It's sometimes useful to indent the second and subsequent lines of a paragraph. For instance where you need decimal lists, something you can't do with a normal OL.

1.1 Il dualismo tipico del catarismo, si fondava sulla lettura del Nuovo Testamento, e più precisamente di passi dei Vangeli di Matteo e di Giacomo nei quali è ricordata in più punti la parola di Gesù, ovviamente interpretata come legittimazione evidente della contrapposizione di due principii: "un albero cattivo produce frutti cattivi, non può un albero buono produrre frutti cattivi, ne un albero cattivo produrne di buoni."

1.2 Fino a pochi decenni orsono l'eresia catara era conosciuta quasi esclusivamente attraverso forme indirette, provenienti da relazioni dei suoi oppositori, tra cui atti dell'Inquisizione e note di polemisti cattolici. Uno dei pochi testi catari noti era il cosiddetto Rituale di Lione, pervenuto in appendice ad una versione occitana del Nuovo Testamento.

Give the <p> tags a style:

.indent {
padding-left:25px;
text-indent:-25px;
}

Alter the pixel values to reduce or increase the indent.

Trouble with table cell widths in IE?

You can carefully set widths for a table and table cells and still have issues where the results don't look the same in IE and FireFox or Opera. If you measure the widths of the table cells in the browser (How? Use CoolRuler) you'll see that the widths in IE are not what you specified, but are in FF.

This is because FireFox and Opera treat the widths as fixed but IE treats then as flexible unless you specify otherwise.

To solve this add a style to your table, table-layout: fixed;

Trouble with inline tables in Chrome or Safari?

It's sometimes useful to have tables next to each other horizontally and in IE and Firefox this is easily done by giving them a style of 'display:inline;' You'll find this doesn't work with the Webkit based browsers, Chrome and Safari. For them you need to use 'display:inline-table'.

So how do we handle this? We need to use conditional css the gives the correct style for the relvant browser, as follows:

table {
display:inline;
}

.webkit, table {
display:inline-table
}

Note that we put the style for IE and Firefox first and the webkit style second. Note also the syntax for the webkit style.

You find that EW unfortunately won't display these tables correctly because it doesn't understand conditional styles. Maybe the next version...

EW Resource