Main Page

From CSS Discuss

Jump to: navigation, search

Welcome to the CSS-Discuss Wiki

This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets).

Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.

CSS-discuss Mailing List

Please read these before posting to the CssDiscussList!

Posting Guidelines - before you click send

When the list is misbehaving, notify css-d-(nospam)owner@lists.(killspammers)css-discuss.org. Please use cautiously and modify as needed for use by removing the parenthetical bits in that address.

Css Discuss List Headers - why replies go to the wrong address
Gmail And Css Discuss - advice for Gmail users
Search Css Discuss List - tips for finding past threads in the css-discuss archive
Off Topic - where to discuss topics other than CSS, and related topics

If you're looking for info about general web or Javascript mailing lists, you can find some in the OffTopic section.

Internet Explorer

IE8 - The community is currently testing IE8 for CSS support and problems.
IE7 - The community was testing IE7 for CSS support and problems.

Editing

Css Editors - for CSS and HTML/XHTML

CSS References

Specifics, the nitty-gritty of writing good stylesheets.

Css Friendly Cms - Content Management Systems that can be customised using CSS

CSS Concepts

Css Inheritance

Efficient use and organization of CSS

Maintainable Css
Classes Vs Ids - when should I use CLASS and when should I use ID?
Standardized Style Names - are there agreed on or frequently used class= and id= identifiers in CMS/Blog/Wiki software or page templates - a question and survey
Progressive Enhancement using CSS - exploiting the advanced CSS support of modern browsers
Media Stylesheets - how to write stylesheets for various media, including print

Box Model

Box Model - understanding the CSS Box Model
Box Model Hack - how to fix IE's broken box model
Element Width - what width really means, and why it is what it is
Collapsing Margin - if you have a mysterious gap in your layout that is solved by applying padding or border, you've probably run into collapsed margins
Css Positioning - Differences between positioning methods
Overlapping And ZIndex - How browsers paint content on top of each other

CSS working group pages: - Ian Hickson

CSS Layouts

Fixed Layouts - using position: fixed to lay out pages
Absolute Layouts - using position: absolute to lay out pages
Float Layouts - using the float property to lay out pages

Float-less Layout

Emulating Frames - using CSS to recreate the effect of frames
Two Column Layouts
Three Column Layouts - a collection of three column layouts
Footer Info - positioning page footers with CSS
Any Column Longest - how to make all columns appear the same height
Border Slants - using borders to create the illusion of non-rectangular shapes and layouts
Side Scrolling Narrow Column Layout - newspaper-like layout for more readable text
Multi Column Layout With Footer And Javascript - make a footer appear at the end of a multi-column page using Java Script.
Fluid Design - Elastic, Flexible, Fluid and Liquid designs

Working with dimensions

Min Width - different work-arounds/hacks to simulate min-width in IE.
Em Vs Percent Widths - Characteristics of ems and % for setting container widths
Hundred Percent Height - How to create divs that fill the entire browser window

Color and Backgrounds, color-mistakes

Switching

Rendering Mode - how DocType causes browsers to use QuirksMode and StrictMode??? and what some of the differences are
Style Switching - how do you let users choose different style sheets?
Browser Detection - how do you serve different style sheets to different browsers?

Hacks

Css Hack - the details of using browser bugs to hide CSS or serve specific styles to specific browsers
Script Hacks - JavaScript and other programs for solving CSS problems
Avoiding Hacks - how to write CSS that works in any browser
To Hack Or Not To Hack - discussion of merits of hacking CSS

Sizing Text

Font Size - how do I size fonts? is one of the most commonly asked questions about CSS
Force Font Size - many authors attempt to force a given font size with pixels. There are are some problems with this of which we should be aware
Line Height - related to font-size, this sets the (minimum) height of a line
Using Font Size - this is a summary of the Using pages
Using Pixels - more details on sizing by pixels
Using Points - use point sizing for printed pages only, there are better units for computer monitors
Using Ems - more details on sizing by EMs (needs more content here)
Using Percentages - trying to get a gradual scale across multiple browsers here's a sample css style sheet
Using Keywords - xx-small, x-small, small, medium, large, x-large, xx-large

Sizing Images

Using Percent - don't wait for SVG; flexible and robust
Using Em - resize on text zoom

Tips & Tricks

Css Design Patterns
Css Constants - how to deal with their absence from the language
Multiple Classes - use multiple classes for even more power
Css Images - how to add background images via your style sheet.
Browser Add Ons - things you can add to your browser to aid testing.

Float

Align Left And Right - aligning one item left and the other right
Clearing Space - clearing space beneath floated elements
Float Thumbnails - a table of thumbnails that use up all available horizontal space
Emulating Fixed Positioning - emulate fixed positioning using absolute positioning, to support IE for Windows.

Centering objects

Centering Block Element - how to center or shrink wrap a block element
Centering An Image - how to center any image inside a fixed-dimension container
Centering Text Vertically - how to center text vertically in a block
Horizontal Line styles - how to specify your own styles for a horizontal line [hr]
Pre Element styles
Display Inline

Other

Css Bar Graphs - A couple of examples of CSS used to draw bargraphs
Drop Shadows
Rounded Corners
Dot Leaders
Drop Caps
Image Replacement - put text in the source (for screenreaders, copy/paste, because we should but images on top so that designers are happy with the fonts used in headings
Constants In CSS - How to set constant values throughout a CSS document
Styling Blockquotes
External Objects - how do I embed Flash or Quicktime and still validate?
Style In Email - HTML email and using style
Wiki Css - CSS markup and general support in WikiEngines?

Styling links

Linked Images
Css Rollovers - simulate JavaScript rollovers using only CSS
Link Element - contains interesting styling tricks

Styling lists

Missing Bullet Points and the whole indent problem (or bullets super-imposed to left floating image/element).
List Menus - building menus with lists and CSS
NNFour List Menus - how to create a list menu with consistent indenting and no bullets
List Tabs - how to imitate tabs with lists and CSS
List Tricks - general and tricks for styling lists
Multiple Column Lists - how to create a single list that displays in multiple columns

Styling tables

Unwanted Gaps In Tables - get rid of extra whitespace in table cells
Nicer Tables
Collapsing Border
Styling Columns
Styling Table Captions

Styling forms

Form Elements

Bugs

Browser Bugs - list of bugs and errors by browser
Which Browsers - deciding which browsers to use for development and testing
Browser Add Ons - things you can add to your browser to aid testing.
Browser Stats - a quick guide to figuring out which browsers to support
Browser Testing - gaining access to multiple browsers
Code Validation - why validate and what the results mean
Diagnostic Css - using CSS as a testing/diagnostic tool
Testing With Javascript - guide to using JavaScript bookmarklets to test your CSS
Mystery Bug - how to quickly and efficiently isolate that unknown whatever, and spare the wallboard.
Site Check Please - place a request for your site to given a once over by the list denizens

Learning

Bookmarks, tutorials, reference material and CSS-related events.

Why Css - why we are all here
Useful Resources - bookmarks, bookmarks, and favorites too
Good Books - recommended books on CSS
Show Case - of sites that use CSS to good effect
Design Inspiration - galleries to help you find other sites that use CSS to good effect
Css Glossary - alphabetical reference of terms and CssProperties??
Designer Developer Blogs - follow the discussions of people who design and develop
Events Worldwide - Workshops, seminars and conferences around the world containing the topic of CSS

Debatable

Opinions abound while consensus is elusive

To Hack Or Not To Hack - is it okay to exploit browser bugs?
Tables Vs Divs
Tables Vs Lists
Presentation Vs Content
Semantic Vs Presentational
Css Vs Xcss