SitePoint.com

Paul O'B · May 27, 2004, 16:38

-- Frequently Asked Questions From Sitepoint Forum Members --

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

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

FAQ :How do you put a footer at the bottom of the window? (Sticky Footer)

FAQ :How to centre an existing page horizontally?

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

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

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

FAQ :How is 100% height achieved?

FAQ :How to centre horizontally and vertically?

FAQ :Where do I put my styles:

FAQ :Quick Tips (links and positioning explained)

FAQ :Everything you wanted to know about floats but were afraid to ask.

(Floats & float Bugs and Problems in IE)
Includes the following:

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

(FAQ : The famous Three pixel jog

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

(FAQ : What is float drop

(FAQ : What is clear used for

(Firefox clearing all floats!)

FAQ :1px dotted borders in IE

FAQ :How can I avoid the ugly Flash Of Unstyled Content (FOUC)?

FAQ :What is "haslayout"

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

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

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

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

FAQ :10 best practices when Using CSS.

FAQ:The 1px background image jog in IE

FAQ:How to place text at the bottom of a column/element

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

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:

Code:

 .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.

The easiest 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

Code:

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

Html

Code:

 <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. This is the easiest way to avoid the broken box model and maintain consistency between browsers. To avoid extra nesting the above code can be simplified to this.

CSS

Code:

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

Html

Code:

 <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.

However there are times when you need to resort to one of the box model hacks such as when borders need to be on the outer container. (Usually I don’t worry about borders being critical as they are only 1px extra on each side of the element and hardly noticeable.) If your layout needs to be pixel perfect then you can use one of the many hacks around but the one explained here is known as the Simplified Box Model Hack (SBMH).

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

Code:

 .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.

Code:

 .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.

Code:

 /* 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.
For the other major box model hack (the tantek hack) take a look here:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

Paul O'B · May 27, 2004, 16:39

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 Pseudo Class (classes for intangible characteristics you can't mark manually) and colour the links in the correct order as below (
Always specify in the order Link, Visited, Hover Active).

Code:

<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>

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 the style definition for the links. 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.

Code:

<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:

Code:

<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 in the <div> tag and not in the <a> tag. Also the format is slightly different as follows.

e.g.

Code:

<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:

Code:

<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> tags found in the rightlink class will take on the above rules. <a> tags 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 in the div. You just have to make sure that all anchors (<a tags>) 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.

Paul O'B · May 27, 2004, 16:40

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

Edit:

This edit supercedes the details in this faq.

IE8 needs a little helping hand and here is the code to satisfy IE8 (and Opera). See the CSS quiz where we discuss all the methods in detail

Code:

<!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*/
}
#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 */
}
/* #inner protects any floats in the content from clearing the :before float */
#inner {
    width:760px;
    overflow:hidden;
    /* you could use float:left instead of overflow:hidden if you wanted content to overflow*/
    /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
}
#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 {
    content:"";
    height:100%;
    float:left;
    width:0;
}

</style>
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <h2>Works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Safari 3 (and probably every other modern browser)</h2>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>

