Retur til artiklen om CSS-formaterede menuer.
Menuens bredde er 200 pixel i følgende browsere:
IE5, IE5.5, IE6, IE7, Mozilla 1.0, Opera 8, Firefox 1.0.4,
Firefox 1.5 og Netscape 7.
OBS!erver! at IE-specifikke formdeklarationer er indsat ved hjælp af Microsoft betingede kommentarer (grøn tekst). Flere af de såkaldte CSS-hacks, jeg hidtil har anvendt, invalideres af Internet Explorer version 7.
<style type="text/css" media="screen">
ul.cssmenu {
list-style:none; /* Fjerner listepunktsmarkørerne */
border-width:0 1px 1px 1px; /* Laver en kasse rundt om menuen */
border-style: solid;
border-color: #257;
background:#fff;
width:198px; /* Menuens bredde = width+2*border.*/
margin: 1em 0;/* top og bund, venstre og højre */
padding:0;/* Vigtigt at få denne med */}
ul.cssmenu li a {
font-size:0.9em; /* px eller % går også an */
color:#1a0080;
background-color:#fff;
display:block; /* Gør a-markøren til et blokelement. */
text-decoration:none;/* Fjerner understregning */
margin:0; /* Vigtigt at få denne med */
padding:3px 5px; /* Laver luften mellem teksten og border -
top og bund, venstre og højre */
border-top:1px solid #257;}
ul.cssmenu li a:visited { background-color:#eee;}/* Besøgt link, grå baggrund */
ul.cssmenu li a:hover { /* Mouseover egenskaben. Farverne inverteres */
color:#fff;
background-color:#1a0080;}
ul.cssmenu li a:active {
/* IE tolker denne forkert, derfor gi'r
jeg den samme farve som et normalt link.*/
color:#1a0080;}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
ul.cssmenu li a {width:188px;}
ul.menu li {display:inline; }
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css" media="screen">
ul.cssmenu li a {width:198px;}
ul.cssmenu li {display:inline; }
</style>
<![endif]-->
Denne artikel er senest opdateret 30. sep. 2006.