CSS in the Real World

Paul Hart

The Image Group

Overview

A Foundation - A few assumptions
XHTML & CSS Basics - Things you need to know
Tips and tricks - Coding for the widest user and browser base possible
Dealing with browser bugs - Bugs and fixes

Sites We've Done on GCI

Center for Church Music: http://www.songsandhymns.com/
Devos Urban Leadership Initiative: http://community.gospelcom.net/
Brix?pageID=15954
Kid's Hope USA: http://www.kidshopeusa.org/
Micah Morphosis: http://www.micahmorphosis.com/

Moments of Melody: http://www.momentsofmelody.org/
Oklahoma Wesleyan University: http://www.okwu.edu/
Follow the Rabbi: http://www.followtherabbi.com/
Western Theological Seminary: http://www.westernsem.edu/

A Foundation

HTML is part of the design process
CSS is best
- Browser downloads information once (pages are lighter)
- Machine readable = human readable
- Easier long term maintenance and design changes
Styling XHTML is like styling a Word document
- One H1 in a document
- Follow your headlines from top to bottom
(Almost) always use a container in your XHTML
(Almost) always create nav as UL

XHTML & CSS basics

<span> and <div> have no intrinsic value in XHTML
Don't overcode (divitis and classitis)
It's CASCADING stylesheets
The browser will take on the most recent definition for a selector of the same level of specificity and weight.
- p { color: #000; }
- p { color: #333; }
Define the font-family in the body tag, but not the line-height
Always code in a standards-compliant browser first, then fix the IE bugs

Proper naming and crawling techniques

Syntax
- ul#mainnav li#idname {} vs. #mainnav ul li {}
  a.classname {} vs. .classname a {}
  body#sectionlabel #container #content p {}
Descendant selectors
- Get specific: ul li em
- Crawl because some browsers won't read correctly
- Leverage crawling when you can't get at the HTML (CWS)
Use multiple class selectors in the same element
- <h2 class="bios staff">
- or, <h2 class="bios faculty">

Put nav at bottom of document

Use "skip to nav"
- <div class="skip"><a href="#mainnav" title="Skip over content to navigation">Skip to main site navigation</a></div>
Or, put nav at top and use a "skip to content"

Ids vs. classes

id: <div id="content">; #content in CSS; used only one time; can be accessed with anchors; great javascript hook

class: <div class="navigation">; .navigation in CSS; used many times

Blocks vs. Inline elements

Block: h1, h2, h3, div, p, img, blockquote, ul, ol, table; Can have margins applied; Can contain inline elements; Can be turned into inline with diplay:inline;

Inline: a, span, em, q, abbr; Can't have margins applied; Cannot contain block level elements; Can be turned into block with diplay:block;

Floats vs. Positioning

ul { float: left; }
#content { float: right; }

Floated elements are automatically promoted as block-level
Floats are more platform agnostic than positioning

http://complexspiral.com/publications/containing-floats/

Tips & Tricks

Multiple background images

Use divs as containers for background images
Put a background image on the HTML tag (in addition to the body tag)
- html { background-image: url(mini_chilli.jpg); background-repeat: repeat-y; background-position: 2px 2px; background-attachment: fixed; }
- body { background-image: url(peppers_bg.jpg); background-repeat: no-repeat; background-position: 80px 60px; background-attachment: fixed; }

Crop images with CSS

Crop sample A

Crop sample B

Turn text into an image

This is actually an image

p.imageexample { margin: 0; height: 0px !important; line-height: 105px; overflow: hidden; background: transparent url(pix/sunset-horiz.jpg) left top no-repeat; width: 480px; padding: 105px 0 0 0; height /**/:105px; /* For IE 5 browsers */ }
p.imageexample a { display: block; width: 500px; height: 105px; text-indent: -1000em; border: none; text-decoration: none; }

Container div

<div id="container">
#container { position: relative; }
Use for centering
- margin-left: auto;
- margin-right: auto;

Horizontal Navigation

Use a UL (unordered list)
ul#mainnav li { display: inline; }
Also need float: left; in li a

http://www.moronicbajebus.com/playground/cssplay/hormenu/

Image mouseovers as one image

Move background position on a:hover
Use CSS image cropping to only show portions of nav image needed
Benefit: image loads one time - no delay when mousing over
Avoid flickering in IE by putting entire image in UL as background

Leveraging media types

Supported media types
- screen, print (mostly used)
- aural, braille, embossed, handheld, projection, tty, tv, all

Hide nav using display: none; when media="print"
Show URLs for links (Example)
Don't forget media="screen" on regular CSS import

Fluid box with rounded corners

Use nested divs
- <div class="sidebox"> <div class="boxhead"><h3>Example</h3></div> <div class="boxbody"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna volutpat.</p> </div> </div>

Use alternate stylesheets

Change the default font size
- <link rel="alternate stylesheet" type="text/css" href="/css/large.css" title="Large Text" />
Put this in a tag:
onclick="setActiveStyleSheet('Large Text'); return false;"

Layer Switching

Use javascript and visibility: hidden; in your CSS
Use position: absolute; to avoid weird spacing issues with visibility: hidden;

Background image rotation

Using PHP

<style type="text/css" media="screen"> @import url(css/shared.css); @import url(css/home.css); body { background-image: url(inc/rotator.php); } </style>

Working with browser bugs

Box model problem

Description: IE puts the padding inside the box
Solution: The Tan Hack (modified simplified box model hack)

http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html

Doubled margin bug

Description: When floating (left or right) a containing element and adding a margin (left or right) IE doubles the margin.
Solution: Add a display: inline; on the element

http://www.positioniseverything.net/explorer/doubled-margin.html

Flash of Unstyled Content (FOUC)

Description: Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content.
Solution: link a stylesheet, usually print.css
- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

Thank You

http://www.imagegroup.com/resources/