From CSS Discuss
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
- IE8 - The community is currently testing IE8 for CSS support and problems.
- IE7 - The community was testing IE7 for CSS support and problems.
- Css Editors - for CSS and HTML/XHTML
Specifics, the nitty-gritty of writing good stylesheets.
- Css Friendly Cms - Content Management Systems that can be customised using CSS
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 - 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
- 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
- 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
- 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
- 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?
- Css Hack - the details of using browser bugs to hide CSS or serve specific styles to specific browsers
- Avoiding Hacks - how to write CSS that works in any browser
- To Hack Or Not To Hack - discussion of merits of hacking CSS
- 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
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.
- 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 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
- 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?
- Linked Images
- Link Element - contains interesting styling tricks
- 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
- Unwanted Gaps In Tables - get rid of extra whitespace in table cells
- Nicer Tables
- Collapsing Border
- Styling Columns
- Styling Table Captions
- 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
- 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
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
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
Talking about talking, or how does this wiki thing work?
- Editing Tips - learn how to edit and use this wiki
- Css Wiki Bugs - bugs found & fixed in this wiki so far; need more browser testing
- Wiki Interface Suggestions - suggest improvements to the structure of this wiki
- Category Category - a list of categories to organize page contents for easy location
Would you like to contribute to this wiki, but don't know where to start? Have a look at the following pages for ideas on what people would like, but haven't had the time to create
- Answer Needed - sometimes the specifics or the most correct answer is unknown to the author.
- Wanted Pages - pages which have been linked to but do not exist
- Wiki Suggestions - ideas for content development what should we write about next