May 29, 2011

via article.wn.com ...»See Ya

at Sunday, May 29, 2011
Email This BlogThis!Share to X Share to Facebook Share to Pinterest

via whatgetsmehot.posterous.com ...»See Ya

at Sunday, May 29, 2011
Email This BlogThis!Share to X Share to Facebook Share to Pinterest

[cl0] A 'p' element with browser-default 'line-height'. Its 'font-size' has been set to 15px, the same as the other tests in this page. This element is included largely for reference purposes, and is not intended to demonstrate a particular aspect of the CSS specification. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

This is the end of the parent element.

[index page] [section] [Previous] [Next] [Specification This is the end of the 'cl3' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl4] This 'div' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[shrink] This text should have a font-size two-thirds that of the parent element, and the separation between baselines should also be two-thirds the parent; in other words, 20 pixels. This happens because the value '2' is inherited as a "scaling factor" that is multiplied by the value of the element's 'font-size' (in this case, 10px * 2). Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[grow] This text should have a font-size half again as large as that of the parent element, and the separation between baselines should also be half again that of the parent; in other words, 45 pixels. This happens because the value '2' is inherited as a "scaling factor" that is multiplied by the value of the element's 'font-size' (in this case, 22.5px * 2). Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

This is the end of the 'cl4' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl5] This 'p' element contains an inline element that is twice the size of the 'p' element's text, but it does not have an increased line-height. Thus, the inline element's content area will overlap other lines in the parent element. The inline element is [huge]. Note that the baselines of both the 'p' and the 'span' are aligned, since that's the default behavior. The overlap can go both upward and downward; that is, preceding and succeeding lines can be overlapped. The height of the line in which the 'span' appears may also be taller than normal due to the inline box of the 'span'.

[cl6] This 'p' element contains an inline element that is twice the size of the 'p' element's text, and which will inherit the scaling factor for its line-height. Thus, the inline element's content area will not overlap other lines in the parent element. The inline element is [huge]. Note that the line in which the inline element appears is increased in height to account for its presence. This does not increase the content area of the line of text, as the silver background demonstrates.

[cl5] This 'p' element contains an inline image that is twice the height of the 'p' element's text. Thus, the images will increase the height of the line in which it appears, and will not overlap content in lines above or below it. The inline element is test image . Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.

[index page] [section] [Previous] [Next] [Specification]

Note: Before beginning, ensure that this link has been visited, and this link has not.

visited

[cl3] You should see hover effects on only the "link": link, visited

[cl4] You should see hover effects on only the "visited": link, visited

[cl5] You should see hover effects on only the "visited": link, visited

[cl6] You should see hover effects on only the "link": link, visited

[cl7] You should see hover effects on only the "link": link, visited

[cl8] You should see hover effects on only the "visited": link, visited

CSS2 Test Suite: 12.1 :before and :after

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; color: maroon; } P.note:before {content: "Note";} P.note {color: purple;}  .fox1:before {content: "The quick brown fox ";} .fox2:after {content: " jumped over the lazy dog.";} .fox3:after {content: " the lazy dog.";}

A plain, unstyled paragraph. Note that, at the bottom of this page, there should be a block-level box containing the words "The End" centered, and colored maroon.

[note] This paragraph should have generated content inserted at its beginning, and the entire element (including the generated content) should be purple.

[fox1] jumped over the lazy dog.

[fox2] The quick brown fox

[fox1 fox3] jumped over

[index page] [section] [Previous] [Next] [Specification]

[cl9] You should see hover effects on only the "visited": link, visited

[cl11] You should see active effects on only the "link": link, visited

[cl12] You should see active effects on only the "link": link, visited

[cl13] You should see active effects on only the "visited": link, visited

[cl14] You should see active effects on only the "visited": link, visited

[cl15] You should see active effects on only the "link": link, visited

[cl16] You should see active effects on only the "link": link, visited

[cl17] You should see active effects on only the "visited": link, visited

[cl18] You should see active effects on only the "visited": link, visited

[index page] [section] [Previous] [Next] [Specification]

heading level5

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

heading level5

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

CSS3 selectors - :empty, :not(s), :target

Only double :: notation used in this test

CSS selectors - ::first-line, ::first-letter

Both single : and double :: notation used in this test

heading level5 - single : notation

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

7. Centre aligning a block element

This tip seems almost precisely correct. The only improvement I might suggest is to use individual properties for 'auto' instead of the 'margin' shorthand. I have a vague recollection of a few browsers having problems (ignoring?) the margin: 0 auto; shorthand, whereas they worked fine with the margin-left:auto; margin-right:auto; longhand equivalent. If someone knows of the specific browser(s) that have this problem, please link to this post and point them out. Thanks.

via tantek.com

7. Centre aligning a block element This tip seems almost precisely correct. The only improvement I might suggest is to use individual properties for 'auto' instead of the 'margin' shorthand. I have a vague recollection of a few browsers having problems (ignoring?) the margin: 0 auto; shorthand, wher ...»See Ya

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Code used

