Ciao, ho fatto un sito con una mappa immagine ma mentre su firefox funziona perfettamente su IE7 i link non funzionano.

Posto il codice:




L'HTML

<!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=utf-8" />
<link href="styleweb.css" rel="stylesheet" type="text/css"/>
<title>portfolio-</title>

</head>

<body>
<div id="contenitore">
<h1><span> portfolio</span></h1>
<h2><span> index</span></h2>
<ul id="indexul">
<li id="home"> <span> home </span>
<li id="about"> <span> about </span>
<li id="portfolio"> <span> portfolio </span>
<li id="link"> <span> link </span>
<li id="contact"> <span> contact </span> [/list]


<span>this is the box</span> </p>
[img]img_web/templatehome.jpg[/img] </div>
</body>
</html>




IL CSS:


@charset "utf-8";
/* CSS Document */


body {
background-color:white no-repeat;
position:absolute;
color:black;
font-family:helvetica;
font-size: 18px;
font-weight:bold;
letter-spacing: 0px;
word-spacing: -1px;
text-align:left;
}



#contenitore {
position:relative;
width:1000px;
top: 0px;
left: 80px;
margin:auto;
background-repeat:no-repeat;
background-position:top left;

}


li {list-style-type: none;
}


ul#indexul {
position:relative;
}


ul#indexul li {
position:absolute;

}
ul#indexul li a {
display:block;
border: 1px solid blue;
width: 130px;
height: 30px;
}

li#home {
display:block;
height: 30px;
width: 160px;
top: 157px;
left: 20px;
border:1px solid red;
}

li#about {
display:block;
height: 30px;
width: 160px;
top: 152px;
left: 185px;
border:1px solid red;
}


li#portfolio {
display:block;
height: 30px;
width: 130px;
top: 150px;
left: 350px;
border:1px solid red;
}


li#link {height: 30px;
width: 130px;
top: 147px;
left: 490px;
border:1px solid red;
}


li#contact {height: 30px;
width: 130px;
top: 140px;
left: 630px;
border:1px solid red;
}


span {display:none;}




QUALCUNO SA COME RISOLVERE IL PROBLEMA?