www.YoYoBrain.

com - Accelerators for Memory and Learning

Questions for Advanced CSS Information

Category: General - (22 questions) CSS: When using multiple style sheets, how do you indicate which stylesheet should be the preferred style sheet. CSS: When using <link> tags for stylesheets, what is the effect of not using title attribute How can you select all items within a given <div id="mydiv" > tag with CSS selector What is the order that CSS rules for link styles should be put in stylesheet What is the star HTML hack for CSS selectors Any <link> tag with both a title and rel="stylesheet" will be considered the preferred style sheetex: <link title="Main Stylesheet" rel="stylesheet" type="text/css"> they are classified as persistant and always used as the display of the document #mydiv * { /* rules */ } :link, :visited, :hover, and :active mnemonic is LoVe/HAte (got from Pro CSS Techniques by Croft, Lloyd, and Rubin) in IE version prior to 7, IE would recognize a html element that no other browser recognizes so you can make a rule that only 6 sees * html ......... if there is any declaration that adds to the width, such as, a border of 1 pixel, then the right most element will drop below the line IE 7 2 main declaration background-image: xxxxx; text-indent: -5000px; the text indent moves the text off the page but is still there for people using a reader use the cite attribute <blockquote cite="http:somewhere.com/page">Great quote</blockquote> used to apply visual effects to an element, such as visual blending or alpha transparency only supported by IE at this time border-style: inset; border-style: outset

What is the problem with using floats across the page with width that add to 100% What version of IE adds support for max- / min-width / height What is the Phark method for replacing text with image in a way that preserves accessability

How do you cite the source in a <blockquote> HTML element

What is the CSS3 property - filter:

CSS syntax to create a beveled (button) edge on a border

3 types of CSS stylesheet links and how to specify

persistent - rel="stylesheet" and no title set preferred - rel="stylesheet title="mytitle" alternate - rel="alternate" title="alternate1" <table style="empty-cells:hide;"> <table style="empty-cells:show;"> on the table elementborder-collapse: separate; on the table elementborder-collapse: collapse; style="border-collapse: collapse;" border-spacing: 10px; border-collapse: separate; border-spacing: 10px 5px;first value is horizontalsecond value is vertical table-layout: fixed table-layout: auto;this is the default

CSS: how to make table cell not draw if it is empty CSS: how to draw a table's empty cells CSS: when drawing a table how to keep each cells border drawn separately CSS: how to merge the borders of adjacent table cells CSS: what setting override cellspacing on table<table cellspacing="10"> CSS: what is CSS property that replaces table cellspacing="10" attribute CSS: what property must be set for border-spacing in table to have an effect CSS: to have separate values for vertical / horizontal spacing between table cells CSS: how to make the table stay to certain size even if content won't fit CSS: how to allow table to grow bigger than set width if content won't fit Category: IE 6 issues - (17 questions) How can you similute a CSS child selector that IE 6 can use: Suppose you want to boldface any h1 element that's a child of a div, but no others.

div h1 {font-weight: bold;} div * h1 {font-weight: normal;} This throws a selector for all h1 then reverses for any further below by using universal in second rule. Technique comes from Eric Meyer's blog. use the conditional comment syntax to embed it: <!--[if lte IE 6]> <link rel="stylesheet" ..... <![endif]--> it include's padding, border and margin in the width calculation compliant browsers calculate the width as just the content

How can you insert a stylesheet that only IE 6 or earlier will see

What is the problem with IE 6's implementation of the box model

What is the behavior of IE 6 with png files How can you switch IE 6 into a more CSS compliant mode What is the IE 6 issue with the :hover CSS pseudo-class What is the IE 6 issue with CSS property position What is the IE double float margin bug

it can only display binary transparent backgrounds not alpha channel transparency by using DOCTYPE that is strict it can only be defined for anchor elements it does not support fixed and will set the position to static instead when a left float item is in a container box and the margin-left property is set, IE doubles the margin over stated value add adisplay: inline;property which will be ignored by compliant browsers it treats them like width statement IE 6 applies 3 pixels to any inline element next to a float, even if those elements are contained by a block level element if relative element does not have a height assigned the absolute positioned element is positioned with respect to page and not containing element if there is any whitespace between <li> items in an unordered list - IE 6 will render the whitespace instead of ignoring like other browsers use the AlphaImageLoader Filterfilter:progid:DXImageTransform.Microso ft.AlphaImageLoader(src='......png'); expression( ..) width: expression(document.body.clientWidth - 50); If a class name is a substring of another classname IE Mac can get confused <select><object> you can fix this by setting display: none

CSS: How do you fix the double-margin float bug in IE 6 What happens on IE 6 when max-width and min-width CSS properties are used What is the 3 pixel jog bug in IE 6?

What is the bug in IE6 with absolute positioning of an element contained by a relative positioned element CSS: What is the list whitespace bug in IE6

CSS: How can you get IE 6 to use PNG with alpha transparency What is the IE CSS extension that allows you to calculate a value for a CSS declaration dynamically? CSS: IE Mac bug that involves class names? What DOM elements ignore z-index properties in IE6 (showing up over elements that are supposed to float on top) Category: hasLayout - (4 questions)

CSS: What is the hasLayout property and how does it affect rendering

it is an IE only property that affects how the browser treats an object. Some tags have it by default, and others only gain it if a height or width is applied to object like a div tagCan cause IE to treat a tag very differently than CSS standards width or height - any value other than auto float: left | right display: inline-block position: absolute overflow: hidden | scroll | auto overflow-x |-y: hidden | scroll | auto position: fixed min-width | max-width | min-height | max-height : any value other than none height and width set hasLayout=true only in quirks mode

What properties can be set that trigger hasLayout = true for IE 6 up

What new CSS properties triggers hasLayout=true in IE 7 that didn't in IE 6

What is issue with inline-replaced elements and hasLayout=true for IE 6 Category: Typography - (14 questions) CSS: How many weights does the OpenType font file format provide for? How does CSS provide for you to map the 9 possible font weights in OpenType to style specification. What happens if the OpenType font selected has fewer than 9 weights and user specifies using numbers 100 to 900? What is the typical font size that a browser specifies as the default CSS: When setting font size using the absolute-size keywords (medium, small, x-small, etc.) how does browser scale the font. Why is it recommended to not use pixels when setting font size

up to 9 weights Can use the numbers 100, 200, 300, 400, 500, 600, 700, 800, 900 There are a complex set of rules that map the available weights onto the numbers starting with 400, moving down then up. 16 pixels it varies among browsersCSS 1, specified 1.5 scaling going up and .66 factor scaling downCSS 2 changed to a vague "between 1.0 and 1.2" IE does not allow user to adjust font-size when specified by pixels in page/stylesheet. So people with reading difficuties are stuck.

If you want to set the baseline font size to 10 body { font-size: 62.5%; }since most pixels (which makes using em scaling easier) browsers use 16 pixels as default, this scales what is the Richard Rutter 62.5 hack? it down to 10 CSS way of capitalizing first letter of each word Definition for typographic term: measure text-transform: capitalize; the length of a single line of text

CSS: what units should be used when specify the width of paragraphs and other text blocks What is rule of thumb for optimal paragraph width CSS: How would you create a rule that imitates the general typographical style not indenting the opening paragraph but then indenting the ones that follow; What is browser support for content generation in CSS using content: declaration What is sIFR?

em - which is proportional to the font size of text in the paragraph between 45-75 characters wide which equals between 30 and 50 ems p { text-indent: 0; } /* this rule removes indent */p + p { text-indent: 1.5em; } /* this rule puts it back for any paragraph following another paragraph */ IE does not support including IE 7

Scalable Inman Replacement - way of placing rich typography into a web page using JavaScript and Flash

Category: Tables - (4 questions) CSS: What html attribute can be used in tables to provide more information on individual cells for screen readers for people with disabilities Html attribute that associates a td or th element to a particular header Where should the tfoot table element appear in a table CSS: What attribute should be used in a table to describe the table - useful for non-visual readers Category: Forms - (1 questions) CSS: What are 2 ways to associated label elements with a form control 1. wrap around form element <label>Phone:<input type="text" id="phone" /> </label>2. use for attribute <label for="phone" > Phone number: <input type="text" id="phone" /> abbr attribute

scope attribute this is mainly useful in complex / nested tables at the top with thead - the browser will display the tfoot properly at the bottom summary - goes in the table element

Category: Print & Media Styles - (3 questions) What is the support for this import syntax to use stylesheet for another media type: <style type="text/css"> @import url("print_stylesheet.css") print </style> IE 6 and earlier doesn't recognize this

How do you add media/print specifications to CSS declarations in stylesheet What is good first step when building a print layout stylesheet Category: Layout - (7 questions) CSS: How do you center a div within the container CSS technique for getting a span to recognize the width property What is the effect of a negative margin on top/left of a static element (no float) CSS: What is the effect of applying negative margin to static elements (no float) on right or bottom Rails: What is the effect of apply a negative margin to both right and left of a static element (no float) What is the effect of applying a negative margin to a floated element next to another floated element CSS: When using negative margins with older browsers: what can fix the following problems:Making links unclickableText becomes difficult to select

put @media or @print in front @print p { color: blue; } resetting all layout mechanisms that involve screen such as position absolute, padding, and margins

use automarginsmargin: 0 auto; float to right or left which then makes it a display: block and width is picked up the element is moved in the direction of negative margin - up or to the left pulls any succeeding elements over to the left or up on top of the element the element is stretched in both directions if it doesn't have a width it decreases the size of the element causing the second element to overlap the first add:position: relative