#t1 :first-letter {color: green; font-size: 300%; font-weight:bold; background:transparent} #t1 :first-line {background: lime; color:#fff;} #t2 ::first-letter {color: #ccc; font-size: 300%; font-weight:bold; background:#c00} #t2 ::first-line {background: lime; color:#fff;}

Notes

Opera (up to version 8.5) doesn't apply the :first-line pseudo-element when the mime-type of the document is application/xhtml+xml; hence, a test-case served as html 4.01 text/html.
IE 5 Win doesn't apply the rules; IE 5.5 and IE 6 Win appear to understand the single and double column (:) notation. It is not clear if this by design or another twisted logic by this browser. I guess it simply ignores the first column when the double column notation is used. IE 5.x and 6: there are lots of inheritance problems with both selectors, particularly when used in combination with other selectors, see pseudo-CSS for some of them.
Opera 7.54, 8, 8.5 are buggy with the :first-line pseudo-element. There are some strange inheritance effects. Opera 9 performs better, but appears the fictional box as a block-level element. All versions of Opera have problems with combined selectors (in E ::first-line, element is ignored or treated as universal selector.
Most browsers tested, except Safari and Gecko are wrong in painting the background for the :first-line pseudo-element: they expand the height of the anonymous box representing the first-line to include the height of the line-box created by the first-letter box.

back to introduction

CSS selectors - :first-child, :last-child, :only-child

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

CSS selectors - :first-of-type, :last-of-type, :only-of-type

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

heading level5

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

heading level5

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

heading level5

CSS selectors - combinators: , > , + , ~

heading level5

Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Dogmeat

4000000 Served

← Back to Dogmeat

i got trashed and had sex with The high school football team Google Alert

Posted

by Limbs Andthings

[cl0] A 'p' element with browser-default 'line-height'. Its 'font-size' has been set to 15px, the same as the other tests in this page. This element is included largely for reference purposes, and is not intended to demonstrate a particular aspect of the CSS specification. Extra text has been added ...»See Ya

at Sunday, May 29, 2011
Email This BlogThis!Share to X Share to Facebook Share to Pinterest

center align genesis

[cl1] This 'p' element should have a normal line-height, because negative values are not permitted for 'line-height'. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl1] This 'p' element should have a background that completely fills its content-area. This background is a small green grid image that has been repeatedly "tiled" throughout the background area of the element.

[cl2] This 'p' element should have a transparent background that completely fills its content-area; this will allow the background of any ancestor elements that encompass it to "shine through."

[cl1] This 'p' element contains a 'span' that has been given a class of 'cl2'. The transparent background of [cl2]the inline 'span' should allow the 'p' element's green-grid background to "shine through."

[parent] This 'div' element is the parent of another 'div' that is used to test inheritance. The parent has a background pattern of a crosshair image.

[inh1] This 'div' element should have the same crosshair-tiled background as its parent, as it has a style attribute set to inherit the background-image value. If the background is red, the 'inherit' test has been failed. If the crosshair pattern does not re-start itself in the top left corner of this child 'div', then the test has also been failed; by inheriting the image, this 'div' has a pattern independent of its parent.

This is the end of the parent element.

[index page] [section] [Previous] [Next] [Specification]

[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, although the distance between actual character glyphs cannot be predicted. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, and a separation of 15 pixels between the silver-backed areas. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl3] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl4] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl3] This 'div' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[shrink] This text should have a font-size two-thirds that of the parent element, but the separation between baselines in this element should still be 30 pixels, as the value '200%' on the parent element causes a computed value to be inherited. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[grow] This text should have a font-size half again as large as that of the parent element, but the separation between baselines in this element should still be 30 pixels, as the value '200%' on the parent element causes a computed value to be inherited. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

This is the end of the 'cl3' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

This is the end of the 'cl4' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

. Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.

[index page] [section] [Previous] [Next] [Specification]

Note: Before beginning, ensure that this link has been visited, and this link has not.

[cl1] You should see hover effects on both these links: link, visited

[cl2] You should see hover effects on only the "link": link, visited

[cl3] You should see hover effects on only the "link": link, visited

[cl4] You should see hover effects on only the "visited": link, visited

[cl5] You should see hover effects on only the "visited": link, visited

[cl6] You should see hover effects on only the "link": link, visited

[cl7] You should see hover effects on only the "link": link, visited

[cl8] You should see hover effects on only the "visited": link, visited

CSS2 Test Suite: 12.1 :before and :after

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

BODY:after {
content: "The End";
display: block; margin-top: 2em;
text-align: center; color: maroon;
}
P.note:before {content: "Note";}
P.note {color: purple;}

.fox1:before {content: "The quick brown fox ";}
.fox2:after {content: " jumped over the lazy dog.";}
.fox3:after {content: " the lazy dog.";}

A plain, unstyled paragraph. Note that, at the bottom of this page, there should be a block-level box containing the words "The End" centered, and colored maroon.

[note] This paragraph should have generated content inserted at its beginning, and the entire element (including the generated content) should be purple.

[fox1] jumped over the lazy dog.

[fox2] The quick brown fox

[fox1 fox3] jumped over

[index page] [section] [Previous] [Next] [Specification]

[cl9] You should see hover effects on only the "visited": link, visited

[cl10] You should see active effects on both these links: link, visited