Preparing your CSS for Internet Explorer 7

Later on this year Microsoft will officially release Internet Explorer 7. If you can’t wait until then, you can download a beta version and see how it works. Microsoft has hinted that when IE7 is officially released they’ll be looking to quickly upgrade users from IE6, so it’s essential that your website is prepared for this new browser.

You can also grab a screenshot of your website on Internet Explorer 7 using a service such as Browsercam. Although this will only provide you with static screenshots, it’ll save you having to download IE7 and will mean you can keep using IE6 on your computer.

When looking at your website in Internet Explorer 7, you may notice a few things look different or even that the layout is totally broken. This will almost certainly be due to a number of changes that have been made in IE7 from its predecessor, IE6.

Internet Explorer 7 will understand the child selector

Historically, one of the easiest ways of hiding CSS rules from Internet Explorer is to use the child selector. To date, Internet Explorer hasn’t understood the child selector so will totally ignore any CSS rule that uses it. Internet Explorer 7 will however understand the child selector.

The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

If you wanted to send a different width value to IE than to other browsers, you could have used the following:


#foo {width: 400px;}
html>body #foo {width: 300px;}

Historically, the first CSS rule would have been just for IE and the second for every other browser. Now, the first CSS rule is for IE6 and previous versions and the second for IE7 and non-IE browsers.

Internet Explorer 7 won’t understand the star html hack

The star html hack worked in the opposite way to the child selector, in that any CSS commands that use this hack are only seen by Internet Explorer. So, to send commands only to Internet Explorer (including IE on the Mac), you can use:


* html #foo {width: 400px;}

The * essentially means a wildcard (i.e. it refers to any and every element). The above rule will apply to any element assigned id="foo" that’s nested within the <html> tag (which of course it will be), which is itself nested inside any other HTML element.

Huh? Surely the <html> tag can’t be nested inside another tag!? Well, no of course not… but Internet Explorer 6 and before disagree and will actually obey the above command. Internet Explorer 7 will however (correctly) ignore the above command, along with all other non-IE browsers.

XML prolog won’t force quirks mode

There are currently two ways of declaring the ISO value in HTML files. One of them is to place the XML prolog on to the very top line of each HTML file, directly before the doctype declaration. Declaring it this way means that the first three lines of each HTML file might look like this:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(The first line is the XML prolog; the second and third lines are the doctype declaration.)

By not having the doctype declaration on line 1, Internet Explorer 6 reverts to quirks mode (despite the fact that the above HTML code is perfectly valid). Internet Explorer 7 however will not revert to quirks mode, and will instead render the web page in standards mode. (You may wish to read more about quirks and strict modes, if you haven’t heard of these terms before.)

There are a number of differences between quirks and strict mode, so if your site uses the XML prolog then you may see quite a contrast in how it looks on IE6 (quirks mode) and IE7 (strict mode). One of the main differences between the two modes is that the box model is incorrectly calculated in quirks mode (in quirks mode, the padding and border are placed inside the content area, thereby reducing the amount of space available for the text).

Filtering / hacking to Internet Explorer 7

Your website may end up looking very different (or even illegible) on Internet Explorer 7 compared with other versions of IE and also non-IE browsers. On top of this, the two hacks traditionally used to hide from or show exclusively to IE (child selector and star html hack) won’t work anymore! What to do!?

Microsoft are suggesting that to filter CSS commands from/to Internet Explorer 7 you use conditional comments. You’ll need to create a CSS file for any Internet Explorer 7-only commands and then use conditional comments to send this CSS file only to this browser. To do this, you’ll place the following code into the header of each HTML file, after the command calling up the main CSS file:


<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

The only commands you need to place into this extra CSS file are those which will override commands in the main CSS file. You don’t need to duplicate commands across the two CSS files as IE7 will also read through the main CSS file. Do also note that conditional comments can only be placed inside HTML files and not CSS files.

CSS Improvements on Internet Explorer 7

The good news is that Microsoft has made a number of CSS bug fixes to Internet Explorer 7, so much of the weird behaviour in Internet Explorer should cease.

Internet Explorer 7 will also have increased support for more CSS commands and rules, most notably that :hover will work on all elements (currently it only works on links in Internet Explorer). This means that you can make CSS dropdown navigation menus in Internet Explorer 7 without any JavaScript. Non-IE browsers have supported the use of :hover on all elements for a long time.

Conclusion

Internet Explorer 7 will be officially released very soon and there will almost certainly be a quick upgrade to this version. Once the browser has been officially released expect the number of site visitors using IE7 to increase very quickly. Make sure your website is ready.

This article was written by Trenton Moss. He’s crazy about web usability and accessibility – so crazy that he went and started his own usability and accessibility consultancy (Webcredible) to help make the Internet a better place for everyone. He knows a lot aboutaccessible web design and likes to conduct a website review as often as he can.

CSS Tips

Check out some tips and tricks for CSS and style sheets.

Link Color

Want to make some of your links a different color? Try adding a color style to your link.

<A href="file.html" style="color: green" > click here </A> 

Mouseover Link Color

Want to make your links change a different color? Try using the hover declaration.

<style>
A:hover {color:green}
</style>

<A href="file.html" > click here </A>

No Underline Link

Want to remove the underline from your links? Try adding a color style to your link.

<A href=”file.html” style=”text-decoration: none” > click here </A>


Change the font inside a table

So you made a table but you would like to change the style of font used in your columns. Instead of inserting font tags inside each of the cells change your font with CSS.

<style>
TD.red {color:red }
TD.Arial {font-family:Arial }
</style>
</head>

<table>
<tr><td class="red">
This is some text
</td></tr>
<tr><td class="Arial">
This is some text
</td></tr>

</table>

Special Headline

Want to make a special headline for your page? Try using positioning to place text over text.

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=yellow>

<DIV style="position: absolute;
top: 15px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:red">CHICKEN</DIV>

<DIV style="position: absolute;
top: 35px;
left: 110px;
width: 300px;
color:blue;
height: 20px;
font-style:italic;
font-family:Arial;
font-size: 45pt ">
Super</DIV>

</BODY>
</HTML>

Drop Shadow

Want to make a Text drop shadow but you don’t want to use a large gif or jpeg image. Use absolute positioning to make a duplicate block of text. Then offset the first text block and use a dark gray color for the text.

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=yellow>


<DIV style="position: absolute;
top: 15px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:808080">CHICKEN</DIV>

<DIV style="position: absolute;
top: 10px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:red">CHICKEN</DIV>

</BODY>
</HTML>

Drop Caps

Want to make the first letter in your paragraph a drop cap? Try floating that character in a span element.

<HTML>
<HEAD>
<style>
.dropcap {
width: 1em;
height: 1em;
float: left;
text-align: center;
font-size: 20pt;
color:red;
font-style:italic
}

</style>
</HEAD>
<BODY bgcolor=ddddaa>

<TABLE><TR><TD width="200">
<p><SPAN class="dropcap" >
T</span>his is a dropcap
text text text text text text text text
text text text text text text text text
text text text text text text </p>
</TD></TR></TABLE>
</BODY>
</HTML>

CSS Text

Text Formatting

Where Font attributes apply to the character level Text Formatting applies to how the characters are manipulated to makeup words and how words are used to make sentences.


Indenting

The text-indent property will allow you to indent the first line of a block of text.

Values include: length, percentage

 P { text-indent: 3em }

Text Alignment

Defines how a block of text will be aligned within a containing element.

Values include: left, right, center, justify

P { alignment: center }

Decoration

This property can be applied to text to add additional decorative features.

Values include: none, underline, overline, line-through, blink
Note: Blink does not work with IE and Overline does not work with NS4.

You can also use this declaration to override the default settings of the users agent. The following example will allow you to create links that are not underlined.

Also see Pseudo Class Elements.

<style>
A:link, A:visited, A:active { text-decoration: none }
</style>

<a href="file.html">Click Here</a>

Text shadows

Allows you to define a shadow effect to your text. Note: This Text Formatting feature does not work in IE4 or NS4.

<style>
P { text-shadow: black }
</style>

<P>This is some text</P>

Word Spacing

Word Spacing allows you to define the amount of space between words. Note: This Text Formatting feature does not work in IE4 or NS4.

Values include: normal, length, auto

  H1 { word-spacing: 1em }

Letter Spacing

Letter Spacing allows you to define the amount of space between letters in each word. Note: This Text Formatting feature does not work in NS4.

Values include: normal, length, auto

<style>
P { letter-spacing: 0.1cm }
</style>

<P>This is some text</P>

Text Transform Case

Case allows you to change how a block of text will appear. This is an easy way to override the formatting of a block of text that has already been typed and placed in the document.

Values include: capitalize, uppercase, lowercase, none

The values of this property have the following meanings:
capitalize: first character of each word is uppercase
uppercase: all characters are uppercase
lowercase: all characters are lowercase
none: element ignores parent element value

<style>
P { text-transform: uppercase }
</style>

<P>This is some text</P>

White Space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words. Note: This Text Formatting feature does not work in IE4 and has only partial support in NS4.

Values include: normal, pre, nowrap

In the example below the H1 element has been given the white-space value of pre or preformatted text. This means that additional spaces between words will be preserved as if the block was preformatted text.

<HTML>
<HEAD>
<STYLE type="text/css">
H1 { white-space: pre }
</STYLE>
<BODY>

<H1>This is some text </H1>

</BODY>
</HTML>

CSS Tables

Caution should be used when defining selectors that alter the proportions and layout of your tables. If selectors are used to set widths or row and column spanning there is the possibility that your documents could become unreadable by User Agents that can not correctly parse the selectors.

Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid.


The <TABLE> element being on the bottom defines:
the overall width and height of the table and how the cells of the table will be separated with margins.

The <ROW> element is then used to separate the table into a number of horizontal rows but can not contain the actual page content.

Finally the top layer the <TD> element is used to define columns that are placed inside the rows to hold the actual information to be displayed.

Table Headers <TH> are also used to provide comment lines between the row / column contents. They can not contain column elements and are considered row elements.

The <CAPTION> element can be used to contain a description of the table. Although the code is placed inside the <TABLE> element it is displayed outside the boundaries of the table border.

Because all of these elements are containers many formatting Declaration Values can be applied to them to define: width, color, border,… and styles can be inherited by their child elements to define: text color, size, and family and so on.

An example would be:

<HTML>
 <HEAD>
<style>
 TABLE {background:00C9FF }
 CAPTION {background:blue; color:yellow; font-size:20pt;
 caption-side:bottom }
 TR.whitetext {color:FFFFFF ; font-size:18pt}
 TD.redtext {border: thick solid red; color:red;
 font-size:24pt}
 TD.ltgreenbackground {background:lightgreen}
 #width30 {width=30} 
 TD.image {background: url(chicken.jpg) fixed;
 vertical-align:bottom }

</style>

</head>
<body>  

<table border=0>
<th colspan=3>This is the header</th>
<tr class="whitetext"> 
<td>This is the first row first column </td>
<td class="ltgreenbackground" width=30> 
<font color="green">second row second col</font>
</td> <td>Row 1 Col3</td> </tr>
<tr> 
<td ID="width30" class="redtext">
This text should be red 
</td> 
<td bgcolor="yellow">Row2 col2 
</td> <td class="image"> 
<font size="2">can you see the chicken?</font> </td> </tr>
<caption bgcolor="green">This is a caption</caption>
</table>

</BODY>
</HTML>

The following images are representations of how this table is displayed in Internet Explorer and Netscape. You can see that the tables are dramatically different. However IE4 offers the best representation of the table when styles are used for element declarations. In the table you should notice that when Selectors are applied to parent elements like the <TR> they are inherited by their child elements the <TD> tag. You can override the style selectors locally by applying formatting values to the child elements.

This is important to remember and as suggested care should be taken to check compatibility across browsers.

Yes it is an ugly table but that’s not the point. Take a look at the differences between what endusers will see and what you may see if you develop with only one browser in mind.


This is the table in Internet Explorer



This is the table in Netscape


With this in mind here are the declarations that may be used for your
table elements.


column-span


Sets the number of columns that a will be spanned by a column that is above two or more columns.

row-span


Sets the number rows a cell will span.

width


Sets the width of the table cell

border


The border Declaration can be used for shorthand to define the color, style, width of your border.

Example you define a border of a cell with the following selector:
TD.red {border: red thick}
The cell will be red and thick.

You can also use the following declarations to define these properties individually.

border-width


Sets the width of the border of the Cell.

border-color


Sets the color of the border.

border-style


Sets the type of line used for the border.

Values that can be used in IE include:
blank, double, solid, ridge, groove, none

The following values are not implemented in IE:
dashed, dotted

vertical-align


When you align contents in the sell you are shifting the baseline of the cells contents. The first Line of text or the bottom of the first image is used to set the baseline of a Table Cell. If the Cell is empty the bottom of the cell is considered the baseline.

<Style>
TD {vertical-align:bottom}
</Style>

Alignment


Used to align text horizontally within a cell

caption-side


Used to position Table Captions

speak-header-cell


Used to tell Text to Speech Synthesizers how they should interpret and read the table.

CSS Selectors

Selectors

A Selector is the definition of a formatting Style that can be applied to a HTML Element. The Selector has three basic parts:
Element {Declaration: Value}

The Declaration and Value are surrounded by {} braces and the Declaration is separated from the value by a colon : and a space.

The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font:
< font color=orange >

Where Font is the Element, Color is the Declaration and Orange is the Value of the Declaration.


Type Selectors

Type selectors are used set the definition of a certain type of element. If you wanted to assign a property to all of the <H1> elements in your document you would use the following.

<style>
H1 {color: 000fff}
</style>

The syntax is:
Element {declaration: value }


Multiple Declarations

If you would like to define more than property for your Element you can use a semicolon ; to separate Declarations.

<style>
H1 {color: 000fff ;
    font-weight: bold; 
    font-size: 12pt
}
</style>

The syntax is:
Element {declaration: value ; declaration: value}


Grouping Elements

If you would like to apply the same properties to different elements you can use a coma , between the elements and use the same Declarations and Values.

<style>
H1, TD, P {color: 000fff } 
</style>

The syntax is:
Element, Element, Element {declaration: value }


Parent Child Elements

Contextual elements can be combined to for a selector that will be applied only if a certain element pattern is used in the HTML.
(Only works in IE4)

If you wanted all Italic characters to be Blue but only if they were contained inside a H1 headline.
You could define the selector like this:

<style>
B ~ I {color: 000fff } 
</style>

The syntax is:
ParentElement ~ ChildElement {declaration: value}

The following text would be bold but the Italic (e) would be rendered both Italic and Blue. However Italic text that is not contained inside a Parent B Element will be rendered just plain Italic and not blue.

<B>T<i>e</i>xt</B>

Sequential Selectors

When you want to define a selector that would be applied only if one element directly follows another element you can use the following format.
(Only works in IE4)

<style>
/P ~ I/ {color: 000fff } 
</style>

The syntax is:
/FirstElement ~ SecondElement/ {declaration: value}

And would be applied as follows:

<P>Chickens</P>
<I>happy chickens</I>

ID Elements

If you would like to define a declaration and value that you can apply to elements in your document but you do not want to apply this declarationto all tags of one type you can use an ID element and then apply that ID to your tags as you wish.

<style>
#abc123 {color: 000fff } 
</style>

<P id=abc123> text </p>

The syntax is:
ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

If you would like to set up optional declarations for a single element you can apply an ID to an element. This will allow you to use varying styles within the same element.

<style>
H1 #abc123 {color: 000fff } 
</style>

<H1 id=abc123> text </H1>

The syntax is:
Element ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>


Class Elements

Class Elements are defined in a similar method to ID Elements. They can be applied various to HTML elements in a per element method or they can define a subset class of an element.

<style>
.chicken {color: 000fff } 
</style>

<H1 class="chicken"> text </H1>

The syntax is:
.class {declaration: value }

The HTML Tag referenced:
<tag class=”classname”>


Pseudo-Classes

The ability to change the properties of a element based on the state of the element can be accomplished by using a Pseudo Class Element.

The Anchor < A > element can have different rendering properties applied to it based upon the current state.

The possible variations include:
link – unvisited links
visited – visited links
hover – user hovers
active – active links

<style>
A:hover {color: orange } 
</style>

<A href="file.html> click here </A>

The syntax is:
element:pseudo_class {declaration: value }

CSS Lists

Lists

CSS Selectors can provide the Author extended control over how their Lists are formatted. Properties can be applied to the markers that appear before the list items to provide order to the information. In addition to the regular list styles that are available in HTML the author can also define their own marker item by using animage. Other proposed CSS declaration values would control how the list item markers are applied and indented in relation to the line items.

The possible values have the following meanings:
disc: A disc (exact presentation is UA-dependent)
circle: A circle (exact presentation is UA-dependent)
square: A square (exact presentation is UA-dependent)
decimal: Decimal numbers, beginning with 0.
lower-roman: Lower case roman numerals (i, ii, iii, iv, v, etc.)
upper-roman: Upper case roman numerals (I, II, III, IV, V, etc.)
lower-alpha: Lower case ascii letters (a, b, c, … z)
upper-alpha: Upper case ascii letters (A, B, C, … Z)
none: No marker

<STYLE>
  OL { list-style-type: lower-roman }   
</STYLE>

<BODY>

<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>

</BODY>

list-style-image

When you would like to us an image to represent the bullet of your list items you can use the URL value you can also define a list-style-type to be used if the enduser has disabled the loading of images.
(Works only with IE4)

The following example sets the marker at the beginning of each list item to be the image “icon.jpg”.

<style>
  UL { list-style-image: url(https://www.server.com/icon.jpg) }
</style>

list-style-position

CSS2 has also defined a selector declaration that would allow you to position the List marker either away from the Line Item or it could have the value compact that would make the Marker move to the position of the first character in the Line Item.
(This is not implemented in either IE4 or NS4)

Possible values include: inside, outside

<style>
  UL { list-style-position:inside }
</style>
Pages: