Ciao a tutti, un paio di giorni fa ho installato IE 7 e nel mio sito ho notato che l'immagine si sovrappone al testo, cosa che nella versione precedente non succedeva...spero sappiate trovare l'arcano!!! vi allego l'immagine della pagina incriminata.
Ecco il codice:
<?xml version="1.0"?>
<!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" xml:lang="it">
<head>
<title>Device Independence</title>
<link href="stampa.css" media="print" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script language="JavaScript">
<!--
if (document.all){ // Explorer
document.write("<link rel='stylesheet' href='style.css' type='text/css'>");
}
else if (document.getElementById){ //Mozzilla
document.write("<link rel='stylesheet' href='style1.css' type='text/css'>");
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="menubottom">
Concetti relativi all' utente |
Principi d'autore |
Indipendenza dai dispositivi e contenuti
</div>
<div id="menu">
<div id="menu1">
<h2>Devicce Independence</h2>
<div>
<ul>
[*]Homepage
[*]Obiettivi [*]Principi[*]Prospettive di consegna[*]Scrivici[*]Mappa del sito
[/list]
<u>[img]img/doc.png[/img]Scarica il documento W3C</u>
</p>
</div>
</div>
</div>
<div id="content">
<p style="text-align:left;padding-top:0px;font-size:10;">Ti trovi in: Principi>Concetti relativi all' utente</p>
<div class="scroll">
Il seguente diagramma introduce la chiave dei concetti relativi all'utente, che sono quindi definiti e espliati nel testo susseguente.
</p>
[img]grafico.jpg[/img]
Vogliamo permettere agli utenti di percepire e di interagire col Web usando molti tipi di dispositivi, o piu' generalmente, attraverso molti tipi di meccanismi di accesso.</p>
I concetti principali per gli utenti sono i seguenti (clicca su i link per visualizzare la pagina):</p>
<ul>[*] <u>-Esperienza utente</u>[*] <u>-Dispositivi</u>[*] <u>-Meccanismi d'accesso</u>[*] <u>-Unita' di percezione</u>[*] <u>-Uniform Resource Identifier</u>[*] <u>-Pagina Web</u>[*] <u>-Functional user experience</u>[*] <u>-Armonizzare la user experience</u>[/list]
</div>
</div>
<div id="menubottom">
Concetti relativi all' utente |
Principi d'autore |
Indipendenza dai dispositivi e contenuti
</div>
<div id="footer">
Sito realizzato da Andrea Chidini.</p>
</div>
</div>
</body>
</html>
Il CSS:
body {
margin : 0;
padding-left:15%;
font-family : Verdana, arial, sans-serif;
color : #003399;
background: #000000;
text-align : left;
}
#img1 {
float : left;
}
img {
position : relative;
float:left;
border : none;
}
div.scroll {
height : 400px;
width : 650px;
overflow : auto;
border : 0;
padding : 4px;
text-align : justify;
}
h4 {
color : #ff3300;
font-size : 10px;
}
h2, h3 {
color : #ff3300;
font-weight : bold;
font-size : 14px;
letter-spacing : 3px;
}
h1 {
color : #ff3300;
font-weight : bold;
font-size : 16px;
letter-spacing : 3px;
text-transform : uppercase;
}
a:link {
color : #ff3300;
text-decoration : none;
font-size : 12px;
}
a:visited {
color : #000000;
text-decoration : none;
font-size : 12px;
}
a:hover {
color : #003399;
text-decoration : none;
font-size : 12px;
border : none;
}
div#container {
width : 900px;
height : auto;
margin : 0 auto;
border : 0;
text-align : center;
position : relative;
background-color : #ffffff;
}
div#logo {
height : 150px;
background-image : url(logoelearning.jpg);
}
div#menu {
background-color : #FFFFFF;
width : 230px;
height : auto;
padding : 0;
margin : 0;
float : right;
color : #f7dd6b;
font-size : 14px;
}
div#content {
margin : 0;
padding : 8px;
width : 640px;
height :500px;
font-size : 14px;
left : auto;
top : auto;
background-color : #FFFFFF;
text-align: justify;
}
div#footer {
font-size : 10px;
padding : 0;
margin : 0;
clear : both;
background-color : #E0E0E0;
}
li, ul {
list-style : none;
margin : 0;
padding : 0;
}
#menu1 {
width : 200px;
margin : 5px;
}
#menu1 li a {
height : 32px;
height : 24px;
text-decoration : none;
}
#menu1 li a:link, #menu1 li a:visited {
display : block;
background : url(menu14.gif);
padding : 8px 0 0 10px;
}
#menu1 li a:hover {
background : url(menu14.gif) 0 -32px;
padding : 8px 0 0 10px;
color:#ffffcc;
}
#menubottom {
width: auto;
margin:auto;
text-align: center;
font-weight: bold;
padding: 5px;
word-spacing: 6px;
border-bottom: 1px solid #000000;
background-color : #efe7f2 ;
border-top: 1px solid #000000;
}
Ho allegato l'immagine
Rispondi quotando
