div laterale fisso "che va a strattoni con ie"

**spidermassi** · 12-10-2006, 00:27

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:



<!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" />


</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

**spidermassi** · 12-10-2006, 18:59

sono riuscito a risolvere il problema con Ie parzialmente ma lo script smoothscroll a cui ho associato la pagina con Ie non funziona più (con FF funge)

codice pagina:

<!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>Demo: fixed box for IE gte 6</title>

<link href="css/fixed4all.css" rel="stylesheet" type="text/css">

<script src="js/smoothscroll.js" type="text/javascript"></script>

</head>
<body>

<div id="content">
<a name="top"></a>
[img]layout/top.jpg[/img]

<div class="box">
<h1>home</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="p1">concerti</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="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">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>

<div id="fixedbox">

The quick brown fox would like to jump over some lazy dogs but is stuck in this box.would like to jump over some lazy dogs but is stuck in this box</p>

<ul class="icon">
[*]Home

[*]Concerti

[*]Disco

[*]Galleria Foto

[*]Info

[*]Prenota
[/list]
</div>

</body></html>

e css:

body
{
margin: 0;
padding: 0em 1em 1em 14em;
color: #000;
background: #60B0B0;
}

#content {
width:600px;
background:white;
color:black;
margin-left: 100px;
}

.box{
width: 540px;
left: 30px;
margin-top: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left: 30px;
}

p {
margin-top: 2px;
color: #000000;
text-align: justify;
}

.li{
left: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left: 30px;

}

ul.icon,ul.icon li{list-style: none;margin: 0;padding: 0}
ul.icon{width:15em}
ul.icon li{padding: 6px 0 6px 14px;line-height: 1.4em;
background: url(../images/green_arrow.png) no-repeat 0 0.7em;
margin: -6px 0 0
}

h1 {
font-size: 15px;
color: #FF0066;
font-family: 'Trebuchet MS', Trebuchet, Arial, Sans-serif;
border-bottom: 1px dotted #CCCCCC;
font-style: italic;
margin-top: 15px;
}

span h1 {
border-bottom: 1px dashed #ccc;
}

div#fixedbox
{
position: absolute;
top: 1em;
left: 1em;
width: 12em;
background-color: #FFFFFF;
}
div#fixedbox p
{
margin: 0;
padding: 1em;
border: 1px solid #000;
color: #000;
background: #eee;
}
@media screen
{
div#fixedbox
{
position: fixed;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0 1em 0 14em;
font-size: 100%;
}
* html div#fixedbox
{
position: absolute;
}
/* All done. */
}

il codice l'ho preso da qua..
http://tagsoup.com/cookbook/css/fixed/legacy/

il codice js è quello proposto in questo articolo: http://javascript.html.it/articoli/l...lling-morbido/

come posso fare? penso sia la parte finale del css che però se rimuovo mi fa andare il div fisso
su e giù...

**Another-Life** · 12-10-2006, 21:09

Come hai risolto il problema

....non riscrivere ogni volta tutto il codice Css piu quello Xhtml,cerca di scrivere una sintesi della soluzione che per il momento hai trovato.

**spidermassi** · 12-10-2006, 22:02

me ne sono reso conto dopo che la parte del body potevo tralasciarla nel secondo post... sorry

fatto sta che come ho detto il problema l'ho risolto in parte visto che il js su IE non funge come pure un div (non messo nel posto) che include una mappa di google che utilizzando js non mi compare sul browser di zio Bill.
qualcuno ha un'idea?

**Another-Life** · 13-10-2006, 10:26

Chiaro....pero per il momento qual'è la parte che hai risolto??

**spidermassi** · 13-10-2006, 11:03

la parte che ho risolto e' che lo script smooth-scrolling funge su FF mentre su IE e' come se non ci fosse. penso sia dovuto a qualche imperfezione nel foglio di stile. lo scrollin da solo funge, il div fisso da solo funge ma mettendoli assieme devo aver fatto qualche paciugo e non riesco a venirne a capo.

**spidermassi** · 14-10-2006, 12:35

..up

**spidermassi** · 15-10-2006, 01:41

ho appena visto che con IE 7 funge. direi quindi che deve esserci una specie di conflitto tra JS e CSS che fa girare le palle a IE6. qualcuno ha un'idea di cosa possa essere?

**Another-Life** · 15-10-2006, 10:56

Provo a ragionarci su dato che per il momento di javascript non ne so molto.Una domanda:

La sezione div#fixedbox deve essere perforza dichiarata fissa(tramite la proprietà position: fixed

??
Puo darsi che il problema risieda proprio in questa dichiarazione...

**spidermassi** · 17-10-2006, 10:48

direi di si xche' e' il div che deve essere fisso a sx della pagina mentre div content e' quello scorrevole.

Discussione: div laterale fisso "che va a strattoni con ie"

Strumenti discussione

Ricerca discussione

Visualizza

div laterale fisso "che va a strattoni con ie"

ora e fisso ma non mi funge lo javascript...

Permessi di invio