Wickham's HTML & CSS tutorial

Different buttons for visited and hover states

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

In the examples below if you use one of the links and then use your back button to return to this page, the button will have been changed to an image with green text instead of black text. The text is in the background images, not as text over a background image, so you need image software like Irfanview to place text in the image. Similarly a different image is used for the hover state.

1 green icon This example shows different buttons used as background images for the normal, a:visited and a:hover states which have black text in the normal images, green text in the visited images and blue text for the hover images, not as text in the li tag over a background image. This enables you to use a special font for the buttons in the normal, visited or hover states which the viewer may not have on his computer because you have put the special font into an image.

The buttons will tend to flash on hover because each button image has to load so there is a slight delay. Item 2 avoids this delay. I have added "title="..." to each link because a background-image on its own for a link button means that blind people cannot know where the link leads, so a screen reader will read out the link title.

The code for the styles in the head section style tags is:-

ul { margin: 0 -40px; list-style-type: none; }
ul li a { float: left; width: 100px; height: 30px; display: block; margin: 0 5px; }
#menuhome a { background:url(images/menuhome.gif) }
#menuhome a:visited { background:url(images/menuhomevisited.gif) }
#menuhome a:hover { background:url(images/menuhomehover.gif) }
#menulinks a { background:url(images/menulinks.gif) }
#menulinks a:visited { background:url(images/menulinksvisited.gif) }
#menulinks a:hover { background:url(images/menulinkshover.gif) }

The body html code is:-

2 green icon This example shows the same button image used as a background image for the normal, a:visited and a:hover states which has black text in the normal image, green text in the visited image or blue text in the hover image depending on which part of the image is shown, not as text in the li tag over a background image.

The image used is a combined image; it is 100*90px but the top 30px has black text on an orange background while the middle 30px has green text and the bottom 30px has blue text on an orange background. The ul li a style has a height of 30px so that it only shows the top 30px of the background-image for the normal state. The background image for the a:visited status has -30px for the vertical background position so that only the middle part of the image with the green text shows. The background image for the a:hover status has -60px for the vertical background position so that only the bottom part of the image with the blue text shows. See Combined Home button.

There is no delay moving from either the normal or visited state to hover because the combined image with all three states has been downloaded; it is only the position selected by the background position that changes.

This enables you to use a special font for the buttons in the normal, visited or hover states which the viewer may not have on his computer because you have put the special font into an image.

I have added "title="..." to each link because a background-image on its own for a link button means that blind people cannot know where the link leads, so a screen reader will read out the link title.

The code for the styles in the head section style tags is:-

ul { margin: 0 -40px; list-style-type: none; }
ul li a { float: left; width: 100px; height: 30px; display: block; margin: 0 5px; }
#menuhome2 a { background:url(images/menuhomecombined.gif); }
#menuhome2 a:visited { background:url(images/menuhomecombined.gif); background-position: 0 -30px; }
#menuhome2 a:hover { background:url(images/menuhomecombined.gif); background-position: 0 -60px; }
#menulinks2 a { background:url(images/menulinkscombined.gif); }
#menulinks2 a:visited { background:url(images/menulinkscombined.gif); background-position: 0 -30px; }
#menulinks2 a:hover { background:url(images/menulinkscombined.gif); background-position: 0 -60px; }

The body html code is:-

Adjustment for IE

In both the above cases IE has different default margins for ul and li tags so a conditional comment is needed to adjust only IE.

In the examples above the first button is in the correct position in IE but the second Links button is displaced a bit below the first button so the following conditional comment with margin-top: -17px needs to be inserted in the head section after the general style tags, just before the closing </head> tag:-

Notes

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

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise 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:-

or if there are many different styles, create a separate stylesheet:-

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 <p>Little Egret</p> instead of <p>Little Egret</p>. The code < 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.

top | Sitemap | special effects