Avatar billede hoppe11 Nybegynder
21. december 2008 - 13:52 Der er 19 kommentarer og
1 løsning

height 100% i IE og FF

Jeg kan på en side ikke få height til at være ens i både IE og FF.. Den står til height:100%, men i FF er den kun på højde med en linje

Det er den hvide kasse der er tale om hvori der står "tst"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<style type="text/css">
* {
    font-family:tahoma;
    font-size:11px;
    color:#333333;
}

body {
    background:#999999 url(foo) fixed;
    margin:0px;
    height:100%;
    width:100%;
}

div.topfix {
    position:fixed;
    top:0px;
    left:0px;
}

* html div.topfix {
    position:absolute;
    top:expression(eval(document.compatMode == 'CSS1Compat') ? documentElement.scrollTop:document.body.scrollTop);
    left:0px;
}

form {
    display:inline;
}

table {
    border-collapse:collapse;
}

td {
    padding:0px;
    vertical-align:top;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div class="topfix" style="background:#ff0000; width:1000px; height:128px">



</div>

<table style="width:1001px; height:100%; border-right:1px solid #001D37; background:#FFFFFF">
  <tr>
    <td style="padding-top:128px">


tst
    </td>
    <td style="padding-top:128px; width:200px">
    </td>
  </tr>
</table>


</body>

</html>
Avatar billede lordnelson Seniormester
21. december 2008 - 13:58 #1
Hej

100% i højden er ikke en godkendt værdi i html
så når denne linje står øverst i scriptet ser de om
alle koder er gyldige:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Og når 100% i højden ikke er gyldig duer koden altså ikke
Du kan selv afprøve det med at fjerne ovenstående linje (linjer)


LN
Avatar billede keysersoze Ekspert
21. december 2008 - 14:21 #2
sludder - selvfølgelig er 100% valid. Det vil også være en rigtig dårlig idé nogensinde at fjerne doctype - selv for testens skyld.

indsæt følgende;

html { height: 100%; }
Avatar billede dkfire Nybegynder
21. december 2008 - 14:40 #3
Denne her linje får du dog ikke meget ud af, det her intet med css at gøre:
top:expression(eval(document.compatMode == 'CSS1Compat') ? documentElement.scrollTop:document.body.scrollTop);
Avatar billede hoppe11 Nybegynder
21. december 2008 - 15:04 #4
key > smid et svar og tak for hjælpen :)

dkfire > det gør jeg nu alligevel.. den laver position fixed i IE5 og IE6 :)
Avatar billede olebole Juniormester
21. december 2008 - 15:55 #5
<ole>

hoppe11 >> Det er slet ikke så tosset at lytte efter råd - selvom man ikke kan lide dem  ;o)

At bruge expressions i CSS er noget af det mest uhensigtsmæssige, man kan gøre ... for nu at bruge et - i dén forbindelse - overdådigt pænt sprog. Det er så dårligt performende, at selv Microsoft - hvis browser er den eneste på markedet, der understøtter denne feature - advarer mod brugen.

