SXSW 2006: CSS Problem Solving § The Adventures of Cindy Li

SXSW 2006: CSS Problem Solving

March 12 , 2006

Origins of this panel<

CSS problem solving survey: http://tinyurl.com/jpgd7h

Results of survey... level of html expertise:

60% see themselves as experts
36% see themselves at medium level

Level of CSS Expertise

36% see themselves as expersts
50% see themselves at medium level

Results of survey

Types of common CSS problems

1. Browser compatability
2. Page layouts and/or columns
3. Tied

(darn slide changed)

Overall impression/plan of attack

We did get some problems about unusual/not commonly known aspects of CSS.
However, as they get involved in web production of their sites, they seem to stumble on some basic problems.

Questions from the audience....

Schmitz: Tiffany brown Ethan Marcotte www.vertua.com Charles Wyke-Smith chasmedia.blogspot.com Dave Shea brightcreative.com

Understanding CSS and methods for hack management

Follow along at www.tiffanybbrown.com/sxsw06

Audience

This presentation is aimed at beginning and intermediate CSS developers:

who are wondering why their CSS isn�t working as intended.
want some tips on how to make their CSS more efficient.
want an overview of hack management strategies.

(Gurus-in-training can take a 10-minute nap. Just don�t snore.)

Three concepts of CSS

Once you understand these, it makes developing and troubleshooting code much easier.

Inheritance
Specificity
Cascade

Inheritance

Contained elements take on the properties of their container (parent and child elements).

Not all properties are inherited by default
Possible to ensure inheritance by using the inherit value

3 concepts of CSS

Once you understand these, it makes developing and troubleshooting code much easier Inheritance Contained elements take on the properties of their container

Specificity

Styles carry more weight depending on the granularity of their selector.

The cascade

Rules that govern how styles are applied and how style conflicts are resolved (These rules apply to author styles.)

1. Inline styles declared with the style attribute
2. Embedded styles declared using <style type="text/css">
3. External styles called using the link element or @import rule
4. Specificity or granularity of selectors (the #graf2 example)
5. Order in which the styles are declared

How can we use these styles to make better hats?

The inverted pyramid

Managing your hacks.css file

Two ways of organizign hacks within this file Store all hacks in the same file and COMMENT.COMMENT.COMMENT

Dynamiclly managing CSS: Dynamic serverside detection

Brown: Float like a butterfly The question: Trying to move toward absolute positioning versus floats for layout. I am trying to figure out if [you] have to always use a height on the awrapper div.

Absolute positioning

It's all about the x and y (axes, that is) web2.ofolksonmyajaxr

The normal document flow

There is no real positioning attached. W/abolute positioning you can assign placement. Over to the left by putting 60pixels down so from this you can start builiding straight forward layouts.

A new positioning contest!

< d i v class ="photo "> <p> Here's a caption. Yay.

Dan Cedarhone: 3 column layout

Wrapper div then setting up the position w/abolute in context The right and left are absolute position so we have three columns. There are instances where the columns are shorter

Shaun Inman to clear the elements....

Who loves floats? You do. Floats will mess with you. It didn't click until you had a frame of reference. Eric Myer wrote about containing floats

Remember

Use floats to occupy as much area for the container. They will adjust for the width of the container... like water :)

Okay, great. Kitty pictures. So? Flaots can provide us with a more flexible layout model Clearing allows the components of our Marrying floats and positioning Each link has to hover .. ui

Note: sorry he's going too fast for me today too much code on the screen

Put an itag and make it a block level

http://mezzoblue.com/presentations/2006/sxsw Marcottie: http://mezzoblue.com/presentations/2006/sxsw/charles/

Technical difficulties

header nav secondary and footer name your div's as what it is in a meaningful way within each div

Meanwhile at Cluetrain...

Kevin Lawver sends me He recommends me getting: Cluetrain.com/book Floats are really popular and here is a slight diff approach. Div content and floated all three of them. Made a graphic to let the wrapper div and let it repeat to move down the page so there is a left alighn of the div.. so the graphic element is there. With negative margins that pushes the right off the screen. then the negative column it sucks it back in for the center column So then you get something fluid in the middle Shea: Recently IE has been using css.. did it get mozilla code all of a sudden? http://mezzoblue.com/presentations/2006/sxsw/css/ It would be swell to have a cross browser way to display background images at the end of an inline link. Use an image element and see the source we've got actualy image element it may or not be practical. If you can find a css way of doing it. Indicating something like a pdf icon. image may not be the way to go but it works cross browser.

CSS property i.e. doesn't explore....

Triggers slightly rendering in ie for the inline element. pretty much works but the long url or text it doesn't wrap. Find the right compromise. I felt like I was cheating I just googled... look at the problem and just find the symptom and find the answer.. or my own answer from 2 years ago. :)

Question 2:

I can't get anything to center vertically in a div, regardless of whether or not height is set.This is a long-standing deficiency of CSS itself.

The Problem
Ideal Fix: CSS Tables (it fails in IE), we have the same problem.. sigh....
Actual fix: Tables + Positioning + Hacks
Minor Hack: line-height
Major headache: Line control

So back to square one

There's a bit of a hack-ish way of doing it that involves positioning, and you need a few container divs to do it. Basically you offset one div 50% from the top, then you bump its child back up using relative positioning and a value of -50%. There are a bunch of hacks needed to make it co-exist in both IE and other browsers, but if you're desperate and you can stomach the idea of a few CSS hacks, there's one solution.

One final possibility is using the line-height property

If you set the value to an equivalent of the height of the containing element, you can effectively position the element right in the vertical middle of it. Watch out for wrapping lines of text though, you can really only pull this off with images or small snippets of text.

Vertical align with CSS - A few different potential fixes
Potential Google Keywords: vertical centering css

Question #3

Sometimes Firefox has this bug where an element has a top margin of 1em, even if its margin is set to 0. What gives?

Answer

Double the margin or padding, the paragraph is spilling outside of the gray box

Margin collapsing gives

Problem #1 - Not enough margin
Fix: Double the margin, or rely on exceptions. (Float in this case)
Problem #2 - Unwanted margin
Fix: 1px padding

Just google the question and you should be able to find the answer

What do you use?

Testmate
Stylemaster

Commenting is not available in this section entry.

The Adventures of Cindy Li