Sticky Thread Revision March 2010 - Read before posting - CSS FAQ - Tips etc...

[Paul O'B]

The previous "Sticky threads" are being amalgamated into this Ultimate Sticky thread. You will find links below to all previous "Sticky Threads" below: (This is a work in progress)

Sticky Threads:
CSS Test Your Skills - Archived Quizzes
CSS for Mobile sites
CSS display:table - Pros and Cons for layouts

-- Frequently Asked Questions From Sitepoint Forum Members --

1. FAQ :How can I have sets of different coloured links?
2. FAQ :What is a CSS reset?
   
3. FAQ :How can I have 3 equal Columns
4. FAQ :How do you put a footer at the bottom of the window? (Sticky Footer)
5. FAQ :How to centre an existing page horizontally?
6. FAQ :Why doesn't vertical-align work properly?
7. FAQ :What size text should I use in my css?
8. FAQ :How do I get rid of the default margins around the page?
9. FAQ :How is 100% height achieved?
10. FAQ :How to centre horizontally and vertically?
11. FAQ :Where do I put my styles:
12. FAQ :Quick Tips (links and positioning explained)
13. FAQ :Everything you wanted to know about floats but were afraid to ask
    1. The margin on a float is bigger in IE than in other browsers.
    2. The famous Three pixel jog
    3. 50% float + 50% float = 101% !
    4. What is float drop
    5. What is clear used for
    6. Clearing all floats!
14. FAQ :1px dotted borders in IE
15. FAQ :How can I avoid the ugly Flash Of Unstyled Content (FOUC)?
16. FAQ :What is "haslayout"
17. FAQ :How can min-width be achieved in IE ?
18. FAQ :Can I have my content first in the html in a 3 column layout:
19. FAQ :Why does my page content sometimes overlap other elements on first visit?
20. FAQ :How do I get min-height for all modern browsers?
21. FAQ :10 best practices when Using CSS.
22. FAQ:The 1px background image jog in IE
23. FAQ:How to place text at the bottom of a column/element
24. FAQ :Why doesn't this work in ie5 / broken box model?

[Paul O'B]

FAQ :How can I have sets of different coloured links?

There are a number of different ways but first lets recap on how to set all link colours on your page first.

You use the link pseudo classes (classes for intangible characteristics you can't mark manually) and colour the links in the correct order as below.

<style type="text/css" media="screen">
a:link {
color: #0000FF;
background-color: #00FFFF;
}
a:visited {
color: #990000;
background-color: #33FFFF;
}
a:hover {
color: #FF0000;
background-color: #00FFFF;
}
a:active {
color: #990000;
background-color: #00FFFF;
}
</style>

Note: Always specify link states in the order; :link, :visited, :hover and :active otherwise specificity issues may arise as documented by Eric Meyer.

The above code will automatically colour all your links and there is no need to set up a class or id around the links.

Now if you have a set of links that you want a different colour you can add a class to them to effect specific changes. Therefore the links that are within the class that you define will behave differently to the links on the rest of the page.

e.g.

<style type="text/css" media="screen"> 
a.leftlink:link { 
color: #00FF33; 
background-color: #FFFFFF; 
} 
a.leftlink:visited { 
color: #990000; 
background-color: #FFFFFF; 
}
a.leftlink:hover {
color: #FF0000;
background-color: #FFFFFF;
}
a.leftlink:active {
color: #990000;
background-color: #FFFFFF;
}
</style>

This means that all < a> tags that have a class of leftlink will be affected by these rules.

and then in the body of the page ...

<div> 
<p><a class="leftlink" href="#">Hello</a></p> 
<p><a class="leftlink" href="#">Goodbye</a></p> 
<p><a class="leftlink" href="#">Hi</a></p> 
</div>

You must set the class in each <a> anchor for this to take effect. However there is a more efficient way to code the above example and that relies on using the class on the parent element and not on the <a> element itself. Also the format is slightly different as follows.

e.g.

<style type="text/css" media="screen"> 
.rightlink a:link { 
color: #0000FF; 
background-color: #FFFccc; 
} 
.rightlink a:visited { 
color: #990000; 
background-color: #FFFccc; 
} 
.rightlink a:hover {
color: #FF0000;
background-color: #FFFccc;
}
.rightlink a:active {
color: #990000;
background-color: #FFFccc;
}
</style>

and then in the body...

<div class="rightlink"> 
<p><a href="#">Hello</a></p> 
<p><a href="#">Goodbye</a></p> 
<p><a href="#">Hi</a></p> 
</div>

This means that any <a> elements found in the rightlink class will take on the above rules. <a> elements outside the rightlink class will not be affected.

The point being that in the second version there is a lot less code especially if there are a lot of links as you can just set the class on the parent. You just have to make sure that all anchors (<a elements>) are inside the block that has a class of rightlink.

In the first version the class has to be put in every anchor tag, which makes the page heavier and requires more coding if you have a lot of links.

We can actually reduce the css further in the last example because the background color is the same for all states which means we can set them all using "a {background:#fffccc}" and save a number of lines of code as follows:

.rightlink a {
    color: #00f;
    background-color: #fffccc;
}
.rightlink a:visited {color:#900}
.rightlink a:hover {color:#F00}
.rightlink a:active {color:#900}

We only need to define the changes in the relevant states.

Note that IE6 has a bug and applies more weight than it should to the pseudo classes above and you may find that the browser default :visited color will be applied to your visited links if you haven't explicitly defined them.

[Paul O'B]

FAQ : How do you put a sticky footer at the bottom of the window?

A "sticky footer" as it is now commonly called is a footer that sits at the bottom of the viewport (window) only when there is not enough content to push it below the fold.

For example if your page has just a few details on it the footer would still sit at the bottom of the window and not be at the bottom of the content where it might look strange on very short pages.

However when there is plenty of content the footer gets pushed below the fold and sits at the bottom of the content (unlike a fixed footer which always sits at the bottom of the viewport no matter what).

How is it accomplished

The first thing we need is 100% height to base our initial element on and this must be declared in the html element and the body element to satisfy various browsers (also see the faq on 100% height as there are important issues to understand here).

While we’re at it we will set padding and margins to zero so for html and body so they don’t influence our design because 100% + padding and margins is always going to be too big.

e.g.

html, body{height:100%;} 
html,body {margin:0;padding:0}

The next important step is to create a whole page wrapper that will hold everything else on the page except for the footer. This element will be set to min-height:100% so that it takes up the full height of the window (because it can base it's height on the 100% high body element). The min-height of 100% not only ensures that there is an initial 100% height but will also allow the element to grow larger as required.

Unfortunately IE6 and lower versions don't understand min-height but luckily they treat "height" almost exactly the same as if it was min-height and will still let the element grow as required.

We need to supply this height rule to only ie6 and under because it would confuse other browsers if they saw it.

Therefore we will use the star selector hack (* html) for passing values to only <= IE6 browsers. (IE7 does not support the star selector hack and doesn't need it in this situation anyway.)

Code so far:

html, body {
    height:100%;
}
html, body {
    margin:0;
    padding:0
}
#outer {
    min-height:100%;
}
* html #outer {/* ie6 and under only*/
    height:100%;
}

VERY IMPORTANT:

Don't be tempted to use the following as it breaks in IE7 .

#outer{
height:auto!important;
height:100%;
min-height:100%;
}

(A lot of well known sites use the above code but it breaks in IE7 where the footer sticks in the wrong place if the window is resized. Never use it as it is an ugly and unnecessary hack anyway. Don't use the absolute positioned footer method either as that breaks in dynamic environments.)

So far we have created an element that is 100% high but the footer will be sitting below the fold of the page. Therefore we need to drag the footer back into view with a negative margin. This means that we must have a set height for our footer which is the main drawback of the technique but as there are no other options you will just have to live with that.

The footer can be dragged into view in a number of ways:

1) You could apply a negative bottom margin to the outer and that would let the footer slide into view assuming the negative margin matches the height of the footer.

2) You could apply a negative top margin to the footer itself to drag it over the wrapper element and into view.

3) Lastly you could drag the wrapper element upwards with a negative top margin so that it disappears into the top of the monitor and allows the footer to rise into position.

All three method work and it depends on the situation as to which is the best. In all three methods though you are left with one remaining problem and that is that you need to ensure that the overlap caused by the negative margin doesn't hide your content.

If for example you used a negative top margin on the footer the footer would be sitting on top of whatever content was in the page wrapper. To cure any overlap you could place an element of fixed height as the last element inside the wrapper. This element would be the same height as the footer which itself is the same dimension as the negative margin used.

Or you could simply add some padding-bottom to the last element in the wrapper to create a buffer to protect the footer. Again the amount of padding used would equal the height of the footer.

These three things must be constant. The height of the footer, the height of the buffer and the amount of the negative margin

The method I prefer to act as a buffer is to drag the wrapper element upwards and then use a top border on the first element in the page (which is usually the header). The border width would be equal to the height of the footer and cause the page content to start neatly at the top and not above the monitor. I find this the cleanest method.

The above is the basic technique but unfortunately IE8 and Opera need a helping hand and in fact the version shown below is the only version in the world today working in IE8 and Opera.

Here is the actual code to satisfy IE8 and Opera. (See the CSS quiz where we discuss all the methods in detail so I will not duplicate them here.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
* html #outer {
    height:100%
}
#header {
    background:red;
    border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin of #outer */
    clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
    padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
    <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
    <p>test</p>
    <p style="clear:both">Element with clear:both added just for testing - this can be removed</p>
    <p>test</p>
    <p>test</p>
</div>
<div id="footer">
    <p>Footer</p>
</div>
</body>
</html>

You can use ems for the footers and negative margins to allow for expansion of text when resized but remember that em measurements are based on the parent's font-size so these must all match up correctly and of course will be subject to rounding errors.

One last thing - always remember to use a valid doctype and ensure you use valid code.

[Paul O'B]

FAQ :How to centre an existing page horizontally?

If you have absolutely positioned elements in your page already then they will need to be placed relative to the parent container. What this simply means is that the surrounding div should be position:relative. You do not need to supply any co-ordinates so it will not affect your page layout.

The usual way to centre is to use margin-left:auto and margin-right:auto on the div. However , you will also need to supply a width for the surrounding div otherwise it will not centre, so you will need to supply a width large enough to hold your content including borders and padding etc. You will also need the text-align:center hack for ie5.

e.g.

body {
text-align: center;/* ie5.x center hack */
margin: 0px;
padding: 0px;
min-width:775px;
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
text-align: left;/* reset text to left*/
}

And then after the body tag :

<div class="central"> 
all the rest of your page.....
</div>

The hack for ie5 (text-align:center) in the body tag which saves a div. You will then need to set the central class to text-align:left to counteract the effects of the previous hack.

That’s all you need.

If you want to center elements that don't have a specified width on themselves or their container the you can use a little known technique involving relative positioning.

We require 2 containers for this and the outer container is placed using position:relative at left:50%.

The inner container is then moved with relative positioning and moved left:-50%. You may think this would put it back where it started but in fact it leaves the element perfectly centred.

If you want borders around the parent then we can use a float as the parent and we then end up with a centred float which was previously thought impossible.

Older browsers will not like this technique but modern ones are fine with it.

Here's a few examples of it in action.

http://www.pmob.co.uk/temp/centre-no-width5.htm

Enjoy

[Paul O'B]

FAQ :Why doesn't vertical-align work properly?

The first thing to realise is that vertical align does not vertically align divs (it was never meant to). Vertical-align determines the alignment of text within a single line of text or within a table cell. In a table cell the middle of the element will align with the middle of the cell.

When used in a line of text vertical-align will position the text with respect to other text (or images) on the same line.

This inline layout model is quite complicated but this is the basics of it: For each piece of text an inline box is generated, using the content area (box defined by font-size for each piece of text) and the half leading ((font size -line height)/2) to arrive at it's final height. These boxes will always be centred vertically with respect to each other within the line unless another value is applied to vertical-align (taken from Eric Meyer’s book Cascading style sheets 2.0 Programmers Reference).

Perhaps an example would be easier to explain it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline layout model</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.test {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.test span {
font-size:12px;
vertical-align:bottom
}
.test em {
font-size:8px;
vertical-align:top
}
-->
</style>
</head>
<body>
<div class="test">
<p>Hello this is some text <span>This is some more text</span><em> and some more</em></p>
</div>
</body>
</html>

Some browsers may not support all the values of vertical-align so testing is necessary but from the above code you can see how inline content is aligned in respect to other inline content on the same line.

[Paul O'B]

FAQ:What size text should I use in my css?

A simple question but not such a simple answer!

The easiest answer would be to say, “do nothing “and let the users default text size be the one that your visitors use. However most designers want some control over their layout so a better method is required.

CSS is very handy when it comes to specifying the size of your text. You can specify it in a number of formats depending on the application you want it for. On the surface font sizing seems quite simple but it is actually quite a complicated topic.

One of the first things to remember though is that ultimately the size of the text should be left up to the visitor to decide as we all have different eyesight requirements. Most modern browsers will allow you to change the size of the text from the main menu.

In IE this would be from the View menu and then select Text and then the options are as follows:

Largest
Larger
Medium
Smaller
Smallest

These sizes are sizes that the visitor can use irrespective of the size that you have set in your mark up.

Well that's the way it should be but unfortunately if you specify your size in pixels IE will not allow the above user menu to work and the text will remain exactly the same size. (Mozilla and other browsers however will size the text as required.)

Here is the list of available font units:

pixels
points
in
cm
mm
Picas
ems
exs
%

and a list of available keywords:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

Which relates similarly (although not exactly) to the sizes that you can specify from the browser in IE.

So what do we use if we want the visitor to be able to specify his or her own size?

We could use keywords as follows:

<style type="text/css" media="screen">
p {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #000;
background-color: #FFF;
}
</style>

Using the style above will allow the user to be able to change the size of text as required by using the browser controls in most (if not all) main browsers.
Using one of the keywords for font-size is fine as long as you realise that
it may vary slightly between browsers. In fact ie5 (and 5.5.) are out by one size and display x-small as small - which means they should be provided with one of the ie5 hacks to pass a different size to them.
e.g.

* html body {font-size:small;f\ont-size:medium}

Using the above code will ensure that IE5 – IE6 all use the same size which will be medium.

The keywords are not precisely defined by the specs so UA's (User Agents (browsers)) may vary but they should have a defined relationship between the keyword sizes. However, according to Eric Meyer (Cascading Style Sheets the definitive guide) this is loosely defined and apparently different fonts may have different scaling factors.

So what else can we use apart from keywords?

Well Points shouldn’t be used either unless the output is to the printer. Points are a fixed size that will not scale and are ideal for printed output. The same goes for in cm and mm as these are sizes that won't scale but are ideal for printing or for fixed size content.

Therefore we are left with % (percentage) and ems. Percentages as explained by the W3C are as follows: "A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets."

An em is the equivalent to the letter M in the parentfont-size and ex's are equivalent to the small letter x of the default font size. Both of these can be used to set size that is relative to the standard. Em and Ex sizes are based on a size defined with the CSS body style.

For instance, in a style as follows

body { font-size: small}.

That means that 1 em is equal to the size "small."

So if a normal size is 1 em or 100% we can set text that is twice the size by specifying 2em or 200%. In this way the size will be relevant to the screen size and font size that is used and therefore should be consistent among compliant browsers.
e.g.
CSS:

<style type="text/css">
body {
font-size: xx-small;
}
p.emsize {
font-size:2em;
}
p.percentsize {
font-size:150%;
}
</style>

html:

<p>
This is the size set in the body of xx-small
</p> 
<p class="emsize">
This text is specified as 2 em e.g. twice the size of its parent
</p>
<p class="percentsize">
This text is specified as 150% of its parent.
</p>

One thing to remember is that nested elements may compound the size when percentages and ems are used. That is to say that if you nest elements that have their font-sizes set as follows then the size is compounded.
e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {font-size:83%}
.test {font-size:120%}
</style>
</head>
<body>
<p>This is the normal size</p>
<p class="test">This should be 120% of the preceeding text</p>
<div class="test"> 
<p class="test"> I wonder what size this will be.... ? its 120% larger again</p>
</div>
</body>
</html>

As long as you are aware of this you then can work around it.

There have been a number of interesting threads in the forum on font-sizing and it would be worth reading though the following links to see all sides of the argument so that you can make a rational decision.

http://www.sitepoint.com/forums/show...hreadid=565469
http://www.sitepoint.com/forums/showthread.php?t=620506

If you want to learn more then there are some useful links here that explain the above in more detail.

http://diveintoaccessibility.org/day...ont_sizes.html
http://www.thenoodleincident.com/tut...ont/index.html
http://www.bigbaer.com/css_tutorials/css_font_size.htm

[Paul O'B]

FAQ : How do I get rid of the default margins around the page?

Most pages have default margins and padding and this varies between browsers. Some browsers will use padding for the default space around the page and some will use the margin property. Therefore both of these properties need to be explicitly set to ensure all pages start on a level playing field.

The body element is the place where most browsers place their margins but some browsers use the html element, which is the root element of the document.

Therefore we can take all this into account and provide for forward and backward compatibility with the following code:

html, body {margin:0;padding:0}

This ensures that your pages will start without any margins at all.

See the thread on "CSS resets" for a more thorough discussion on this topic.

[Paul O'B]

FAQ : How is 100% height achieved?

A lot of people want 100% height but most times they want more than 100% height!
What they usually want is an element such as a navbar that will stretch 100% down the side of the page and keep stretching even when the document is longer than the page.

The easiest way to accomplish this is to use a small bg image for the column colour and repeat it down the y-axis of the body on the left hand side. In this way the column appears to extend forever and is a simple solution that works in nearly all browsers.

body {
padding:0;
margin:0;
background:#ffc0cb  url(leftcolbg.jpg) repeat-y left top;
color: #000000;
}

The above image is 150px wide and 5px high. It is repeated on the left side of the body and will form a column that is as long as the viewport or as long as the document if greater than viewport. A border can be added to the repeated gif to give the illusion of a continuous border. You could also add a screen fade effect for a more interesting column colour.

The background is tiled quite quickly and the image is small enough not to make much difference to page weight.

Another way to achieve 100% height without background images is to use the following techniques. (This doesn’t work for ie5 mac and a few other minor browsers.)

The first thing we need is 100% height to work with and this must be declared in the html element and the body element to satisfy various browsers. While we’re there we will set padding and margins to zero so they don’t influence our design.

We also need to hide this from ie5 mac users so use the commented backslash hack.
e.g.

/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}

The next important step is to create a whole page wrapper that will hold everything else on the page. This outer element is set to 100% height for IE6 and under and min-height:100% for all other browsers although these rules must be separated to protect the good browsers from getting 100% height. IE6 and under treat height as min-height and will always expand an element to fit its content unless overflow is hidden of course.

(The star selector hack (* html) is used for passing values to only <=IE6 browsers.)

#outer{min-height:100%;background:#ffffcc}
* html #outer{height:100%;}/* ie6 and under*/

Here is the code for the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}
#outer{
min-height:100%;
background:#ffffcc;
width:200px;
}
* html #outer{height:100%;}
</style>
</head>
<body>
<div id="outer"> 
<p>content goes here</p>
</div>
</body>
</html>

While the code achieves 100% height and allows for the element to expand it does have some drawbacks.

The container element (#outer) is the only element that will inherit the 100% properly so you have to keep everything inside this element. The element will only expand when content inside it expands it past the bottom of the viewport. A lot of people expect it to expand automatically to the document length or the length of longer elements on the same page. When you think about it this can’t really happen unless all elements are wrapped inside this 100% element.

As mentioned above you can only have one of these elements on your page because inner elements will not inherit from the 100% min-height and default to height auto. (Of course IE6 and under may in some circumstances apply 100% height on inner elements but it is not guaranteed and not advisable because it does not work in other browsers.)

For an example of how you can use 100% height then look at the demo in this thread:
http://www.sitepoint.com/forums/showthread.php?t=143801


All but IE7:
Another way to achieve 100% height is to use display:table for browsers like mozilla or opera instead of min-height:100%. This has the added benefit that mozilla will now inherit 100% into subsequent nestings as long as they are also display:table. This means that multiple 100% images can be used as long as all elements are nested inside each other. (Note that display:table will not work in ie7 (and under) but does work in IE8 so has limited use if you want to support IE7. Ie6 can be fixed by simply using height:100% but this won't work for IE7 i'm afraid - which leaves it out in the cold.)

Opera needs the final nested element into which content is placed to be defined as display:table-cell otherwise it doesn't work.

Heres an example that works in ie5 - 6, Netscape 6.2+, mozilla, firefox and Opera7.5. (However Opera 7.5. suffers with redraw problems on the footer). Newer versions of safari should be ok but other versions won't work. (You will need to use the safari min-height hack from my 3 col examples if necessary).

Just view source from the following link and it should be self explanatory. I have added a footer at the bottom just for example.

http://www.pmob.co.uk/temp/hundredpe...lay-table2.htm

[Paul O'B]

FAQ : How to centre horizontally and vertically?

If you want to centre an image (or element) vertically and horizontally in the page then one way to accomplish this without tables is to use the following CSS.

Edit:


See the method I posted in the following article which shows a much easier way of centering elements of known widths and heights.

The following method will centre an element vertically and horizontally but is not the method I would choose because at small heights and widths the element will vanish through the top of the monitor and off to the left. I have left the code in place for historical purposes but I wuld advice against it's use.

 
<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
img {
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>

In the body of your document add the following html code :

<div ><img src="img.gif" width="60" height="60" /></div>

The first thing to do is declare the body at 100% so that you have something to base your measurement on. This needs to be hidden from ie5 mac so we use the commented backslash hack as above.

The next step is to absolutely position the image at 50% from the left and 50% from the top. This will place the top left hand corner of the image in the centre of the page. Now to get the image completely central apply a negative margin to the left and top, which will be half the width and half the height of the image respectively.

This has the effect of dragging the image/element back into the centre and upwards. If our image is 60px square we drag it left by -30px and up by -30px.

Now our image/element is centred and will stay central when the window is resized. (This will only work when you know in advance what size your image is and obviously will not remain central if you scroll the window vertically.)

The drawback of this method is that if the window is resized very small then the image disappears off the side of the screen. With a small adjustment we can allow for this so that the image doesn’t disappear off the side of the page. We use margin-left:auto and margin-right:auto which will centre an element that has a specified width (either percentage or pixels – it doesn’t matter which). It means we have to wrap the image in an extra div to accomplish this horizontal centring but its worth the effort.

Theres nothing we can do for IE to stop the image disappearing upwards when the page is resized up but we can add a min height and width for mozilla and other browsers which will work. IE just ignores it so it does no harm. Putting all that together looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
body {
margin:0;
padding:0;
text-align:center;/* centre for ie5 and 5.5. */
min-height:200px;/*for mozilla/opera */
min-width:200px;/* """ */
}
img {
position: absolute;
left:0;
top: 50%;
margin-top: -100px; /* make this half your image/element height */
}
div.centre {
height:100%;
width:200px;
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
position:relative;/* gain stacking context for absolutely placed element */
}
</style>
 
</head>
 
<body>
<div class="centre"><img src="img.gif" width="200" height="200" /></div>
</body>
</html>

If you just want an image centred then you could just put the image in the background of the body and centre it as follows:

 
body {
background-image: url(img.gif);
background-repeat: no-repeat;
background-position: center center;
}

You could also fix the image when used in the background by adding this to the above code:

background-attachment: fixed;

Now the image will stay in the centre even when the page is scrolled.

Here are a few links that show the above methods and a few more interesting methods.

http://www.pmob.co.uk/temp/flashbg.htm
http://www.pmob.co.uk/temp/vertical-align6.htm
http://www.pmob.co.uk/temp/vertical-align3.htm
http://www.pmob.co.uk/temp/vertical-align5.htm

Be aware that the last 3 links contain methods that centre elements of no specific height and rely on a bug in IE6 that positions a positioned element at 100% of its own height and not the parents height. This results in the element being perfectly centred (it seem that this still works in Ie7 also). (Other browsers do not have this behaviour and are given alternate code.)

[Paul O'B]

FAQ : Where do I put my styles:

Unless your website is just one page then the best place to put your stylesheet is in an external stylesheet. This means the stylesheet gets loaded once and is stored by the browsers cache and can be used on subsequent pages (even hundreds of pages) so it is quite a saving in bandwidth and a worthwhile exercise.

When placing the stylesheet in an external document (external stylesheet) you must reference the document as follows (where mainstyles.css is the name of your CSS file).

This code goes between the head tags of your document.

<link href="mainstyles.css" rel="stylesheet" type="text/css">

If you want older browsers such as Netscape 4 not to see your stylesheet at all you can use the import rule to import your stylesheet as Netscape 4 doesn't understand it.

<style title="Default" type="text/css"> 
@import url(mainstyles.css); 
</style>

Which means that you can put your advanced CSS in this file and Netscape will ignore it. You could then make another stylesheet that Netscape 4 can use with simple formatting that it understands and place a link to this before the import rule.

e.g.

<link href="simplestyles.css" rel="stylesheet" type="text/css"> 
<style title="Default" type="text/css"> 
@import url(mainstyles.css); 
</style>

This means that netscape only gets the first stylesheet and compliant browsers get both.

Your external stylesheet should contain only css and css comment tags e.g. /* this is a comment */. If you place any other code or mark up in the file you could confuse the browser and the results will be unreliable. Some beginners make the mistake of placing html comments (!-- -->) in their css and some browsers will choke on this. Also some users place the <style type="text/css"> tags in their external css file and this may also mystify some browsers.

Embedded stylesheet:

An embedded stylesheet is when you place the styles in the actual page that uses them and not in an external stylesheet. Why would you do this?

Well one reason is that you only have one page in your website so there's no point in having an external stylesheet as well.

A more common reason is that you have a few styles that only apply to the page in question and are not used anywhere else in the site. You can still have your external stylesheet but just a few very specific styles embedded in the page that the current page needs.

Be aware that the more styles you embed then the harder it will be to control the layout and style of the whole site by just changing the stylesheet.

Inline Styles :

An inline style is where you place the style directly in the html in the tag it refers to rather than specifying a class or ID.

e.g.

<p style="color:black;background:white;width:20%;line-height:30px">Text</p>

Inline styles should be avoided and are only used in rare situations maybe to combat a bug or to make sure that a specific style is adhered to. Inline styles have the strongest weight and will override any other styles set in embedded or external stylesheets.

A page with a lot of inline styles is no better than the old table/font mark-up of old and goes against the principle of separating presentation from content.

Use inline styles with caution because it usually means you have not coded correctly in the first place.

[Paul O'B]

FAQ : Quick Tips.

FAQ : Remove underline from all links :

a {text-decoration:none}

For specific links just use a class in the anchor as follows.
Css:

a.test {text-decoration:none}

Html:

<a class="test" href="#">Link</a>

---------------------------------------------------------------
FAQ:How do I highlight a link on rollover?

a:hover {background:red;color:blue}

Or specific links like so:
Css:

a.test:hover {background:red;color:yellow}

html:

<a class="test" href="#">Link</a>

----------------------------------------------------------------
FAQ:Help the browser identify your css:

You should ensure that the following is placed between the <head> tags in your documents that use CSS. This helps the browser identify the content.

<meta http-equiv="Content-Style-Type" content="text/css" />

-----------------------------------------------------------------
FAQ:Static Positioning :

When you lay out an element on a page and you do not specify it's position (e.g. position:absolute) then the element is laid out as part of the normal flow of the document. That is it will be placed after any preceding elements and other elements will follow it, as long as all these elements have no position defined other than static which is the default.

Static is the initial value of the position property and is used by default, which means that it doesn't need to be declared. e.g. position;static is the same as if you hadn't entered anything at all. Static content will flow around any floated elements.

Also any attempt to position a static element with values for left and top will be ignored for obvious reasons (i.e. static element positions are governed by the normal flow of the document and not by positioning with values. You can of course position the element away from other static elements by using margin-left , margin-right, margin-top or margin-bottom).

-----------------------------------------------------------------
FAQ:Relative Positioning:

Relative positioning is the most mis-understood and incorrectly applied positioning system because many beginners do not understand how it works and what it is doing.

You will very rarely use relative: positioning (other than for stacking context (without co-ordinates)) for structural layout because it is not really meant for that but is mainly used for more subtle and advanced effects.

Relative positioning is putting the element in the normal flow of the document and then offsetting it by some distance using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

Basically you are moving the element relative to where it would have been had it not been moved. This means that the element is moved visually but not physically. It is a means of re-positioning an element without altering the flow of the document in any way except by visual appearance.

When an element is moved with relative position the space that it previously occupied is preserved and that space will still have an effect on surrounding content as if it were still there.

So there are three main things to remember with relative positioning:

1) The element is positioned relative to where it would usually be in the normal flow of the document.

2) The space that the element occupies in the normal flow is preserved, which may mean that you are left with a gap if the element is positioned a long way away.

3) The element may overlap other elements on the page.
-----------------------------------------------------------------
FAQ:Absolute Positioning :

An absolutely positioned element is removed from the normal flow of the document and placed precisely at the co-ordinates specified by top,left, right or bottom.

But what is the element absolutely positioned from? It is positioned absolutely from the top left hand corner of its containing block (i.e. its parent). The containing block of the positioned element is the nearest ancestor element which has a value for the property position other than
static. If there is no ancestor then the containing block is the root element , which is the html element outside of all margins set on the body.

So what this boils down to is that an element will be absolutely positioned from the top left of the viewport unless it is nested in another element that has a value for the property position other than static. e.g. position:relative or position:absolute. In these cases the element will position itself the specified amount from the top left of its parent elements.

So the usual way to place an element in relation to its parent is to give the parent a position:relative without co-ordinates which keeps the parent in the flow of the document. The nested child element will then takes its absolute positioning co-ordinates using the parents top left co-ordinates as its starting point.

-------------------------------------------------------------------
FAQ:Remove border from an image link :

To remove the border on all linked images in a page.
Put this into your head section or external stylesheet.

<style type="text/css"> a img { border:0 } </style>

Or use a class to target specific images. Remember its the image that has a border and not the anchor. You may also need to set the properties for the anchor such as text-decoration:none etc.

------------------------------------------------------------------

[Paul O'B]

FAQ : Everything you wanted to know about floats but were afraid to ask. (Floats & float Bugs and Problems in IE)

IE has a few little bugs that crop up when using floats and once you understand them then you can work around them quite easily.

FAQ: The margin on a float is bigger in IE than in other browsers.

IE6 has a double margin bug on the side of a float nearest either the windows (or containers) edge. This means that the first float next to the left side or right of a window will get its right or left margin doubled. Subsequent floats are not affected.

Try this example in IE6 and then in mozilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#floatexample {
float:left;
width:200px;
margin-left:300px;
height:200px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="floatexample">Float example</div>
</body>
</html>

You will see that in IE6 the float is nearly off the screen while in mozilla its in its correct position.

The solution is to add display:inline to the float which for some strange reason fixes the IE6 problem. "display:inline" applied to a float is a nonsense fix because you can't actually make a float display:inline as a float always has a block display by default. This means its safe to use and will have no ill effects as other browsers just ignore the rule without ill effect.

#floatexample {
float:left;
width:200px;
margin-left:300px;
height:200px;
border:1px solid #000;
display:inline;
}

FAQ : The famous Three pixel jog:


IE6 always adds about 3 pixels of padding around floats when aligned next to static content (floats next to floats are ok and don't have this problem which is why people will put floats together to avoid the problem.)

The solution to this is a little more complicated and relies on a trilogy of techniques.

1) The first is to give the float a negative margin to pull that padding back.

e.g. on a left floated element :

 
* html #leftelement {margin-right:-3px}

This has to be hidden form other browsers because they would make the element too short which is why the star selector hack (* html) has been used to give styles only to IE6 (and under). (See the above FAQ on the broken box model for more info on the star selector hack.)


2) The above code will make the float the correct width but if you had a margin on your static content alongside the float you would also need to reduce that by 3 pixels also. This is because IE6 will always add that 3px padding back on. Use the star selector hack as above to provide an alternative margin for IE6 on the static content.

* html #content {margin-left:212px}

3) The last of the fixing techniques for the float is where the 3 pixel jog gets its name. Although we have fixed 2 issues above with floats there is one last issue that occurs only in static content next to a float where the static content is held clear of the float by margins as mentioned above.

When text in the static content grows to a point where it is longer than the float is alongside then the text in the content jogs back 3pixels because the effect of the extra padding that IE6 has applied to the float no longer takes effect. This can make the layout look a little strange.

The fix is to give the static content a width, which cures the problem, or even a height will cure the problem. However most of the time you want neither height nor width because by its very nature this static content should be in the flow and take up available space automatically. Therefore we need another hack and that is to give IE6 a height of 1%.

IE6 treats height as min-height and will automatically expand the height to accommodate content so it can safely be used. However other browsers will adhere to the height:1% so it must again be hidden from them using the star selector hack.

* html #content {margin-left:212px;height:1%}

Note that ie5 mac doesn't like this and doesn't need it either so for completeness you should give ie5 mac a height auto using one of the mac hacs.
e.g.

* html>body #content {height:auto}

So there you have all the answers to the 3 pixel jog float problems. Here’s an example of all the techniques wrapped into one example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left {
float:left;
width:200px;
margin-left:15px;
display:inline;/* double margin fix for ie*/
background:red;
height:100px;
}
#content {
margin-left:215px;
background:yellow;
}
* html #left{margin-right:-3px}/* reduce the right margin to account for 3pixels*/
* html #content {height:1%;margin-left:212px}/* fix 3 pixel jog and account for 3 pixels extra padding*/
</style>
</head>
 
<body>
<div id="left"><p>Left float</p></div>
<div id="content">
<p>This is the static Content : This is the static Content : This is the static Content : 
This is the static Content : This is the static Content : This is the static Content : 
This is the static Content : This is the static Content : </p>
 
</div>
</body>
</html>

IE6 still has one trick up its sleeve in that if you resize the window very small then the text will drop below the float and the smaller margin will take effect. However this will only happen at smallest sizes and is possibly best ignored. (I didn't say it was perfect did I.)

FAQ : 50% float + 50% float = 101% !

Sometimes if you put 2 or more floats side by side with percentage widths then the float drops up and down on every odd pixel, as the page is re-sized. This is a rounding bug mainly in IE6 (other browsers versions do sometimes have their own rounding bugs also) and in cases where the odd numbered pixels are rounded up then the total width becomes greater than the space allocated thus causing the float to drop.

The solution is to make one float slightly smaller so that the rounding error is negated.e.g. 49.9%.

A neater way is still to make both elements 50% (or whatever adds up to 100% exactly) and then just apply a 1px (or sometimes 2px) negative margin to the opposite side of the last float in sequence. For a float that's floated left you could add a margin-right:-1px which will drag its right edge 1px smaller and counteract the rounding error.

FAQ : What is float drop:

No its not a dodgy advert for some drug its when two floats meet as the screen is resized or when static content meets floated content then the browsers will try and accommodate the content by looking for space wherever it can. This usually results in one of the elements dropping underneath the other one in order to find space.

Unfortunately IE will drop floats (or the content alongside) even when there is no space underneath and there is very little that can be done about it. Most times this behaviour is what you want but when you have a columnar layout you do not want any content to drop because they should remain alongside each other. Mozilla will not drop the floats in these cases because it knows better.

Again, unfortunately, IE will apply this behaviour if there are large images in the static content and the browser has been resized so the images are tight to the container and then IE will drop the whole page below the float. This can be a real nuisance if your float is very long as the content will drop all the way to the bottom.

One cure is to wrap the elements up in floats themselves but this gets very complicated quickly and doesn’t always work.

Another partial cure (which I'll share) that hasn't been documented anywhere except here (AFAIK). This has limited scope and can only be used in the following conditions. Where you have a left float with static content alongside then you can use this method.

You set the left float to have a negative margin the same size as its width. This takes the float completely off screen and out of the equation altogether. You then just use position:relative to move the float back into positioning. With position:relative the browsers still thinks the float is out of the way and the float drop is eliminated.

Here's a short example for you to test. Again this only applies to IE and has limited use but worth experimenting with.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left {
float:left;
width:200px;
height:200px;
background:red;
position:relative;
margin-left:-200px;
left:200px;
}
#content {
margin-left:220px;
background:yellow;
}
img {float:left;}
</style>
</head>
<body>
<div id="left">This is the left</div>
<div id="content">
<img src="images/pmoblogoi.jpg" width="455" height="102" /> 
<p>This is the content : This is the content : This is the content : This is 
    the content : This is the content : This is the content : This is the content 
    : This is the content : This is the content : This is the content : </p>
</div>
</body>
</html>

Try the above code in IE. Resize the window smaller and notice that the image stays at the top of the screen. Then take out the negative margin and the left positioning and try again. As soon as you resize the window to the image then the image and text drop below the float.

Edit:


In fact the above example works better if you apply the negative margin to the right side of the float instead and don't move it relatively at all.
e.g.

#left {
float:left;
width:200px;
height:200px;
background:red;
position:relative;
}
* html #left{margin-right:-200px;}

The above code is just given to ie using the star selector hack as IE is the only one that has problems with float drop.

One other way that may clear float drop is by adding overflow:hidden to the centre content and this in some cases will cure it and stop the content from dropping. Of course you should have fixed the 3 pixel jog first so that that problem is out of the way.

As usual trial and error is needed but with one of the methods above you can usually solve the problem.

FAQ : What is clear used for:

Clear is used to prevent elements from being displayed next to floated elements. Clear:left will ensure that the left side of the element is clear of all floats and clear:right will ensure that the right side of the element is clear of all floats. Clear:both will make sure either side is clear of all floats.

You may also often see this in some web pages:

<div style="clear:both"></div>
 
or
 
<br style="clear:both" />

What are they used for?

Well floats are basically removed from the flow so that if they are the only element in a container then that container behaves as if the float doesn't exist. If the container has a background colour then it will not wrap the background colour around the float as it would with other static elements.

Therefore clear:both is used to provide content into the container in order to force the container to encompass the float with its background. The container now has something to get hold of and will stretch around the clear statement which by effect has cleared the float.

It is usual to place this clear:both before the closing div of the parent container. You may wonder why there are two versions - one using break and one using div. The short answer is that <br> works better in mozilla and div works better in IE. The reason being that mozilla requires the element to have height before it will clear and the break has intrinsic height.

However I offer a better solution that works for both browsers (ie and mozilla (& most others)) and simply provides one pixel content which gives the browsers something to get hold off and then uses a negative margin to kill the space that it would have made. This gives a clearing effect without adding any unwanted space to the layout.

CSS:

.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px; 
}

HTML:

<div class="clearer"></div>

To finish off with here’s a short example using float to structure a layout and if you copy the following code the effects are obvious and easy to understand.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left {
float:left;
width:200px;
margin-left:15px;
display:inline;/* double margin fix for IE6*/
background:red;
height:100px;
}
#content {
margin-left:215px;
background:yellow;
}
* html #left{margin-right:-3px}/* reduce the right margin to account for 3pixels*/
* html #content {height:1%;margin-left:212px}/* fix 3 pixel jog and account for 3 pixels extra padding*/
</style>
</head>
 
<body>
<div id="left"><p>Left float</p></div>
<div id="content">
<p>This is the static Content : This is the static Content : This is the static Content : 
This is the static Content : This is the static Content : This is the static Content : 
This is the static Content : This is the static Content : </p>
 
</div>
</body>
</html>

overflow:hidden - used to clear floats:
You can also make floats contain their children by applying overflow other than visible to the parent which creates a block formatting context and forces the parent to acknowledge the floated children.

This doesn't work in IE6 but for for IE6 you just need to ensure that the parent is in "haslayout mode" which can easily be tripped by supplying a dimension.

You can read more on this method here in a SitePoint article. Usually overflow:hidden is used these days but can only be used where you don't want non visible overflow (such as in negative margins dragging an element out of the parent etc.)

If you want to clear floats without using structural mark up then have a look at the methods promoted at the PIE website . To cater for ie7 the full clearing method should be like this:

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
/* mac hide \*/
    * html .clearfix {height: 1%;}
     .clearfix {display: block;}
/* End hide */

<div id="outer" class="clearfix">
<div class="floatedstuff">
    <p>Floated content to be cleared</p>
</div>
</div>

The above method works well and saves having to have unwanted mark-up in the html. I have noticed though that if the element is the last element on the page it does seem to introduce a space at the end. However that will rarely be a problem.

See this thread for a thorough dissection of the clearing methods mentioned above.


Firefox clearing all floats!

I should mention here that when you clear a float you are effectively clearing all content above the float. If you have a columnar layout then you could find that clearing an element in one column causes the clearing element to drop below all columns.

This is the correct behaviour according to the specs and one that you should be aware of. There is a solution in that you can contain the clearing effect by making sure the parent is also floated. Any clears are contained within that parent float as it can't really clear itself.

Here is an example that demonstrates the above.


Hope that's cleared the floats up for you!

Paul

Edit:


Note that Firefox 1.5 will now clear properly with just a simple clear:both and no height is required.

[Paul O'B]

FAQ: 1px dotted borders in IE

The dotted borders in IE don't display properly when the page is scrolled especially when using the wheel button on the mouse.

There is a (supposed) fix in using a fixed background image in the body which seems to make ie redraw the borders correctly. The drawback (apart form it being a hack) is that is stops the body from having a scrollable background image. ( I haven't had much success with this method but I'll leave it in anyway for testing.)

I would suggest that you hide it from other browsers using the * html hack.

e.g.

* html body {background:url(img.gif) fixed no-repeat;}

The image doesn't need to exist for this method to work but as with all hacks test it first to make sure its worth the effort.

More info on the above method can be found here.

It should also be noted that IE6 and under display dashed borders at 1px even when dotted is specified. If you specify 2px they become dotted but bigger of course.

Here is my non-semantic solution to bot the above problems .

Edit:


The dotted borders on elements will behave better if you ensure that the element is in "halsayout" mode (see faq on "haslayout"). It won't cure the 1px/2px problem but will stop then from being rubbed out when the page is resized.

[duuudie]

This is my modest attempt to be part of this thread.

The FOUC issue is a problem that occurs in WIN/ie and Opera 7. It's a well known bug and the workaround has been around for quite a while. The only problem is that there is nothing you can to avoid the flash of unstyled content in Opera...

So what is the FOUC about?

If you use the @import rule (to hide your styles from the old Netscape for example) the mentionned browsers will render your page without any styling.... which is quite... well... ugly. But it's not that bad as it only takes one second or so before the styles are applied to the document. But heh, you've spent hours styling your page, you don't want the HTML displayed without styles, even for one second. And that's quite understandable.

So what can you do to prevent this?

You just need to have a <link> element in the <head> element of your document, just as if a remote file was supposed to arrive. No need for a target file. The link element will be nice enough to tell ie to wait a bit before displaying the unstyled html.

I have just read that adding a <script> element to the document head would also fix this problem, which I wasn't aware of until a few minutes.

more info: http://www.bluerobot.com/web/css/fouc.asp

I hope that will help a few people

[Paul O'B]

Paul, any new updates since 2004 that you'd like to share?
Great thread, thanks.

Here's a couple more things for IE.

FAQ:What is "haslayout"

This is probably the most important thing that you need to know (apart from the broken box model) when dealing with IE.

When you layout elements on your page a certain number of properties will cause the element to go into what msdn calls "layout" mode and therefore the element "haslayout". When an element "haslayout" it will start behaving properly and many bugs from the peek-a-boo bug to disappearing text/floats/images etc will all magically disappear.

There are a list of properties you can use to force layout noted in the links below but the easiest to use and most sensible is simply to give the element a dimension. Dimensions force layout mode (on block level elements only of course as inline elements do not take note of dimensions) and the easiest dimension is to apply a 100% width when you have elements that have no padding or borders. If the element has padding or borders then you cannot apply 100% width because the box model will make the element too big.

In these cases you can apply a height:1% hack. Why 1% ?

IE treats height as a minimum and if you give an element a specific height then the element will start at that height but should the content be greater than the specified height then the element will automatically expand. (Other browsers will just overflow as they will respect the height.)

Therefore the height:1% hack should be hidden from all other browsers and just be given to ie. (This is why it is better to use the 100% width where possible as no hacks are needed.)

/* mac hide \*/
* html #elementname {height:1%}
/* end hide*/

The mac hiding comments hide the style from ie mac as it does not suffer from this bug and also will not expand the 1% height. The star selector hack (* html) gives the style to IE only. (Read the box model hacks above for more info on the star selector hack). Therefore the above snippet of code will pass styles to ie only.

The height is set to 1% which ie promptly ignores as the content will always be greater than 1% (theoretically) and therefore there is no detrimental effect to the layout except that the element is forced into layout mode and starts working correctly.

You may find many bugs listed on the internet (all with their own peculiar names) however 90% of them will stem from the fact that an element (or its child or parent) isn't generating "layout".

With a little bit of experience you will soon spot which elemenents need layout and are causing problems but the easiest one to note is an element that has its size defined by margins alone. If you have an element that is sized like this for example :

#test {margin:50px 20px 70px 40px}

Most browers will handle this correctly but IE will have problems especially when you start adding inner elements/images/floats of a set size. It seems that IE can't work out the dimensions of the parent correctly and all sorts of weird things can happen depending on the situation. This can simply be fixed by using the height:1% hack as documented above

Why is this "layout bug" not well known ?

Well msdn does document "haslayout" in the links below but it does take some finding!

http://msdn.microsoft.com/library/de...ie20050831.asp
http://msdn.microsoft.com/workshop/a...tion.asp#intro
http://msdn.microsoft.com/workshop/a.../haslayout.asp


The above applies mainly to IE6 and we will have to wait and see what ie7 has to offer and whether these bugs wil be fixed or not although I have a feeling that the layout problem may be fixed as the msdn blog mentions that they are looking at bugs like the peek-a-boo bug etc which are related to this.

There is also an excellent article on haslayout here that goes in depth and brings everything under one roof. Worth reading and digesting

Edit:


Some IE7 information added here from a recent post I made:

min-height:0 is the perfect candidate for forcing "haslayout" in IE7 because it causes no visual difference to the display and is harmless to all browsers. It of course only applies haslayout to IE7 as ie6 doesn't understand the min and max width properties.

Overflow (other than visible) will trigger haslayout in IE7 but it will also of course apply the overflow behaviour to that element and you may not want to have scrollbars appearing, or risk the chance that scrollbars will appear.

It doesn't matter what you use to force "haslayout" as the effect is the same whatever you use but the code you apply will of course affect the element in the usual way. That's why min-height:0 is so useful because it causes nothing to happen to the element at all and is 100% safe for other browsers.

There are a number of "triggers" for haslayout and they are documented at the MSDN site. These refer to IE6 but still have meaning for IE7 although IE7 has some extra properties and some new layout triggers such as min/max - width/height, overflow (other than visible)).

Of course you do need some experience in spotting haslayout disturbances rather than coding errors but usually when part of an element disappears or appears in a position it shouldn't be then you can hazard a guess that "haslayout" is an issue and you just have to find the element causing the problem. The problem may in fact be a distant parent that is actually causing the problem and can take a bit of trial and error to find the right one.

[Paul O'B]

FAQ: How can min-width be achieved in IE ?

Ie doesn't understand min-width in the true sense although it will often expand the size of a container if the content won't fit inside. (Other browsers will just let the content overflow but keep the container at the size specified.)

However min-width is usually required in that you want the container not to get smaller than a set dimension but to expand to auto width as the page gets bigger. The easiest way to set a min (or max) width is then to revert to expressions which are proprietary IE only code and invalid CSS. However they will do no harm and will accomplish a task that ie doesn't have support for.

If you need your page to validate then expressions can be hidden inside conditional comments and will be hidden from the validator and the page will appear to validate. This is just a hiding trick really as you are still using invalid code but it may satisfy your client

Here is an example of min-width using an expression.

 
<!--[if lte IE 6]><style type="text/css">body {width:expression( documentElement.clientWidth < 740 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 740 ? "740" : "auto") : "740px") : "auto" );}</style><![endif]-->

Which could simply be tyrned into a max-width as follows:

 
<!--[if lte IE 6]><style type="text/css">body {width:expression( documentElement.clientWidth > 1000 ? (documentElement.clientWidth == 0 ? (body.clientWidth > 1000 ? "1000" : "auto") : "1000px") : "auto" );}</style><![endif]-->

An example using the above code can be found here (in a slighly complicated layout).

If you don't want to use hacks for min width then there is a method that will accomplish the above but relies on a few non-semantic divs to do this. It does however, make the layout more complicated than it needs to be although of course this method will work when javascript is turned off unlike expressions which require javascript to be enabled in order to work.

This examples sets a min-width of 740px but will also expand to 80% of the available screen width.

http://www.pmob.co.uk/temp/min-width-ie.htm

The method is simple in that padding is used to hold the element open and the content is re-positioned using negative margins. That's about all there is to it except that IE6 and under need a little extra tweaking to make it more solid. The code should work cross-browser although in the example above I have hidden it from other browsers using conditional comments.

I would be inclined to use expressions if you have more than one element that needs a min-width but if its just the main page layout then the above method should work fine.

[Paul O'B]

FAQ: Can I have my content first in the html in a 3 column layout:

This is easy to do in a fixed width layout by using relative positioning to juxtapose the column positions.

All is explained in the following link:

http://www.pmob.co.uk/temp/3col-content-first.htm

The same method can also be applied to 3 fluid columns.

For a layout that has fixed side columns and a fluid centre then a different and more complicated approach is needed and can be seen in this example.

[Paul O'B]

FAQ : Why does my page content sometimes overlap other elements on first visit?

(Or:FAQ : Why should I supply width and height dimensions in my html for images.)

A common question in the forums is "why is my footer half way up the page when it should be at the bottom?". Or why do some of my page elements overlap the first time someone visits the site.

Assuming you have coded everything correctly and have a structure that works then the usual culprit is that you have not supplied the width and height of your images in the html.

When you don't supply a width and height for your images then the browser has to load the image first to know how big is actually is. The problem occurs in that the browser will carry on loading the rest of the page while the image is still loading and therefore doesn't allocate the correct amount of space for the image.

Unfortunately as the page has already been drawn the space that the image needs to occupy has already had other content placed there and so you get an overlap. On subsequent visits (or on refresh) the page is fine because the browser has the image in cache and knows exactly how much room to allocate.

When you supply the dimensions of your image in the html the browser will allocate the space for the image and carry on loading the rest of the page. When the image finally gets loaded the space is already allocated and everything fits together nicely.

It doesn't seem to be enough to allocate the image size in the css either so I recommend always adding your width and height dimensions in the html. This behaviour is often noticed in sites that utilise dynamic image content and the coders haven't bothered to also supply the dimensions when writing the image into the html.

[Paul O'B]

FAQ: How do I get min-height for all modern browsers?

Edit:


This topic is slightly outdated but still valid although it does concern some outdated browsers such as IE5 mac which aren't really worth bothering with these days.

min-height is very useful in that it holds an element open at a pre-defined height. This means that the element will start at the height defined (e.g. min-height:300px) and will then be allowed to grow with content as required but will never be smaller than the height you set for it.

Unfortunately IE6 doesn't understand min-height!

The usual fix that satisfies 95% of browsers is simply to give IE6 a height and all others a min-height. Of course a hack has to be employed for this as the two properties must be kept apart from each other.

The star selector hack is useful for this and is explained above in the faq for the broken box model.

So a basic example would be this:

 
#outer {min-height:300px}
* html #outer {height:300px}

This would allow IE6 to start at 300px height and other browsers that understand min-height will start at 300px also.


How does that work then?

IE6 (ie6 and under) treat height as a minimum and will always expand the container to accommodate any content that is greater than the dimensions set. This means that to actually confine a container in IE6 to remain at a set height (even if the content is greater) then you need to set overflow:hidden which will restrict the height to the dimensions set and hide any excess content.

The two styles must be separate because if you set min-height:300px and height:300px in the same style then all you ever get in good browsers is 300px.

IE6 doesn't understand min-height and just ignores it altogether so there is no need to hide it from ie. We just have to keep the height:300px separate from other browsers.

What about other browsers that don't understand min-height?

IE5 Mac doesn't understand min-height but it does understand height. This means that unlike IE6 it will obey the height set and will not expand a container if content is greater. Therefore when we use the method shown above then iemac will be restricted to 300px and not grow with content.

The easiest solution is to hide the height:300px from ie5 mac so that it will just grow and shrink with content but alas it will not have the min-height we wanted. This is of course better than letting it stay at 300px and the method used would be to hide the 300px using a mac hiding hack as follows.

#outer {min-height:300px}
 
/* mac hide \*/
* html #outer {height:300px}
/* end hide*/

Now ie mac will just get a container whos height is auto. Note that the funny comments surrounding the code above must be kept intact above and below as they are the mechanism for hiding from ie mac. Also don't be tempted to add other css coments inside the hack as this will cut short the hack and stop it working.

Is there a method we can use to make ie5 mac (and others) work with min-height?

There is a method you can use that will prop open the element using a float. It utilises a 0px width float (some browsers may require 1px but I haven't found any that do yet) which is floated right in the parent container and has a height that you want to prop open the element with.

Here's an example of min-height that will work in ie5 mac and most others (version 5 browsers and up). I don't have safari to check but browerscam shows safari 1.2 behaving with it.

Here's a live example.

http://www.pmob.co.uk/temp/min-height.htm

Here's the Code:

#outer {
background:silver;
width:40%;
min-height:300px;
border:1px solid red;
}
/* mac hide \*/
* html #outer{height:300px;}
/* end mac hide*/
 
html>body #minheight{
float:right;
width:0px;
height:300px;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

<div id="outer"> 
<div id="minheight"></div>
<p>Some text to wrap : Some text to wrap : Some text to wrap : Some text to 
    wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some text 
    to wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some 
    text to wrap : Some text to wrap : Some text to wrap : Some text to wrap : 
    Some text to wrap : Some text to wrap : </p>
<p>Some text to wrap : Some text to wrap : Some text to wrap : Some text to 
    wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some text 
    to wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some 
    text to wrap : Some text to wrap : Some text to wrap : Some text to wrap : 
    Some text to wrap : Some text to wrap : </p>
<div class="clearer"></div>
</div>

The space is simply propped open using a 300px high float which is floated to the right of the parent. The float can be 0px width but has 300px height which means it takes up no space but still holds the parent open to 300px.

Of course the float has to be cleared to allow the parent to extend around it (see faq on floats) otherwise the parent won't enclose the float. (I have used the clearer div method as it is the most reliable in all situations but there are other less obtrusive methods you could use such as overflow:auto on the parent or the content:after method - see faq on floats for more information on this).

The mac hack, the child selector and the star selector are all used to pass values to different browsers.

/* mac hide - ie5 mac will jump this block and only IE pc gets the style in the middle because of the star selector hack. \*/
* html #outer{height:300px;}
/* end mac hide*/
 
/* IE6 will not read this next block because of the child selector*/
html>body #minheight{
float:right;
width:0px;
height:300px;
}

In fact the whole code could actually be shortened to this.

#outer {
background:silver;
width:40%;
min-height:300px;
border:1px solid red;
}
#minheight{
float:right;
width:0px;
height:300px;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

The only drawback is the IE6 will drop floats below the content when the page is squeezed really small. This is not usually a problem but if the element has images or fixed width content then it may be undesirable to have the float dropping downwards.

There are various other methods of imitating min-height such as using a 300px padding on the main element and then dragging the content back over the padding with a negative margin. The padding holds the element open and also allows it to increase with height but not to decrease less than the padding. However it is slightly more complicated than the first method I describe so I won't bother demonstrating it.

You can also use display:table for safari but that won't work for ie5 mac so you are still better off using my first method

Whatever method you use just make sure you check in the browsers you are supporting so that you don't get any nasty surprises

[Paul O'B]

10 best practices when Using CSS.

1)Use a valid doctype and validate your html and css before you start bug-hunting and before you ask for help.

2) Control the margin and padding on all the elements you use. Differing margins and padding are one of the main reasons that your site may be displayed differently in various browsers.

Browsers apply a default stylesheet to elements and this varies from browser to browser so you need to control them explicitly.

Some people use the universal selector (global reset method) to achieve this as follows.

* {margin:0;padding:0}

Couldn't be simpler could it?

Now all elements will start off without any padding or margins including the html and body elements. Just remember that lists (ul) use a left padding (some browsers use left margin) of about 16px in order to display the bullet point. Just make sure you apply a left-margin to the ul when you want the bullet to show (left padding will work also).

However the drawback of this method is that elements like submit buttons lose their depressed when clicked effect (in mozilla) when margin/padding is removed and can't be re-instated. There are also problems with selects being squashed and re-applying padding doesn't work in a cross browser way.

Therefore it may be better in some instances not to us the universal selector method and just to reset the padding and margins of the elements you use when you use them.

e.g.

p {
margin:0 0 1em 0 ;
padding:0;
color:#000;
background:#fff;
}

3)K.I.S.S. (Keep It Simple Stupid):

Complex code is usually the result of muddled thinking. Plan your layout logically and work from the outside in and from the top down where possible. Look at what containers you will need and break jobs down into smaller parcels. I usually start with a page wrapper and then progress logically through the header, navigation, body and footers etc trying to preserve the flow of the document as much as possible.

4)Don't absolute position every element unless you have a fixed width fixed height layout that isn't going to change. Otherwise you could find yourself with a very rigid layout that is hard to manage. The question often asked in the forums is how can I put a footer under the absolute columns and the answer is you can't unless the columns are a fixed height or you want to script it).

You usually need a mixture of static (default), floated and absolute positioning in most layouts and will rarely use relative positioning.

5)Don't use Relative positioning to move things around unless you know why you are using it and understand the results (see faq on positioning). Relative positioning doesn't really move anything at all as it moves the element visually but not physically. The space the element previously occupied is preserved and the flow of the document is not changed in any way.

