CSS tests and experiments

Floats
Containers, Margins, Overflow, …
Centering, Shrink wrapping, Images
Miscellaneous, hacks, inline-block
Popups
Layouts, Tables, …
Internet Explorer Windows, 1
Internet Explorer Windows, 2
IE Windows (position: relative, absolute)
IE Windows (floats)
Few CSS, web and friends links

This browser:

The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS. I would love to hear any comments that you may have, especially if you find errors. Thanks.

This page with a different style.

Floats

Floats Containment
Which Floats are cleared by a Clear
Floats and margin-top on Clears
Vertical position of Floats in the middle of text
Clearing floats without extra space
Tables beside Floats
Floats and Clears 2
Two columns dl
100% wide Floats
Float models
New block formatting contexts next to floats
Floats and position:relative stacking
Displacing of inline boxes by “vertically moved” floats
Clearance computation

Containers, Margins, Overflow, …

Collapsing Margins
Empty div and collapsing
Containers, min-width, …
Overflow
overflow-x, overflow-y
Overflowing boxes, margins & direction
Not Floats
Small boxes, lines
Background extension and Border
Box with negative margin protruding from parent
Float with negative margin protruding from container
Percentage widths
Percentage margins
Opera problems with non integer values of margins, paddings, borders, widths
Background attachment and scrolling
Right and bottom paddings and margins inside scrolling boxes
Absolutely positioned elements inside inline-level relative ones
Fixed versus Absolute positioning
Position of a 'collapsed through' element

Centering, Shrink wrapping, Images

Thumbnail Image Gallery (inline-block)
Thumbnail Image Gallery (inline-block, -moz-inline-box)
Thumbnail Image Gallery 2
Thumbnail Image Gallery 3
Shrink wrapping boxes
Shrink wrap 2
Shrink wrap and center
Vertical centering of a box with unknown height
use of r.p. and percentage top, left to center a block of unknown dimensions
bottom/middle vertical align
color profiles in images
gamma in png images
Hover effect on Border of Img
An image in a box (Strict/Transitional)
Vertical align of images and line-height
Shrink wrap and center image and caption
Centering (horizontally and vertically) an image in a box
Centering (horizontally and vertically) in viewport
Position of background images on inline-level elements

Miscellaneous, hacks, inline-block

Specificity
display: inline-block
display: inline-table
display: inline-block, inline-table, -moz-inline-box
Minimal set of css hacks
Browsers separation
some “advanced” CSS selectors
inline, boxes, fonts
fonts, aspect value, font-size-adjust
normal line-height and aspect values table
fonts, baseline, line-height
baselines, fonts, sizes
fables
word-wrap: break-word
text-justify
monospace default font-size
opacity, rgba colors, semi-transparent backgrounds
media (screen, print)
input button width
onload
simple clip test
line-height measurement units and inheritance
line-height on block elements
some space characters
some unicode characters
form tests
half leading
line-height approximation
xhtml mime type
xml mime type
xml mime type (no html doctype)
xml mime type 2
IE8, Opera 10, min-height:100%, vertical resize problem
Opera 10 vertical resize problem
Play with nth-child

Popups

Pure CSS Popups
Pure CSS Popups (auto position)
Pure CSS Popups 1
CSS Popups, hover tests
Javascript Popups 1
Javascript Popups 2
Pure CSS Popups 3
Pure CSS Popups 4
Pure CSS Popups 5
Pure CSS Popups 6 (menus)

Internet Explorer Windows, 1

Some CSS bugs in IE8
IE6-: Block links and hasLayout
IE6-: clickable area of block links
IE7-: hasLayout triggers
IE7-: Margin collapsing and hasLayout
IE7-: Nested Elements Margin
IE7-: Nested Elements Margin, Padding
IE7-: Hover and jumping bottom margins
IE6-: Block anchors, hover and jumping bottom margins
IE6: Moving Elements with percentage Padding
IE7-: inline-block and hasLayout
IE6-: Creeping text
IE6-7: Lists, hasLayout and disappearing list markers
IE7-: Lists (ul, ol) and hasLayout
IE7-: Extra vertical space in Lists
IE7-: Background, Border, hasLayout
IE7-: shrink-wrapping and hasLayout children
IE7-: stacking and hasLayout
IE7 quirks != IE6 quirks
IE8 compatibility mode != IE7
IE6-, Overflow, box expansion
line-height, font-size, inline elements
IE: Not clickable link when absolutely positioned over content
IE: percentage width/height interpretation in quirks mode

Internet Explorer Windows, 2

IE conditional comments
IE6: Flicker of background images on links, with cache ‘check every visit’
IE6-7: Line-height problem with images
IE7-: Line-height and sup, sub
IE5.5-: no padding on images
Italics creating overflow in IE7-
Italics test
IE7: unnecessary horizontal scrollbar caused by italics
IE7: stacking problems caused by italics
IE7: problems caused by centered italic text in a shrink-to-fit container
IE7- problems with pseudo-elements
IE7: first-letter problem
IE7-: letter-spacing, word-spacing, hasLayout
IE6-: cropping of text with negative text-indent, hasLayout
IE7-: cropping of text protruding out of boxes
IE6-: min-width
IE: problem with the scaling enabled by UseHR=1 and DPI>96
!important
IE7-: inherit not working
IE7-: instability of 1px dotted/dashed borders
Child selector
IE7 problems with the page zoom functionality
IE7-: em borders and browser text size
IE7-: em font size and text resizing
IE7-: em background-position and font-size on body
IE7-: vertical-align middle image sometimes 1px too low

IE Windows (position: relative, absolute)

IE6-: absolute inside relative positioning
IE7-: absolute positioning 2 (hasLayout, …)
IE6-: absolute positioning 3 (containing block)
Overflow & position:relative
IE7-: cropping of elements with negative margins, hasLayout, position:relative
IE7-: hasLayout, line-height, position:relative
IE7-: Lost margin top for a box following an absolutely positioned one
IE6-: position:relative and scrollbars
IE7-: disappearing position:absolute box next to a float
Stretching position:absolute boxes
IE7-: z-index:auto problems
IE7-: top:auto for an absolutely positioned span in a box with specified line-height
IE7-: percentage left/right for relatively positioned box refers to the parent padding box width
IE6: 1px error in right, bottom a.p. when parent dimension is odd
IE6: 1px error in percentage left a.p. when the reference value is odd

IE Windows (floats)

IE7-: Float, hasLayout, relative
IE6-: Double Margin with Float
IE7-: extra space between a float and a clear, 1
IE7-: extra space between a float and a clear, 2
IE7-: extra space between a float and a clear, 3
IE7-: problems with a sequence of floats in a container with padding
IE7-: Double top padding on a clear
IE6: Floats, comments and echo
IE6: Floats and echo 2
IE7-: Floats, clears, comments, echo, disappearing absolutely positioned box
IE7-: Float drop
IE7-: Float drop (solution with negative margin-right wrapper)
IE7-: Float drop (solution with all floats, negative margins)
IE6-: Floats, Backgrounds and incorrect stacking
IE7-: Float+Clear on same element 1
IE7-: Float+Clear on same element 2
IE6-: Float, Margin, Indentation problems
IE7-: Float and Container Margin problems
IE6: Moving float with % margins
IE6-7: peek-a-boo (disappearing content)
IE7: Float taller than fixed height containers
IE6-: Float in relatively positioned box