Wickham's HTML & CSS tutorial

Sitemap | Home | prev

Using ems in web pages

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE

1 green icon The body of this page has margin: 20px but the containing div has a width: 55em; and margin: auto; so that the page centralises at large screen resolutions.

55 ems seems to be approximately the same width as 730px (used for the containing div on most of my other pages) using the default font-size: small in IE although in Firefox the equivalent seems to be about 56 or 57 ems.

This shows that when using ems it may be more difficult to ensure that the page renders the same in all browsers.

If the text size is enlarged the containing div will also enlarge by the same proportion in all browsers whereas on most other pages in this tutorial where the containing div is 730px the div will remain the same width while the content is enlarged. Increase the text size in IE to largest and FF by two increases to see the differences in the following examples:-

This text is in a div width: 20em; font-size: small; if the page text size is enlarged the div will increase in proportion so that text will nearly always have the same number of words on a row and number of rows. This method seems slightly better at keeping the same number of words on a row than the next example.
This text is in a div width: 20em; font-size: 1em; if the page text size is enlarged the div will also increase but in IE the div and text size increase by more than in the first example and elsewhere on the page although FF behaves as in the previous example.

In the second example at larger or largest text size IE shows the div wider and the font-size greater than in the first example but Firefox keeps the div and font-size the same as the first example (ie both enlarge by the same amount). IE at text larger or largest increases the font-size by more than for the first example and the page as a whole so I believe IE is not applying the rules correctly.

When using a fixed width for divs in px an increase in font-size may cause the text to expand below the bottom of a div with fixed height or to expand the height of the div. The use of ems will ensure that everything on the page will expand or contract in proportion except content with a fixed size such as images.

2 red icon The div containing the image below has a width: 15em. At default text size in IE the div is the correct width, but not wide enough in Firefox.
If the text size is decreased the div is not wide enough in both IE and FF.
If the text size is increased the image remains the same size but the div border expands and it will become wider than the image.
Care therefore needs to be taken using ems for divs or other elements containing images sized in px.

Hummingbird hawk moth

3 green icon The problem shown above can be overcome by re-sizing an image in ems for to match the div or page that contains it.

The div containing the image below has a width: 15em and the image which is 200px wide has been resized to 15em with the following code:-

<div style="width: 15em; margin: auto;">
<img style="width: 15em;" src="images/hawkmoth200x200.jpg" alt="Hummingbird hawk moth">

This results in the containing div matching the image width at any text size and any browser as the browser's font-size is used to determine the div and image widths.

Resizing an image may result in loss of quality either initially or when a viewer increases text size. In this example if the text size is increased resulting in an enlarged image the quality is much reduced.

The height of the image is resized in proportion to the width as browsers do this by default if no height is stated.

Hummingbird hawk moth


View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 55em; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006

top | Sitemap | prev