- og så er det aldrig fikst, at basere sin kode på sær, ustandardiseret opførsel (læs: bugs) hos enkelte browsere. Derfor ville jeg helt sikkert undgå selectors som:
    * html div.topfix {

/mvh
</bole>
Avatar billede hoppe11 Nybegynder
21. december 2008 - 16:35 #6
jamen det lyder som om du lige har en løsning ved hånden, Ole? :p
Avatar billede olebole Juniormester
21. december 2008 - 17:25 #7
Ja, den bedste løsning, jeg kan foreslå, er at indrette designet efter den virkelighed, der til enhver tid er gældende - hvorfor jeg da også selv forsøger at undgå ting, der 'hænger fast' ved scrolling, indtil IE6 er udfaset.
Hvis det ikke kan lade sig gøre, scripter jeg mig ud af det i stedet for at bruge CSS-hacks med tvivlsom levetid. Du kunne jo f.eks. gøre noget à la:

window.onscroll = function(){
    var css = document.getElementById("topfix").style;
    if (document.compatMode=='CSS1Compat') css.top = documentElement.scrollTop + "px";
    else css.top = document.body.scrollTop + "px";
}

<div id="topfix" style="background:#ff0000; width:1000px; height:128px">
Avatar billede olebole Juniormester
21. december 2008 - 17:26 #8
Ups ... og det er selvfølgelig:
    if (document.compatMode=='CSS1Compat') css.top = document.documentElement.scrollTop + "px";
Avatar billede olebole Juniormester
21. december 2008 - 17:28 #9
I øvrigt kan jeg slet ikke se, hvordan den pågældende expression skulle kunne virke. Den bør i hvertfald ikke kunne virke uden 'px' på værdierne ... og IE plejer heller ikke at ville acceptere den slags  =)
Avatar billede keysersoze Ekspert
21. december 2008 - 17:41 #10
et svar :)
Avatar billede hoppe11 Nybegynder
21. december 2008 - 23:48 #11
Kan godt følge dig, men synes heller ikke det gør noget man ind imellem bryder reglerne. Funktionalitet frem for alt dog - helst ;)

Dit script virker ikke i IE.. Object required
Avatar billede olebole Juniormester
22. december 2008 - 00:00 #12
Du bryder ikke nogen regler ... du skyder bare dig selv i forden  =)

"Dit script virker ikke i IE.. Object required" >> Så må du jo prøve at gøre, som jeg skriver  ;o)
Avatar billede olebole Juniormester
22. december 2008 - 00:00 #13
forden -> foden
Avatar billede hoppe11 Nybegynder
22. december 2008 - 11:41 #14
jeg har copy/pasted det ind her

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<style type="text/css">
* {
    font-family:tahoma;
    font-size:11px;
    color:#333333;
}

html {
    height:100%;
}

body {
    background:#999999 url(foo) fixed;
    margin:0px;
    height:100%;
}

form {
    display:inline;
}

table {
    border-collapse:collapse;
}

td {
    padding:0px;
    vertical-align:top;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>

<script language="javascript" type="text/javascript">
window.onscroll = function(){
    var css = document.getElementById("topfix").style;
    if (document.compatMode=='CSS1Compat') css.top = document.documentElement.scrollTop + "px";
    else css.top = document.body.scrollTop + "px";
}
</script>

<body>

<div class="topfix" style="background:#ff0000; width:1000px; height:128px"></div>

<table style="width:1001px; height:100%; border-right:1px solid #001D37; background:#FFFFFF">
  <tr>
    <td style="padding-top:128px">


tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>
tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>tst<br>
    </td>
    <td style="padding-top:128px; width:200px">
    </td>
  </tr>
</table>


</body>

</html>
Avatar billede hoppe11 Nybegynder
22. december 2008 - 11:42 #15
Avatar billede hoppe11 Nybegynder
22. december 2008 - 11:44 #16
i det jeg har kopieret ind fik jeg ikke lige ændret id="topfix", men det er rettet på linket ovenfor :)
Avatar billede hoppe11 Nybegynder
22. december 2008 - 11:46 #17
nu virker det, men det hopper i firefox når man scroller
Avatar billede olebole Juniormester
26. december 2008 - 17:11 #18
Jamen både IE7 og FF forstår jo 'position:fixed', så du skal kun bruge det i IE6 - hvor det i øvrigt altid vil 'hoppe'  =)
Avatar billede hoppe11 Nybegynder
28. december 2008 - 00:26 #19
hvordan laver man så en if-statement der kun kører javascriptet hvis det er IE6< ?
Avatar billede olebole Juniormester
28. december 2008 - 11:29 #20
Du kunne bruge conditional comments:

<!--[if lt IE 7]>
  <script type="text/javascript">
      alert("Denne alert ses kun i IE6 og mindre")
  </script>
<![endif]-->
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester