EW 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.

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.

Table rows with alternating background colours

With large tables it's often useful to have alternating background colours for the rows to aid readability. There are JavaScript soloutions for this but it can be done simply with CSS.

tr:nth-child(2n+1) {
background-color: #cccccc;
}

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...

Other Links

The Ultimate List of CSS3 Resources from Simplilearn, and excellent list of links, tips and tutorials.

CSS Differences in IE6, 7 and 8  Wondering why your not seeing the same results in different versions of IE?

How EW works with CSS. A great summary by Anna Ulrich on the Expression Team

A Sticky Footer in CSS? Here's a cross browser solution that works!

25 Rounded Corner Techniques with CSS

RoundedCnr an online tool for creating rounded corners with variable radius, colour background colour and box gradient. Generates image files, html and css. New

SitePoint CSS Reference - A concise reference of CSS syntax, rules, properties and interactive live demos

Simple Tutorial on CSS Floats - Get your head around the real basics of css page layout

12 Lessons for Those Afraid of CSS and Standards from A List Apart

Ten CSS tricks you may not know from Evolt.org

Ten more CSS tricks you may not know

WebsiteTips.com CSS Section - a huge resource of CSS links and tips

70 Expert Ideas For Better CSS Coding - Worth reading!

RoundedCornr - Want to create boxes with rounded corners? This tool does it for you, creating the necessary images, html and CSS. Various options available too.

Cross Browser Multipage Photo Gallery in CSS - Stu Nichols has a photo gallery using just CSS, that validates

Supporting PNG transparency in IE6

A Sticky Footer using CSS. It's some times a good idea to have a sticky footer, some times not, depending on general page length in the site. This is a pure CSS, cross-browser solution

And don't miss the CSS resources on the Developer Newsfeeds page