Avatar billede musicchart.dk Nybegynder
01. august 2005 - 02:09 Der er 10 kommentarer og
1 løsning

Problemer med CSS - IE vs. FF

Hvis man fylder:
<div class="content_main"></div>
... ud med tekst, der er på flere linier end skærmens højde, så man skal scrolle - så følger højden af "Main" og "ContDiv" fint nok med i IE, men i FF stopper højden hvor scrollbaren begynder - ja det er ikke nemt at forklare, men se selv:

www.newmusicnet.dk/exp/css.asp

------------------------------------------

CSS FIL:

.main {
    position: relative;
        width: 520px;
        height: 100%;
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    text-align:left;    
}

.contDiv {
    position: relative;
        width: 500px;
      height: 100%;
    background-color: #e0e0e0;
    margin-top: 0px;
    margin-left: 10px;
    text-align:left;    
}

.indhold {
    position: relative;
        width: 350px;
    height: 100%;
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-left: 140px;
    padding-top: 0px;
    text-align:left;
    z-index: 1;   
}

.content_main{
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    padding-top: 140px;
}



HTML FIL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css.css">
</head>


<body>

<div class="main">
  <div class="contDiv">
    <div class="indhold">
      <div class="content_main">
      </div>
    </div>
  </div>
</div>

</body>
</html>


Jeg sidder og river mig i håret, og håber der er en venlig sjæl der kan hjælpe.

Hilsen,
Bjarke
Avatar billede olebole Juniormester
01. august 2005 - 02:35 #1
<ole>

For det første, disabler du en masse meget vigtig CSS i IE med den DTD. Prøv med denne DTD i stedet:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- og husk så også at sætte dine body- og documentElement-elementers højde til 100%. Ellers har dine andre elementer ikke noget at beregne højden udfra, når denne sættes i procent:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/mvh
</bole>
Avatar billede olebole Juniormester
01. august 2005 - 02:49 #2
- men hvorfor ikke bare bruge en tabel, da det jo netop er tabellens egenskaber, du skal bruge ... og forsøger at efterligne med elementer, der slet ikke er beregnet til det  :)
Avatar billede roenving Novice
01. august 2005 - 08:29 #3
-- ofte vil du opnå det du ønsker ved at bruge: height:100%;min-height:100%; ...
Avatar billede musicchart.dk Nybegynder
01. august 2005 - 12:18 #4
Så det er ikke muligt at opnå det jeg ønsker med CSS, jeg er nødt til at ty til tabeller igen?
Avatar billede olebole Juniormester
01. august 2005 - 12:24 #5
Jeg har lige ganske kort været inde på W3C for at rechecke, men bliver nødt til at bruge lidt mere tid, end jeg har i dette øjeblik (på vej ud af døren).
Faktisk ser det (for mig - og i dette øjeblik) ud til, at FF gør det rigtige - da de 100% øjensyligt skal beregnes udfra højden af browserens viewport. Det kom lidt bag på mig (også) ... så det vil jeg altså bruge lidt mere tid på, inden jeg konkluderer noget endeligt  :)
Avatar billede milandt Nybegynder
01. august 2005 - 13:35 #6
prøv at indsætte dette i bunden af dit content:

<div style="clear:both;height:0px;">&nbsp;</div>

jeg har kun kort set på din side, og det er slet ikke sikkert at dette har noget med det at gøre..
Avatar billede musicchart.dk Nybegynder
01. august 2005 - 21:00 #7
olebole >> er du kommet til en konklusion? :o)
Avatar billede olebole Juniormester
01. august 2005 - 21:50 #8
- nej, men det sker, inden solen står op igen  :)
Avatar billede musicchart.dk Nybegynder
01. august 2005 - 22:11 #9
Haha... jeg elsker natteravne ;o) ... nogen der sagde der skal sættes en ny kande kaffe over? - det tror jeg nok.
Avatar billede milandt Nybegynder
02. august 2005 - 09:41 #10
hvis du fjerner height:100% på .main, .contDiv, .indhold og .content og sætter height:100% på html, body så løser det dit problem
Avatar billede musicchart.dk Nybegynder
04. april 2006 - 21:48 #11
Lukker
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