Browser-Specific selectors
These selectors are very useful when you want to change a style in one browser but
not the others.
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
Safari
html[xmlns*=""] body:last-child {}
To use these selectors, place the code in front of the style. E.g.:
#content-box {
width: 300px;
height: 150px;
}
* html #content-box
{
width: 250px;
}
/* overrides the above style and changes the width to 250px in IE 6 and below */
Applying a width to inline elements
If you apply a width to an inline element it will only work in IE6.
All HTML elements are either a block or an inline element. Inline elements include
<span>, <a>, <strong> and <em>. Block elements include <div>,
<p>, <h1>, <form> and <li>.
You can’t change the width of an inline element. A way around this is to change
the element from inline to block.
span
{
width: 150px;
display: block
}
Image replacement technique
It is always best to use text rather than an image for headings. On the odd occasion
when you must have an image it is best to use a background image with hidden text
within a div. This is extremely useful for screen readers and SEO as it is still
using regular text, with all the benefits associated with this.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1
{
background: url(heading-image.gif) no-repeat;
}
h1 span
{
position:absolute; text-indent: -5000px;
}
As you can see we are using regular HTML code for the h1 tag and using CSS to replace
the text with an image. Text-indent pushes the text 5000px’s to the left, making
it invisible to the user.
Try turning off your CSS style on your website and see how the heading looks.
Min-width
Another bug in IE is that it doesn’t support min-width. Min-width is extremely useful,
especially for flexible templates that have a width of 100%, as it tells the browser
to stop contracting.
For all browsers apart from IE6 all you need is min-width:Xpx;. e.g.:
.container
{
min-width:300px;
}
Getting this to work in IE6 takes some extra effort! To start you will need to create
2 divs, one embedded in the other.
<div class=”container”>
<div class=”holder”>Content</div>
</div>
Then you will need the min-width which goes on the outer div.
.container
{
min-width:300px;
}
Now this is where the IE hack comes into play. You will need to include the following
code.
* html .container
{
border-right: 300px solid #FFF;
}
* html .holder
{
display: inline-block;
position: relative;
margin-right: -300px;
}
As the browser window is resized the outer div width reduces to suit until it shrinks
to the border width, at which point it will not shrink any further. The holder div
follows suit and also stops shrinking. The outer div border width becomes the minimum
width of the inner div.
Vertically aligning with CSS
Vertically aligning with tables was a doddle. To make cell content line up in the
middle of a cell you would use vertical-align: middle. This doesn't really work
with a CSS layout. Say you have a navigation menu item whose height is assigned
2em and you insert this vertical align command into the CSS rule. It basically won't
make a difference and the text will be pushed to the top of the box.
The solution? Specify the line height to be the same as the height of the box itself
in the CSS. In this instance, the box is 2em high, so we would insert line-height:
2em into the CSS rule and the text now floats in the middle of the box - perfect!