ciao,
ho una pagina con un div fisso laterale e una parte che scrolla.
su FF tutto bene ma con IE la parte fissa si muove un po come se si incastrasse contro qualcosa. ho visto un post simile a questo ma non ho trovato una risposta
(questo)
il codice della mia pagina è questo:
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/fix-ie.css" />
<![endif]>
<![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/fix-ie.css" />
<![endif]>
<![endif]-->
</head>
<body>
<div id="fixed">
<ul class="navigation">
[*]Home
[*]Concerti
[*]Disco
[*]Galleria Foto
[*]Info
[*]Prenota
[/list]
</div>
<div id="container">
<a name="top"></a>
<div>
[img]layout/top.jpg[/img]
<div class="box">
<h1>Concerti</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
</div>
</div>
<div class="box">
<a name="p1"></a><h1>Concerti</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
</div>
<div class="box">
<h1><a name="p2">Disco</a></h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
</div>
<div class="box">
<h1><a name="p3">Galleria Foto</a></h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
</div>
<div class="box">
<h1><a name="p4">Info</a></h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
</div>
</div>
</body>
</html>
mentre il mio foglio di stile è questo:
body {
padding:0;
margin:0 0 0 0px;
color: #000;
background: #60B0B0;
font-family: 'Trebuchet MS', helvetica, sans-serif;
line-height: 15px;
}
#container {
width:600px;
background:white;
color:black;
margin-left: 300px;
}
#fixed {
position:absolute;
left:40px;
top:55px;
width:280px;
height:500px;
}
body > div#fixed { position: fixed; }
.box{
width: 540px;
left: 30px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
il foglio fix-ie.css è:
div#fixed {top: expression( ( 55 + ( ignoreMe = document.body.scrollTop ) ) + 'px' );}
se provate la pagina con IE vedrete cosa intendo.
come posso risolvere la cosa?
ciao
p.s. la parte prima di DOCTYPE ecc... se la metto prima della chiusura del tag head non mi fissa il tag fisso con IE

Rispondi quotando