Firefox scrollbar újraméretezési hiba
Sziasztok!
Még új vagyok a fórumon.
Dolgozom a weboldalamon elég jó ideje.
Beleütköztem egy hibába.
Ezért az oldalamból csináltam egy nagyon lebutított sablont, hogy tudjak kisérletezni.
Az oldalnak azaz alapja, hogy van két div, felül, alul.
A felső a menü, ahol "target"-l változtatom hogy mi kerüljün az alsó frameben.
Az a gondom, hogy van a három menü: One, Two, Three
Ezek különböző "hosszúságu" oldalak.
Alapba a "one.html" jelenik meg az alsó iframe-be, s természetesen a scrollbar is akkora, amekkorának lennie kell.
De, amit rákattintok a "Three"-re, mivel több a szöveg benne, így a scrollbar is megnő...de ha megint a "One"-ra illetve a "Two"-ra kattintok, akkor scrollbar nagysága megmarad, s túltudom görgeti a rövidebb szöveget.
Szóval értitek, mintha a scrollbar nagysága nem "resetelődne"
Egyébként IE8/Chrome/Safari-ban minden rendben, csak Firefoxban/Operában -ban vannak a gondjaim.
Tehát, ha bejön a példa oldalam, akkor menjetek végig "One" "Two" "Three"-n, majd újra menjetek a "One"-ra Firefoxban, s nézzetek a scrollbarra...
http://nightray-music.com/s/
Szóval ez miért van?
Kérlek segítsetek!
CSS:
"#menu {font-size: 16px; word-break: normal; font-family: 'Futura-Medium', 'Futura', 'Trebuchet MS', sans-serif; font-weight: bold;
margin-top: 40px; /* standard */
margin-top: 33px\9; /* IE 8 and below */
}
#menu a {
text-decoration: none;
background-color: black;
color:#D3D3D3; /*alapba ilyen szinuek a menuk*/
padding: 5px 10px;
}
#menu li {
display: inline; /*felsorolast vizszintesbe rendezi*/
}
#menu a:hover {
background-color: white;
color:black;
/* border-top: 3px solid white; Igy meg vonalak lesznek
border-bottom: 3px solid white;*/
}
#middlebox{
position: static;
width: 100%;
height: auto;
margin-top: 88px;
background-color:green;
color: black;
padding-top: 40px; /* standard */
padding-top: 113px\9; /* IE 8 and below */
top:1200px;
display: block;
}
nav{
text-align: center;
margin-bottom: 500px;
margin-top: 12px;
background: white;
font-size: 24px; word-break: normal; font-family: 'Futura-Medium', 'Futura', 'Trebuchet MS', sans-serif; color: black;font-weight:bolder;
line-height: 18px;
display: inline;
}
#maintop{
top:-1px;
position: fixed;
background: red;
text-align: center;
margin: 0 auto;
height: 120px;
width: 1024px;
}
#maintoplocate{
position:fixed;
width:100%;
top:-12px;
height: 131px;
background: red;
}
iframe {width: 100%; display: block;}
html, body, div, iframe { margin:0; padding:0; }"
■ Még új vagyok a fórumon.
Dolgozom a weboldalamon elég jó ideje.
Beleütköztem egy hibába.
Ezért az oldalamból csináltam egy nagyon lebutított sablont, hogy tudjak kisérletezni.
Az oldalnak azaz alapja, hogy van két div, felül, alul.
A felső a menü, ahol "target"-l változtatom hogy mi kerüljün az alsó frameben.
Az a gondom, hogy van a három menü: One, Two, Three
Ezek különböző "hosszúságu" oldalak.
Alapba a "one.html" jelenik meg az alsó iframe-be, s természetesen a scrollbar is akkora, amekkorának lennie kell.
De, amit rákattintok a "Three"-re, mivel több a szöveg benne, így a scrollbar is megnő...de ha megint a "One"-ra illetve a "Two"-ra kattintok, akkor scrollbar nagysága megmarad, s túltudom görgeti a rövidebb szöveget.
Szóval értitek, mintha a scrollbar nagysága nem "resetelődne"
Egyébként IE8/Chrome/Safari-ban minden rendben, csak Firefoxban/Operában -ban vannak a gondjaim.
Tehát, ha bejön a példa oldalam, akkor menjetek végig "One" "Two" "Three"-n, majd újra menjetek a "One"-ra Firefoxban, s nézzetek a scrollbarra...
http://nightray-music.com/s/
Szóval ez miért van?
Kérlek segítsetek!
CSS:
"#menu {font-size: 16px; word-break: normal; font-family: 'Futura-Medium', 'Futura', 'Trebuchet MS', sans-serif; font-weight: bold;
margin-top: 40px; /* standard */
margin-top: 33px\9; /* IE 8 and below */
}
#menu a {
text-decoration: none;
background-color: black;
color:#D3D3D3; /*alapba ilyen szinuek a menuk*/
padding: 5px 10px;
}
#menu li {
display: inline; /*felsorolast vizszintesbe rendezi*/
}
#menu a:hover {
background-color: white;
color:black;
/* border-top: 3px solid white; Igy meg vonalak lesznek
border-bottom: 3px solid white;*/
}
#middlebox{
position: static;
width: 100%;
height: auto;
margin-top: 88px;
background-color:green;
color: black;
padding-top: 40px; /* standard */
padding-top: 113px\9; /* IE 8 and below */
top:1200px;
display: block;
}
nav{
text-align: center;
margin-bottom: 500px;
margin-top: 12px;
background: white;
font-size: 24px; word-break: normal; font-family: 'Futura-Medium', 'Futura', 'Trebuchet MS', sans-serif; color: black;font-weight:bolder;
line-height: 18px;
display: inline;
}
#maintop{
top:-1px;
position: fixed;
background: red;
text-align: center;
margin: 0 auto;
height: 120px;
width: 1024px;
}
#maintoplocate{
position:fixed;
width:100%;
top:-12px;
height: 131px;
background: red;
}
iframe {width: 100%; display: block;}
html, body, div, iframe { margin:0; padding:0; }"
Hogyan?
Légyszíves a vonatkozó HTML-t és a fontos CSS-részeket idézd, ne kelljen kiégetnünk a szemünket a rengeteg sallanggal. És használd a kódszínezőt, azért van, hogy el is tudjuk olvasni azt, ami neked egy paste volt.
A kérdésedre előzetes válaszom:
Biztos, hogy csak
iframe-mel lehet megoldani a feladatot? Szerintem lesz rá jobb megoldás is.válasz
iframe helyett, hogy lehetne megoldani?
Nem nyert
iframe helyett több megoldás is van, attól is függ, statikus-e az oldal, lehet esetleg ajax is (bár keresők miatt nem ajánlom), stb. El kell határoznod magad valamerre, valamint akarnod kell megoldani, mert helyetted senki sem fogja (legalábbis ingyen nem).
Köszi!:)
Szóval a HTML kód:
HTML:
"<script type="text/javascript">
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome and above
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome and above
}
}
window.onload=sizeFrame;
</script>
</head>
<body onload ="sizeFrame('myFrame');"></body>
<div id="maintoplocate"></div>
<div id="maintop">
<nav>
<ul id="menu" onload="sizeFrame('myFrame');">
<li><a href="one.html" target="myFrame">ONE</a></li>
<li><a href="two.html" target="myFrame">TWO</a></li>
<li><a href="three.html" target="myFrame">THREE</a></li>
</ul>
</nav>
</div>
<!-- ITT LESZ VALAHOL A HIBA, vagy a Script-ben -->
<div id="middlebox">
<iframe id="myFrame" name="myFrame" src="one.html" onload="sizeFrame('myFrame'); scroll(0,0);"></iframe>
</div>
</body>
</html>"
[colorer=html]
Bár már megoldottad, mégis úgy szebb lenne.
A sizeFrame nevu csoda
Ja es a html markupot is!
sizeFrame()
Ha megfigyeled, akkor ha csak az első linkre kattintgatsz, akkor is egyre csak növekszik az iframe mérete emiatt. Jelen felállásban mindig a body méretét kellene figyelni, nem a contentDocumentét, és akkor jó lenne.
De valóban lehet, hogy praktikusabb megoldásra jutnál, ha van lehetőséged szerveroldalon, dinamikusan előállítani a tartalmat és jobban átgondolnád ezt a dokumentumszerkezetet.
Köszönöm!
Megnézem a html markup-t meg ezt a sizeFrame függvényt.:)
Nem rossz...
Sikerült!!:)
http://www.nightray-music.com/s2
Most ilyen lett a script:
"<script type="text/javascript">
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentWindow.document.body.scrollHeight+40; //FF, Opera
F.height = F.contentDocument.documentElement.scrollHeight+30; //Safari
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //
}
}
window.onload=sizeFrame;
</script>"