The question I get asked most about the three column layout mention in this thread (http://www.sitepoint.com/forums/showthread.php?t=143801) is how does the footer work in that it manages to stay at the bottom of the window or if the content is greater it sits at the end of the document. So here’s a quick explanation to strip the footer bare. (Unfortunately for ie5.2 mac users (and a couple of others) this technique doesn’t work for you.)

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.

Code:

/* 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 except for the footer. This outer element is set to 100% height for IE6 (and less) and 100% min-height for other modern browsers such as gecko/opera and ie7.

IE6 and under treat height almost as min-height anyway and will always expand a container's height to encompass its content. (Ie7 now implements min-height and the correct meaning of height and can be treated as other browsers in this respect.)

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

One last thing that needs to be added to our outer and that is to make room for the footer. We do this by applying a negative margin to the outer which drags it up 50px from the bottom of the 100% page.

Code:

#outer{min-height:100%;margin-bottom:-50px;}
* html #outer{height:100%;}

Edit:

IMPORTANT:

Edit:

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

Code:

#outer{
height:auto!important;
height:100%;
min-height:100%;
margin-bottom:-50px;

}

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.

We must now make the footer the same size as the previous negative margin so that it drops in nicely as follows:

Code:

#footer {
width:100%;
clear:both;
height:50px;
background-color: #FF8080;
color: #000000;
}

One last thing to notice is that our text still disappears behind the footer so we need to add a clearing div that sits at the end of the content and stops any content from going behind the footer. This is simply done by making a div the same size as the footer and placing it at the end of our content.

#clearfooter{clear:both;height:50px;}

Remember to address collapsing margins where the first element on the page may collapse its top margin into #outer and move the layout down the page. In our example the default top margin on the p element (as applied by gecko) would collapse onto #outer if we don't cater for it..

p {margin:0}

Just to finish off here’s the simple html needed to show all the above:

Code:

<!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>
<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%;
margin-bottom:-50px;
}
* html #outer{height:100%;}
#footer {
width:100%;
clear:both;
height:50px;
background-color: #FF8080;
color: #000000;
}
#clearfooter{clear:both;height:50px;}
p {margin:0 0 .5em 0}
 
</style>
</head>
<body>
<div id="outer">
    <p>content goes here</p>
    <div id="clearfooter"></div>
</div>
<div id="footer">Footer -</div>
</body>
</html>

I have used the negative bottom margin on #outer to make room for the #footer but you could just as easily apply a negative top margin to the footer itself instead which may make the method easier to understand. You could alternatively apply the negative margin as a negative margin-top to #outer and then add a 50px padding (or preferably a 50px border in the current background color) to the first element inside #outer (such as a header) on the page to cater for the footers space as in this example.

Remember that the negative margin should equal the height of the footer (including padding and borders) and that the clearfooter element also matches the height of the footer.

If you want to see this in action then visit the thread mentioned at the top of the page. This technique works in about 95% of browsers but shouldn’t really pose any problems in those that don’t like it, as the footer will just display under the content.

Footer at bottom of Centred Layout

(See Edit Section Below First) If you want a footer at the bottom of a centred layout then a different method is required. The layout is centred in the usual way (see faq on centering) using margin:auto and text-align:center on the body for ie5.

The outer is given a position:relative to create a local stacking context. This allows us to absolutely position the footer at the bottom of the 100% high outer.

We have to make room for the absolute element so that other content doesn't over-ride it which we can do in the same method as used in the first example (clearfooter).

That's about it:

Code:

<!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}
body {text-align:center}/* centre for ie5.+*/
#outer{
min-height:100%;
height:auto;
width:766px;
border-left:1px solid #000;
border-right:1px solid #000;
margin-left:auto;/* center it*/
margin-right:auto;/* center it*/
position:relative;
text-align:left;
}
* html #outer{
height:100%;
width:768px;/* box model hack for ie5.+*/
w\idth:766px
}
#footer {
width:100%;
position:absolute;
bottom:0;
left:0;
height:50px;
background-color: #FF8080;
color: #000000;
}
#clearfooter{clear:both;height:50px;width:100%}
div>p {margin:0}
 
</style>
</head>
<body>
<div id="outer"> 
<p>content goes here</p>
<div id="clearfooter"></div>
<div id="footer">Footer -</div>
</div>
</body>
</html>

You should note that older safari and ie5.2 mac don't like it much but should still be usable. Opera also has problems in re-drawing the footer once the page has re-flowed but that's a failing in Opera and not the design. However it should still be usable.

Edit:

Update:
It should be noted that in dynamic environments where content is being switched or manipulated or inserted then IE seems so forget that the #footer is absolutely positioned and misplaces it.

Therefore I advise using this alternative method which is much more stable than the absolute footer method.

Code:

<!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>
<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}
body {text-align:center}/* centre for ie5.+*/
#outer{
min-height:100%;
width:766px;
border-left:1px solid #000;
border-right:1px solid #000;
margin:auto;/* center it*/
position:relative;
text-align:left;
}
* html #outer{
height:100%;
width:768px;/* box model hack for ie5.+*/
w\idth:766px
}
#footer {
width:766px;
height:50px;
background: #FF8080;
color: #000;
margin:-50px auto 0;
position:relative;
}
#clearfooter{clear:both;height:50px;width:100%}
p {margin:0 0 .5em 0}
 
</style>
</head>
<body>
<div id="outer">
    <p>content goes here</p>
    <div id="clearfooter"></div>
</div>
<div id="footer">Footer -</div>
</body>
</html>

Or use the negative top margin method as shown in this example:

http://www.pmob.co.uk/temp/sticky-footer.htm

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.

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

Paul O'B · May 27, 2004, 16:41

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.

Code:

body {
text-align: center;
margin: 0px;
padding: 0px;
min-width:775px;/* stop mozilla sliding off the edge */
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
text-align: left;
}

And then after the body tag :

Code:

<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 browers wil 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 · May 27, 2004, 16:42

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:

Code:

<!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 · May 27, 2004, 16:43

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:

Code:

<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.

Code:

* 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

Code:

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:

Code:

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

html:

Code:

<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.

Code:

<!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. 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 · May 31, 2004, 10:41

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:

Code:

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

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

If you wanted to be clever you could use the universal selector (matches all elements) to set the padding and margins for all elements to zero. This would avoid the browsers default on all elements but does mean that you will have to explicitly set every margin and padding that you need (including a 16px left margin (or padding) on UL otherwise the bullets won't show).

Code:

* {padding:0;margin:0}

Most discrepancies on layout can be put down to designers not controlling the default margins and padding on elements so make sure you check these first.

Paul O'B · May 31, 2004, 10:43

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.

Code:

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.

Code:

/* 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 IE browsers and 100% min-height for mozilla browsers. IE6 and under treat height as min-height anyway but mozilla needs to be specific.(IE7 now implements min-height and the correct version of height so treat it like firefox when using this method.)

We also then need to set mozilla to height auto so that it doesn’t remain at 100% only but will expand as required. This height auto needs to be hidden from <=IE6 and is the only real hack in this code. (The star (universal) selector hack is good for passing values to only <=IE6 browsers.)

Code:

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

Here is the code for the whole page:

Code:

<!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%;
height:auto;
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

Edit:

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 as yet there is no workaround so I advise against using this method but leave it here for future reference.)

An added benefit is that no hacks are needed in this design except to hide the html,body (height:100%) style from ie mac as usual. IE doesn't understand display:table and ignores it but does inherit the 100% anyway so no hacks are needed for ie.

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

Hope that's made it a bit easier

Paul O'B · May 31, 2004, 10:44

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.

Code:

 
<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 :

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:

Code:

<!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:

Code:

 
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:

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 methos 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 perfecty centred (it seem that this still works in Ie7 also). (Other browsers do not have this behavior and are given alternate code.)

Paul O'B · Jun 1, 2004, 05:05

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.

Code:

<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.

Code:

<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.

Code:

<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.

Code:

<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.

Cam · Jun 1, 2004, 05:42

Wow, can we ever steal any of these for Team Tips for the Crier if we need something?

Paul O'B · Jun 1, 2004, 05:57

Help yourself

Paul O'B · Jun 1, 2004, 06:27

FAQ : Quick Tips.

FAQ : Remove underline from all links :

Code:

a {text-decoration:none}

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

Code:

a.test {text-decoration:none}

Html:

Code:

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

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

Code:

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

Or specific links like so:
Css:

Code:

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

html:

Code:

<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.

Code:

<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.

Code:

<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.

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

weirdbeardmt · Aug 27, 2004, 09:20

Feel free to remove this if you don't want comments cluttering this thread up, but I just wanted to say, cheers hugely for a great thread. Top work

Paul O'B · Aug 27, 2004, 10:08

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.

IE 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 IE and then in mozilla:

Code:

<!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 IE 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 ie. It is however ignored by all other browsers because you can't actually make a float display:inline as it's hard coded as display:block all the time by default. This means its safe to use and will have no ill effects.

Code:

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

FAQ : The famous Three pixel jog:

IE 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 :

Code:

 
* 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 ie. (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 IE will always add that 3px padding back on. Use the star selector hack as above to provide an alternative margin for IE on the static content.

Code:

* 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 IE 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 IE a height of 1%.

IE 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.

Code:

* 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.

Code:

* html>body #content {height:auto}

There are instances where ie5 may not like the height 1% so it’s worth checking your layout in ie5 to check its ok. If not then use one of the many variations of hacks to address IE only. (I don't usually bother unless I notice something bad.)

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.

Code:

<!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>

IE 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 in IE (other browsers do sometimes have their own rounding bugs) 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 1000% exactly) and then just apply a 1px negative margin to one of the sides on just one of the floats. For the first float thats 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.

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

Code:

<!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.

Code:

#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 allfloats. Clear:both will make sure either side is clear of all floats.

You may also often see this in some web pages:

Code:

<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:

Code:

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

HTML:

Code:

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

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

Code:

<!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>

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:

Code:

.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 */

Code:

<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.

In most simple cases you can use overflow:hidden also to clear floats in most modern browsers (apart from IE6 and under). More info on this method can be found here. The method can't be used where you are pulling content out of the element with negative margins etc as the content will be hidden.

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

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 sre 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 thats 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.

Beeper · Oct 20, 2004, 11:05

How about a nice tutorial/FAQ about hacks.

Like:

To change things in IE on a PC use the * hack.

Code:

#centerCol {
	margin: 0px;
	padding: 0px;
	width: 613px;
	margin-left: 170px;
	background-color: #FFFFFF;
	border-right-color: #6095C1;
	border-left-color: #6095C1;
	border-right-style: solid;
	border-right-width: 1px;
	border-left-style: solid;
	border-left-width: 1px;
	border-bottom: 0px;
	border-top: 0px;
}
/* IE RESIZE HACK */
* html #centerCol {
	width:601px;
	margin-left: 168px;
}

It would be magic if all the know hacks for known browsers would be good as in I see this a lot: w\idth or perhaps its w/idth

What does this affect and why?

Paul O'B · Oct 20, 2004, 11:53

Quote:

What does this affect and why

I think thats covered in the very first post in this thread lol

Beeper · Oct 20, 2004, 12:34

What about a Netscape 6.2 on a PC hack.... cause I need one

Oh and a Mac IE 5.1 hack and... hmmm, well that's about it.

While we are on the subject...

Why can't everybody use the same implementation? what's the point exactly of all these variations? Why is Microsoft always so recalcitrant with open standards? ...and a thousand other gripes.

Paul O'B · Nov 29, 2004, 18:40

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.

Code:

* 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.

brettsangela · Nov 29, 2004, 23:50

I was just curious as to why you have to say center twice when stating background-position? I have been unable to find an explanation for this anywhere....

Please help me, wise ones...

brettsangela · Nov 29, 2004, 23:55

Sorry guys, I found it... Just needed to read a little further in my book.. It wasn't too well put together, should have stated horizontal/vertical part before the rest.... Please ignore my blondness.. lol

duuudie · Dec 19, 2004, 14:26

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

JasonM · Jul 19, 2005, 01:06

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

Paul O'B · Jul 19, 2005, 03:39

Quote:

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.)

Code:

/* 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 :

Code:

#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 · Jul 19, 2005, 04:04

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.

Code:

 
<!--[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:

Code:

 
<!--[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.

May 27, 2004, 16:38	#1
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	CSS FAQ - How to...... -- Frequently Asked Questions From Sitepoint Forum Members -- FAQ :Why doesn't this work in ie5 / broken box model? FAQ :How can I have sets of different coloured links? FAQ :How do you put a footer at the bottom of the window? (Sticky Footer) FAQ :How to centre an existing page horizontally? FAQ :Why doesn't vertical-align work properly? FAQ :What size text should I use in my css? FAQ :How do I get rid of the default margins around the page? FAQ :How is 100% height achieved? FAQ :How to centre horizontally and vertically? FAQ :Where do I put my styles: FAQ :Quick Tips (links and positioning explained) FAQ :Everything you wanted to know about floats but were afraid to ask. (Floats & float Bugs and Problems in IE) Includes the following: (FAQ: The margin on a float is bigger in IE than in other browsers.) (FAQ : The famous Three pixel jog (FAQ : 50% float + 50% float = 101% !) (FAQ : What is float drop (FAQ : What is clear used for (Firefox clearing all floats!) FAQ :1px dotted borders in IE FAQ :How can I avoid the ugly Flash Of Unstyled Content (FOUC)? FAQ :What is "haslayout" FAQ :How can min-width be achieved in IE ? FAQ :Can I have my content first in the html in a 3 column layout: FAQ :Why does my page content sometimes overlap other elements on first visit? FAQ :How do I get min-height for all modern browsers? FAQ :10 best practices when Using CSS. FAQ:The 1px background image jog in IE FAQ:How to place text at the bottom of a column/element FAQ : Why doesn't this work in ie5 / broken box model? 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: Code: .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. The easiest 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 Code: .outer { width:200px; } .inner { padding:50px; } Html Code: <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. This is the easiest way to avoid the broken box model and maintain consistency between browsers. To avoid extra nesting the above code can be simplified to this. CSS Code: .outer { width:200px; } .outer p { padding:50px; } Html Code: <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. However there are times when you need to resort to one of the box model hacks such as when borders need to be on the outer container. (Usually I don’t worry about borders being critical as they are only 1px extra on each side of the element and hardly noticeable.) If your layout needs to be pixel perfect then you can use one of the many hacks around but the one explained here is known as the Simplified Box Model Hack (SBMH). 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 Code: .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. Code: .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. Code: /* 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. For the other major box model hack (the tantek hack) take a look here: http://www.tantek.com/CSS/Examples/boxmodelhack.html Last edited by Paul O'B; Sep 13, 2009 at 07:29. Reason: ie6 in quirks mode code added & mac hiding hack*

May 27, 2004, 16:39	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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 Pseudo Class (classes for intangible characteristics you can't mark manually) and colour the links in the correct order as below ( Always specify in the order Link, Visited, Hover Active). Code: <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> 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 the style definition for the links. 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. Code: <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: Code: <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 in the <div> tag and not in the <a> tag. Also the format is slightly different as follows. e.g. Code: <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: Code: <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> tags found in the rightlink class will take on the above rules. <a> tags 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 in the div. You just have to make sure that all anchors (<a tags>) 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.

May 27, 2004, 16:41	#4
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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. Code: body { text-align: center; margin: 0px; padding: 0px; min-width:775px;/* stop mozilla sliding off the edge / } .central { margin-right: auto; margin-left: auto; position: relative; width: 775px; text-align: left; } And then after the body tag : Code: <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 browers wil 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 Last edited by Paul O'B; Apr 15, 2006 at 08:36. Reason: amended typo in width to read 775px and not 755px*

May 27, 2004, 16:42	#5
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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: Code: <!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.

May 31, 2004, 10:41	#7
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	How do I get rid of the default margins around the page? 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: Code: html, body {margin:0;padding:0} This ensures that your pages will start without any margins at all. If you wanted to be clever you could use the universal selector (matches all elements) to set the padding and margins for all elements to zero. This would avoid the browsers default on all elements but does mean that you will have to explicitly set every margin and padding that you need (including a 16px left margin (or padding) on UL otherwise the bullets won't show). Code: * {padding:0;margin:0} Most discrepancies on layout can be put down to designers not controlling the default margins and padding on elements so make sure you check these first. Last edited by Paul O'B; Sep 13, 2005 at 07:35.

May 27, 2004, 16:40	#3
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	FAQ : How do you put a sticky footer at the bottom of the window? Edit: This edit supercedes the details in this faq. IE8 needs a little helping hand and here is the code to satisfy IE8 (and Opera). See the CSS quiz where we discuss all the methods in detail Code: <!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/ } #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 / } / #inner protects any floats in the content from clearing the :before float / #inner { width:760px; overflow:hidden; / you could use float:left instead of overflow:hidden if you wanted content to overflow/ / background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here / } #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 { content:""; height:100%; float:left; width:0; } </style> <!--[if (lte IE 6)\|(gte IE 8)]> <style type="text/css"> #outer {height:100%;display:table;} </style> <![endif]--> </head> <body> <div id="outer"> <div id="inner"> <div id="header"> <h1>Sticky Footer</h1> </div> <h2>Works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Safari 3 (and probably every other modern browser)</h2> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> <div id="footer">Footer</div> </body> </html> The question I get asked most about the three column layout mention in this thread (http://www.sitepoint.com/forums/showthread.php?t=143801) is how does the footer work in that it manages to stay at the bottom of the window or if the content is greater it sits at the end of the document. So here’s a quick explanation to strip the footer bare. (Unfortunately for ie5.2 mac users (and a couple of others) this technique doesn’t work for you.) 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. Code: / 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 except for the footer. This outer element is set to 100% height for IE6 (and less) and 100% min-height for other modern browsers such as gecko/opera and ie7. IE6 and under treat height almost as min-height anyway and will always expand a container's height to encompass its content. (Ie7 now implements min-height and the correct meaning of height and can be treated as other browsers in this respect.) The star selector hack ( html) is good for passing values to only <= IE6 browsers. (IE7 does not support the star selector hack and doesn't need it in this situation anyway.) One last thing that needs to be added to our outer and that is to make room for the footer. We do this by applying a negative margin to the outer which drags it up 50px from the bottom of the 100% page. Code: #outer{min-height:100%;margin-bottom:-50px;} * html #outer{height:100%;} Edit: IMPORTANT: Edit: Don't be tempted to use the following as it breaks in IE7. Code: #outer{ height:auto!important; height:100%; min-height:100%; margin-bottom:-50px; } 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. We must now make the footer the same size as the previous negative margin so that it drops in nicely as follows: Code: #footer { width:100%; clear:both; height:50px; background-color: #FF8080; color: #000000; } One last thing to notice is that our text still disappears behind the footer so we need to add a clearing div that sits at the end of the content and stops any content from going behind the footer. This is simply done by making a div the same size as the footer and placing it at the end of our content. #clearfooter{clear:both;height:50px;} Remember to address collapsing margins where the first element on the page may collapse its top margin into #outer and move the layout down the page. In our example the default top margin on the p element (as applied by gecko) would collapse onto #outer if we don't cater for it.. p {margin:0} Just to finish off here’s the simple html needed to show all the above: Code: <!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> <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%; margin-bottom:-50px; } html #outer{height:100%;} #footer { width:100%; clear:both; height:50px; background-color: #FF8080; color: #000000; } #clearfooter{clear:both;height:50px;} p {margin:0 0 .5em 0} </style> </head> <body> <div id="outer"> <p>content goes here</p> <div id="clearfooter"></div> </div> <div id="footer">Footer -</div> </body> </html> I have used the negative bottom margin on #outer to make room for the #footer but you could just as easily apply a negative top margin to the footer itself instead which may make the method easier to understand. You could alternatively apply the negative margin as a negative margin-top to #outer and then add a 50px padding (or preferably a 50px border in the current background color) to the first element inside #outer (such as a header) on the page to cater for the footers space as in this example. Remember that the negative margin should equal the height of the footer (including padding and borders) and that the clearfooter element also matches the height of the footer. If you want to see this in action then visit the thread mentioned at the top of the page. This technique works in about 95% of browsers but shouldn’t really pose any problems in those that don’t like it, as the footer will just display under the content. Footer at bottom of Centred Layout (See Edit Section Below First) If you want a footer at the bottom of a centred layout then a different method is required. The layout is centred in the usual way (see faq on centering) using margin:auto and text-align:center on the body for ie5. The outer is given a position:relative to create a local stacking context. This allows us to absolutely position the footer at the bottom of the 100% high outer. We have to make room for the absolute element so that other content doesn't over-ride it which we can do in the same method as used in the first example (clearfooter). That's about it: Code: <!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} body {text-align:center}/ centre for ie5.+/ #outer{ min-height:100%; height:auto; width:766px; border-left:1px solid #000; border-right:1px solid #000; margin-left:auto;/ center it/ margin-right:auto;/ center it/ position:relative; text-align:left; } html #outer{ height:100%; width:768px;/* box model hack for ie5.+/ w\idth:766px } #footer { width:100%; position:absolute; bottom:0; left:0; height:50px; background-color: #FF8080; color: #000000; } #clearfooter{clear:both;height:50px;width:100%} div>p {margin:0} </style> </head> <body> <div id="outer"> <p>content goes here</p> <div id="clearfooter"></div> <div id="footer">Footer -</div> </div> </body> </html> You should note that older safari and ie5.2 mac don't like it much but should still be usable. Opera also has problems in re-drawing the footer once the page has re-flowed but that's a failing in Opera and not the design. However it should still be usable. Edit: Update: It should be noted that in dynamic environments where content is being switched or manipulated or inserted then IE seems so forget that the #footer is absolutely positioned and misplaces it. Therefore I advise using this alternative method which is much more stable than the absolute footer method. Code: <!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> <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} body {text-align:center}/ centre for ie5.+/ #outer{ min-height:100%; width:766px; border-left:1px solid #000; border-right:1px solid #000; margin:auto;/ center it/ position:relative; text-align:left; } html #outer{ height:100%; width:768px;/* box model hack for ie5.+/ w\idth:766px } #footer { width:766px; height:50px; background: #FF8080; color: #000; margin:-50px auto 0; position:relative; } #clearfooter{clear:both;height:50px;width:100%} p {margin:0 0 .5em 0} </style> </head> <body> <div id="outer"> <p>content goes here</p> <div id="clearfooter"></div> </div> <div id="footer">Footer -</div> </body> </html> Or use the negative top margin method as shown in this example: http://www.pmob.co.uk/temp/sticky-footer.htm 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. One last thing - always remember to use a valid doctype and ensure you use valid code. Last edited by Paul O'B; Sep 13, 2009 at 07:30.*

May 27, 2004, 16:43	#6
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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: Code: <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. Code: * 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 Code: 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: Code: <style type="text/css"> body { font-size: xx-small; } p.emsize { font-size:2em; } p.percentsize { font-size:150%; } </style> html: Code: <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. Code: <!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. 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 Last edited by Paul O'B; Dec 24, 2004 at 07:16.

May 31, 2004, 10:43	#8
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	How is 100% height achieved? 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. Code: 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. Code: /* 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 IE browsers and 100% min-height for mozilla browsers. IE6 and under treat height as min-height anyway but mozilla needs to be specific.(IE7 now implements min-height and the correct version of height so treat it like firefox when using this method.) We also then need to set mozilla to height auto so that it doesn’t remain at 100% only but will expand as required. This height auto needs to be hidden from <=IE6 and is the only real hack in this code. (The star (universal) selector hack is good for passing values to only <=IE6 browsers.) Code: #outer{min-height:100%;background:#ffffcc} html #outer{height:100%;}/* ie6 and under/ Here is the code for the whole page: Code: <!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%; height:auto; 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 Edit: 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 as yet there is no workaround so I advise against using this method but leave it here for future reference.) An added benefit is that no hacks are needed in this design except to hide the html,body (height:100%) style from ie mac as usual. IE doesn't understand display:table and ignores it but does inherit the 100% anyway so no hacks are needed for ie. 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 Hope that's made it a bit easier Last edited by Paul O'B; May 27, 2007 at 04:40.

May 31, 2004, 10:44	#9
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	How to centre horizontally and vertically? 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. Code: <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 : 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: Code: <!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: Code: 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: 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 methos 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 perfecty centred (it seem that this still works in Ie7 also). (Other browsers do not have this behavior and are given alternate code.) Last edited by Paul O'B; Aug 8, 2008 at 07:46.*

Jun 1, 2004, 05:05	#10
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	Where to put your styles 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. Code: <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. Code: <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. Code: <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. Code: <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.

Jun 1, 2004, 05:42	#11
Cam ********* Wizard Join Date: Aug 2002 Location: Burpengary, Australia Posts: 4,601	Wow, can we ever steal any of these for Team Tips for the Crier if we need something?

Jun 1, 2004, 05:57	#12
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	Help yourself

Jun 1, 2004, 06:27	#13
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	Quick Tips FAQ : Quick Tips. FAQ : Remove underline from all links : Code: a {text-decoration:none} For specific links just use a class in the anchor as follows. Css: Code: a.test {text-decoration:none} Html: Code: <a class="test" href="#">Link</a> --------------------------------------------------------------- FAQ:How do I highlight a link on rollover? Code: a:hover {background:red;color:blue} Or specific links like so: Css: Code: a.test:hover {background:red;color:yellow} html: Code: <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. Code: <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. Code: <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. ------------------------------------------------------------------ Last edited by Paul O'B; Apr 16, 2006 at 08:55.

Aug 27, 2004, 09:20	#14
weirdbeardmt We like music. Join Date: May 2001 Location: Channel Islands Girth: Footlong Posts: 6,146	Feel free to remove this if you don't want comments cluttering this thread up, but I just wanted to say, cheers hugely for a great thread. Top work

Aug 27, 2004, 10:08	#15
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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. IE 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 IE and then in mozilla: Code: <!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 IE 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 ie. It is however ignored by all other browsers because you can't actually make a float display:inline as it's hard coded as display:block all the time by default. This means its safe to use and will have no ill effects. Code: #floatexample { float:left; width:200px; margin-left:300px; height:200px; border:1px solid #000; display:inline; } FAQ : The famous Three pixel jog: IE 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 : Code: * 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 ie. (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 IE will always add that 3px padding back on. Use the star selector hack as above to provide an alternative margin for IE on the static content. Code: * 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 IE 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 IE a height of 1%. IE 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. Code: * 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. Code: * html>body #content {height:auto} There are instances where ie5 may not like the height 1% so it’s worth checking your layout in ie5 to check its ok. If not then use one of the many variations of hacks to address IE only. (I don't usually bother unless I notice something bad.) 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. Code: <!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> IE 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 in IE (other browsers do sometimes have their own rounding bugs) 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 1000% exactly) and then just apply a 1px negative margin to one of the sides on just one of the floats. For the first float thats 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. Heres a short example for you to test. Again this only applies to IE and has limited use but worth experimenting with. Code: <!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. Code: #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 allfloats. Clear:both will make sure either side is clear of all floats. You may also often see this in some web pages: Code: <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: Code: .clearer { clear:both; height:1px; overflow:hidden; margin-top:-1px; } HTML: Code: <div class="clearer"></div> To finish off with here’s a short example using float to structure a layout and if you copy the folowing code the effects are obvious and easy to understand. Code: <!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> 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: Code: .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 / Code: <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. In most simple cases you can use overflow:hidden also to clear floats in most modern browsers (apart from IE6 and under). More info on this method can be found here. The method can't be used where you are pulling content out of the element with negative margins etc as the content will be hidden. See this thread for a thorough dissection of the clearing methods mentioned. 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 sre 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 thats 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. Last edited by Paul O'B; Oct 5, 2008 at 13:35. Reason: Typo

Oct 20, 2004, 11:05	#16
Beeper SitePoint Addict Join Date: Sep 2003 Location: LONDON UK Posts: 207	What about hacks? How about a nice tutorial/FAQ about hacks. Like: To change things in IE on a PC use the * hack. Code: #centerCol { margin: 0px; padding: 0px; width: 613px; margin-left: 170px; background-color: #FFFFFF; border-right-color: #6095C1; border-left-color: #6095C1; border-right-style: solid; border-right-width: 1px; border-left-style: solid; border-left-width: 1px; border-bottom: 0px; border-top: 0px; } /* IE RESIZE HACK / html #centerCol { width:601px; margin-left: 168px; } It would be magic if all the know hacks for known browsers would be good as in I see this a lot: w\idth or perhaps its w/idth What does this affect and why? Last edited by Beeper; Oct 20, 2004 at 11:07. Reason: Missed out a curly bracket in example

Oct 20, 2004, 12:34	#18
Beeper SitePoint Addict Join Date: Sep 2003 Location: LONDON UK Posts: 207	OK then... What about a Netscape 6.2 on a PC hack.... cause I need one Oh and a Mac IE 5.1 hack and... hmmm, well that's about it. While we are on the subject... Why can't everybody use the same implementation? what's the point exactly of all these variations? Why is Microsoft always so recalcitrant with open standards? ...and a thousand other gripes. Last edited by Beeper; Oct 20, 2004 at 12:36. Reason: More hacks needed

Nov 29, 2004, 18:40	#19
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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. Code: * 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. Last edited by Paul O'B; Dec 23, 2007 at 05:35.

Nov 29, 2004, 23:50	#20
brettsangela SitePoint Enthusiast Join Date: Feb 2004 Location: Los Angeles Posts: 49	background-position: "center center"?? I was just curious as to why you have to say center twice when stating background-position? I have been unable to find an explanation for this anywhere.... Please help me, wise ones...

Nov 29, 2004, 23:55	#21
brettsangela SitePoint Enthusiast Join Date: Feb 2004 Location: Los Angeles Posts: 49	...never mind... i found it... lol Sorry guys, I found it... Just needed to read a little further in my book.. It wasn't too well put together, should have stated horizontal/vertical part before the rest.... Please ignore my blondness.. lol

Dec 19, 2004, 14:26	#22
duuudie gimme the uuuuuuuuuuu Join Date: Feb 2004 Location: Switzerland Posts: 2,256	How can I avoid the ugly Flash Of Unstyled Content (FOUC)? 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

Jul 19, 2005, 01:06	#23
JasonM SitePoint Enthusiast Join Date: Apr 2005 Posts: 44	Paul, any new updates since 2004 that you'd like to share? Great thread, thanks.

Jul 19, 2005, 04:04	#25
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,424	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. Code: <!--[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: Code: <!--[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. Last edited by Paul O'B; Jan 13, 2008 at 07:19.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode