CSS FAQ, Tips etc. Please read before posting!
The previous "Sticky threads" are being amalgamated into this Ultimate Sticky thread. You will find links below to all previous "Sticky Threads" below: (This is a work in progress)
Sticky Threads:
CSS Test Your Skills - Archived Quizzes
CSS for Mobile sites
CSS display:table - Pros and Cons for layouts
-- Frequently Asked Questions From Sitepoint Forum Members --
FAQ:What size text should I use in my css?
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.
There have been a number of interesting threads in the forum on font-sizing and it would be worth reading though the following links to see all sides of the argument so that you can make a rational decision.
http://www.sitepoint.com/forums/show...hreadid=565469
http://www.sitepoint.com/forums/showthread.php?t=620506
If you want to learn more then there are some useful links here that explain the above in more detail.
http://diveintoaccessibility.org/day...ont_sizes.html
http://www.thenoodleincident.com/tut...ont/index.html
http://www.bigbaer.com/css_tutorials/css_font_size.htm
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.
See the thread on "CSS resets" for a more thorough discussion on this topic.
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 IE6 and under and min-height:100% for all other browsers although these rules must be separated to protect the good browsers from getting 100% height. IE6 and under treat height as min-height and will always expand an element to fit its content unless overflow is hidden of course.
(The star selector hack (* html) is used for passing values to only <=IE6 browsers.)
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%;
background:#ffffcc;
width:200px;
}
* html #outer{height:100%;}
</style>
</head>
<body>
<div id="outer">
<p>content goes here</p>
</div>
</body>
</html>
While the code achieves 100% height and allows for the element to expand it does have some drawbacks.
The container element (#outer) is the only element that will inherit the 100% properly so you have to keep everything inside this element. The element will only expand when content inside it expands it past the bottom of the viewport. A lot of people expect it to expand automatically to the document length or the length of longer elements on the same page. When you think about it this can’t really happen unless all elements are wrapped inside this 100% element.
As mentioned above you can only have one of these elements on your page because inner elements will not inherit from the 100% min-height and default to height auto. (Of course IE6 and under may in some circumstances apply 100% height on inner elements but it is not guaranteed and not advisable because it does not work in other browsers.)
For an example of how you can use 100% height then look at the demo in this thread:
http://www.sitepoint.com/forums/showthread.php?t=143801
All but IE7:
Another way to achieve 100% height is to use display:table for browsers like mozilla or opera instead of min-height:100%. This has the added benefit that mozilla will now inherit 100% into subsequent nestings as long as they are also display:table. This means that multiple 100% images can be used as long as all elements are nested inside each other. (Note that display:table will not work in ie7 (and under) but does work in IE8 so has limited use if you want to support IE7. Ie6 can be fixed by simply using height:100% but this won't work for IE7 i'm afraid - which leaves it out in the cold.)
Opera needs the final nested element into which content is placed to be defined as display:table-cell otherwise it doesn't work.
Heres an example that works in ie5 - 6, Netscape 6.2+, mozilla, firefox and Opera7.5. (However Opera 7.5. suffers with redraw problems on the footer). Newer versions of safari should be ok but other versions won't work. (You will need to use the safari min-height hack from my 3 col examples if necessary).
Just view source from the following link and it should be self explanatory. I have added a footer at the bottom just for example.
http://www.pmob.co.uk/temp/hundredpe...lay-table2.htm
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.
The following method will centre an element vertically and horizontally but is not the method I would choose because at small heights and widths the element will vanish through the top of the monitor and off to the left. I have left the code in place for historical purposes but I wuld advice against it's use.
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 methods and a few more interesting methods.
http://www.pmob.co.uk/temp/flashbg.htm
http://www.pmob.co.uk/temp/vertical-align6.htm
http://www.pmob.co.uk/temp/vertical-align3.htm
http://www.pmob.co.uk/temp/vertical-align5.htm
Be aware that the last 3 links contain methods that centre elements of no specific height and rely on a bug in IE6 that positions a positioned element at 100% of its own height and not the parents height. This results in the element being perfectly centred (it seem that this still works in Ie7 also). (Other browsers do not have this behaviour and are given alternate code.)
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 :)
FAQ:How to place text at base of column
FAQ: How do I place some text at the bottom of a column/element?
If you want a copyright message that sits at the bottom of one of your columns or at the bottom of the page you can use absolute positioning to place it there.
As absolute elements are removed from the flow you need to preserve the space that the element occupies so that content doesn't over-write it. You can do this simply by using padding on the element above so that the space the absolute element occupies is protected.
The only drawback is that the absolute element does have to be a specific height so that you can account for the amount of padding you will need to protect it. Usually this isn't a problem with copyright messages and the like because they are just one or 2 lines of text.
You can of course use ems for the padding so that when text is resized the padding is also increased so that the layout stays intact.
First of all you need to create a local stacking context by applying position:relative to the main outer. This will allow further positioned elements to take their starting position from this main outer rather than the viewport.
Code:
#outer{
position:relative;/* stacking context so that we can place copyright at the bottom of the page*/
}
You may thing that you need to apply this positioning to the column you are interested in but you would be wrong. Only the main outer will always contain the full height of the page so that is the one we must use to base our absolute element on.
Next we simply place the element absolutely at the bottom:
Code:
#copyright{
position:absolute;
bottom:0;
left:0;
width:200px;
}
The element has been placed at the bottom of where the left column would be and therefore we have given it the same width as the left column to complete the illusion.
Then we must preserve the space at the bottom of the left column:
Code:
#left{
float:left;
width:200px;
padding-bottom:4em;/* preserve space for copyright message*/
}
You can use trial and error to work out exactly much padding you need or if you are good at maths then work it out exactly. You must remember that the space is at the bottom of the left float and as the content extends the left float downwards then it will always stop before the content reaches the bottom because you have applied padding to stop it.
Of course you could place the copyright message anywhere at the bottom on whatever side you like as long as you follow the techniques above.
Here is an example so view source to see the full code
http://www.pmob.co.uk/temp/text-at-bottom3.htm
(The above example demonstrates how to place text at the bottom of the page but you would still use the same techniques if you want text (or images) at the bottom of an element. the only difference is that you apply all the techniques to that single element and not a parent outer.)
There is one drawback to placing absolute elements on the bottom of the parent and that is if you want pixel precision in IE. IE6 and under (IE7 seems ok) will always be 1 pixel out when the parent is and odd pixel length. This demo below explainjs it in detail:
http://www.pmob.co.uk/temp/onepxgap.htm