Relative positioning is used for more subtle effects usually. (You will often see relative positioning used without co-ordinates and this is fine. It's usage in this context is to create a local stacking index for further positioned elements or to make use of the z-index which requires positioning to be applied before it becomes effective.

6)If you have inner elements then try adding the borders and padding on inner elements and avoid the broken box model problems of IE (see box model faq). If you don't want non-semantic extra divs and have no inner elements to use then use one of the box model hacks but understand why it works and what it does so that you know how to work with it now and for the future when browsers change (see msdn blog for details of ie7).

7) You will usually need to create a page wrapper for your content, If you have a centred page then don't waste code centering the header then centering the body then centering the footer etc..... Just wrap the whole page in one wrapper and centre that instead. All the elements will then sit inside and be centred without need for further code (see faq on centering).

This also applies to side columns that may contain lots of floats. Don't float 10 elements individually to one edge to make a side column but rather float one whole column that will contain all these other elements which will probably not need to be floated now (see faq on floats).

8)Don't suffer from divitus and classitus.

e.g.

<div id="header"><h1 class="heading"></h1></div>

In most cases the above code could be reduced as follows.

<h1 id="heading"></h1>

And in some cases you may not need the id either if the element is already within a parent that has an ID as you can target it specifically.

e.g.

#top-section h1 {color:red}

<div id="top-section>
<h1>Header</h1>
<div>Other code etc....</div>
</div>

While we are here I should mention that you should use the appropriate htmltags for your page so that it makes semantic sense and also allows you to target the elements more easily by specifity if necessary.

e.g.If you have lists then use ul or ol, or if its a list with a defintion then use dl,dt,dd. If the text is a paragraph then put it in a paragraph tag. If its a heading then use a heading tag.

Not only will this make your page more readable and semanticcally correct it also becomes easier to style because you can target the elements more easily rather than having every single thing wrapped in a div.

9) Don't use breaks (<br>) just to make space in your layout as there is no need and it is hard to control. Make spavce by using the padding and margins on existing elements as this is what they were designed for and gives you absolute control.

10) Avoid hacks unless there is no other way to achieve what you want. If you can't change the design to avoid a hack then understand the hacks you are using and have some sort of strategy that allows you to make changes in the future should the need for the hack disappear. It is important to understand how the hack is working and what happens when browsers change (as they do) and what can you do to minimise the consequences.

IE7 will no longer support * html in strict (standards) mode so therefore any hacks specific to ie will no longer take effect for ie7.

For instance min-height isn't being implemented in IE7 (as far as I can find out at present) but * html is being fixed (in standards mode) so it can't be used in ie7 to apply styles.

Therefore a hack like this for a min-height effect in IE won't work in IE7:

#test {min-height:300px}
* html #test {height:300px}

Edit:


ie7 beta 3 now has full support for min/max width/height and the above code is now quite safe to use.

But the box model hack is safe because ie7 doesn't need any different values.:

#test {width:200px;padding:20px;}
* html #test {width:240px;w\idth200px}

The above snippet will still work in all flavours of IE.

However most other bugs are being fixed so fingers crossed. You can always us conditional comments to support IE and each version individually if required.

[Paul O'B]

FAQ : The 1px background Jog on Images on the body in IE.

A lot of sites utilise a shadow effect on their whole page content by adding a repeating background image centred on the body.

Unfortunately IE suffers from rounding problems when matching up images placed on the body with the rest of the content and the result is the 1px jog where the layout jogs in and out of alignment with the body image.

Have a look at the following page in IE and resize the window smaller or larger to see the effect. It is most noticable where I have coloured the header.

http://www.pmob.co.uk/temp/onepxjog.htm

Most times this can be cured by simply adding a 1px left padding to the body as in the example below.

http://www.pmob.co.uk/temp/onepxjog-2.htm

The above solution is not always foolproof and in those cases it is best to remove the body background image to a 100% high container (see faq on 100% height).

In this example the image has been moved from the body and there is no jog at any screen size.

http://www.pmob.co.uk/temp/1colcentred.htm

[Paul O'B]

Wow, very good thread

Thanks - it's appreciated

The clearing of floats are dealt with in the faq on floats so you may have missed it

At present there are a number of ways to clear floats.

You have Tony Asletts method documented at PIE - (good method but occasionally buggy and doesn't work in ie)

Float the parent also and it will contain the child float automatically. (useful method)

Then there's my discovery of overflow:auto - (little buggy and doesn't work in ie)

Or still my favourite (but not very semantic) clearing div. - (works everywhere)

.clearer{
height:1px;
overflow:hidden;
/* or font-size:0px instead of overflow:hidden*/
margin-top:-1px;
clear:both;
}
 
<div class="clearer"></div>

Mozilla won't clear elements unless some height is added to the equation which is why the height :1px is added and then negated with the negative margin. However if the parent element has borders then the negative margin isn't necessary.

It's worth noting here that the new Firefox 1.5 will now clear properly with just a simple clear:both and no height is required.

Hope that helps

[Paul O'B]

FAQ: How do I place some text at the bottom of a column/element?

If you want a copyright message that sits at the bottom of one of your columns or at the bottom of the page you can use absolute positioning to place it there.

As absolute elements are removed from the flow you need to preserve the space that the element occupies so that content doesn't over-write it. You can do this simply by using padding on the element above so that the space the absolute element occupies is protected.

The only drawback is that the absolute element does have to be a specific height so that you can account for the amount of padding you will need to protect it. Usually this isn't a problem with copyright messages and the like because they are just one or 2 lines of text.

You can of course use ems for the padding so that when text is resized the padding is also increased so that the layout stays intact.

First of all you need to create a local stacking context by applying position:relative to the main outer. This will allow further positioned elements to take their starting position from this main outer rather than the viewport.

#outer{
position:relative;/* stacking context so that we can place copyright at the bottom of the page*/
}

You may thing that you need to apply this positioning to the column you are interested in but you would be wrong. Only the main outer will always contain the full height of the page so that is the one we must use to base our absolute element on.

Next we simply place the element absolutely at the bottom:

#copyright{
position:absolute;
bottom:0;
left:0;
width:200px; 
}

The element has been placed at the bottom of where the left column would be and therefore we have given it the same width as the left column to complete the illusion.

Then we must preserve the space at the bottom of the left column:

#left{ 
float:left;
width:200px;
padding-bottom:4em;/* preserve space for copyright message*/ 
}

You can use trial and error to work out exactly much padding you need or if you are good at maths then work it out exactly. You must remember that the space is at the bottom of the left float and as the content extends the left float downwards then it will always stop before the content reaches the bottom because you have applied padding to stop it.

Of course you could place the copyright message anywhere at the bottom on whatever side you like as long as you follow the techniques above.

Here is an example so view source to see the full code

http://www.pmob.co.uk/temp/text-at-bottom3.htm

(The above example demonstrates how to place text at the bottom of the page but you would still use the same techniques if you want text (or images) at the bottom of an element. the only difference is that you apply all the techniques to that single element and not a parent outer.)

There is one drawback to placing absolute elements on the bottom of the parent and that is if you want pixel precision in IE. IE6 and under (IE7 seems ok) will always be 1 pixel out when the parent is and odd pixel length. This demo below explainjs it in detail:

http://www.pmob.co.uk/temp/onepxgap.htm

[Paul O'B]

IE7 Supports min/max height width

Yes IE7 supports min and max height and width correctly.

IE5 and 6 can achieve min-height ONLY because of the expanding box problem

Yes IE5 and 6 treat height as a minimum and will always expand the element to accommodate the content (unless overflow is other than visible). It can be seen almost the same as min-height in this respect.

(btw IE7 has the expanding box problem as well, so how does that fit in with setting dimensional properties?)

IE7 doesn't have the expanding box problem as Height works correctly in IE7 and will not expand the container. It works more or less the same as other browsers now in this respect.

And IE5/6/7 can also achoeve min/max width (but not height?) using IE only CSS code?

As I said IE7 supports min and max width and height so there is no problem implementing it in ie7 at all.

IE5 - 6 do not support min and max width and the easiest fix is to use an expression to cater for this. See the FAQ on min-width for a css alternative for min-width (but it is a little complicated). Max width can only be done with scripting or via an expression.

IE5 -6 will actually increase an elements width if the content pushes it wide but this is not the same as min-width and only happens when the inner content has a greater width specified or is an unbroken series of text or perhaps a large image. In these cases IE5 - 6 will expand the container to accommodate the content usually resulting in breaking the rest of the layout completely. It has nothing in common width min-width though unlike height.

Hope that explains it.

[Paul O'B]

FAQ : Why doesn't this work in ie5 / broken box model?

(This topic is mainly for historic reference as most are not supporting IE5.x these days)

Sitepoint reference

IE5, IE5.5 and IE6 in quirks mode use what is commonly known as the broken box model. Most other modern browsers use the correct box model (note that some older versions of opera will also use the broken box model in quirks mode). The box model is how an elements dimensions are defined and is explained below. (Note quirks mode in IE6 is triggered by not having a doctype or using a partial html doctype without uri. It is also triggered accidentally in xhtml by using the xml declaration or in fact by having any content above the doctype. Otherwise ie6 will use the correct box model when in standards mode.)

In the correct box model an elements total size is made up of its width + padding + borders to achieve a total width of the element. In the broken box model the width of the element is the total width and padding and borders are contained inside that total width.

Take this style for instance:

 .elementsyle {
 width:200px;
 padding:50px;
 border:2px solid #000;
 }

In the correct box model this elements total width will be : 2px + 50px + 200px +50px + 2px = 304px total width. (Remember that borders and padding go on each side of the element and so need to be counted twice.)

In the broken box model the total width will only be: 200px (remember that padding and borders are contained within this width).

Therefore you will see that in the broken box model the element is only 200px wide whereas in the correct box model it is 304px. That’s a big difference and needs to be accounted for if you want your page to look the same in most browsers.

One way to account for the broken box model is not to specify width at the same time as setting padding and borders. The padding (and sometimes borders) can be set on an inner element which will allow the outer element to remain at the width specified and the inner element will stretch to fill it’s parent while adding the appropriate padding.
e.g.
CSS

 .outer {
 width:200px;
 }
 .inner {
 padding:50px;
 }

Html

 <div class=”outer”>
 <div class=”inner”><p>Some text</p></div>
 </div>

In the above example the width will remain at 200px but the element will have 50px padding on the inside.

To avoid extra nesting the above code can be simplified to this.

CSS

 .outer {
 width:200px;
 }
 .outer p {
 padding:50px;
 }

Html

 <div class=”outer”>
 <p>Some text</p>
 </div>

So now we have placed the padding in the paragraph (<p>) element instead. This means that no extra nestings were nested and is a much neater solution.

The downside of the above method is that in complicated situations IE will suffer from "haslayout" issues on the element that has no dimensions specified and therefore the above is not always the best approach.

We can instead resort to using the "star selector hack" combined with the backslash hack to target ie6 and ie5.x separately.

This hack works on 2 IE bugs that allow us to supply values to only IE browsers and also to separate between ie6 and ie5/5.5. We need to separate IE6 because it uses the correct box model as mentioned above and behaves the same as other browsers.

One caveat to this is that IE6 in quirks mode does use the broken box model so you must ensure you are working in standards mode whenever you use a box model hack otherwise they won’t work for ie6. To initiate standards mode just use a full Doctype with uri and if using xhtml then don’t use the xml prologue as anything above the doctype throws ie6 into quirks mode.

The hack uses the star (universal) selector coupled with the html element to send styles to IE only. The backslash (escape character) hack is then used to separate ie6 from ie5.x

 .elementname {
 width:400px;
 padding:50px;
 }
 * html .elementname{
 width:500px;/*for ie5.x win */
 w\idth:400px;/*for ie6*/
 }

Only IE will render this style due to a bug that allows it to parse the statement when it shouldn’t. Html is the root element and is not a child of anything and so should not match the statement above. IE treats the above as if the star (universal selector) was not there.

The backslash hack stops ie5.x from reading that particular style and so we can give ie6 the correct value. The backslash cannot appear before the first letter of the property since ie5.x/win understands it at the beginning. Also it cannot appear before the letters a – f and numbers 0-9 because it will turn those letters/numbers into hex numbers.

The above hack only targets IE6 and under (not ie7) win so we can safely use it without bothering or interfering with other browsers. The above hack will feed the value 500px to ie5.xwin and 400px to ie6. When ie6 adds the padding on the total width will then match that of ie5.x. e.g. 500px total width.

If you must code in quirks mode then the above code can be changed to cater for ie6 in quirks mode as well.

e.g.

 .elementname {
 width:400px;
 padding:50px;
 }
 * html .elementname{
 width:500px;/*for ie5.x win and ie6*/
 }

We just remove the backslash hack from above so that ie6 in quirks mode gets the same value as ie5+ thus keeping everything equal.

However ie5 mac uses the correct box model when a doctype is used and isn't tricked into quirks mode with comment tags or the xml prologue so you will need to hide the star selector hack from ie5 mac when using quirks mode in ie6.

Therefore you will need to hide the star selector hack from ie5 mac when working in quirks mode.

 /* commented backslash mac hiding hack \*/ 
 * html #test {width:300px}
 /* end hack */

I have used widths in all the examples above but the same holds true for height as well although height is generally not an important an issue as width is.

A better way to cope with different versions of IE is to use Conditional Comments.