�CSS tests and experiments�
Cascading
Style
Sheets
Una cordiale caghetta ai tanti
inventori ed esattori di tasse
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.
If the right part of the daisy background of this page looks strange, with unnatural colors, then that's nice, you are using a browser which understands ICC profiles embedded in images.
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
- �Layouts, Tables,�…�
- 3 columns layout (fixed widths)
- 3 columns layout (central fluid)
- 3 columns layout (fixed widths)
- 3 columns layout (central fluid)
- 3 columns layout (percentage widths)
- 2 columns layout (fixed widths)
- 2 columns layout (fixed widths)
- 2 columns layout (right fluid)
- various 3 columns layouts
- various 3 columns layouts with faux columns
- html, body, backgrounds
- height 100% of viewport
- fixed header and footer
- fixed header and footer, scrolling iframe
- footer at end of page or end of content
- Table Cells and Box Model (Standards/Quirks)
- 100% height in table cells (Standards/Quirks)
- display: table
- Horizontal Navigation Bars, 1
- Horizontal Navigation Bars, 2
- Horizontal Navigation Bars, 3
Popups
� - �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
- �Links�
This page with a different style.
This browser: