[CSS] Height 100% in Firefox wil maar niet werken - Softwareontwikkeling

zondag 30 april 2006 17:29

Acties:

Topicstarter

Allereerst heb ik al een hoop literatuur doorgenomen over dit onderwerp, o.a.:
[rml][ CSS] Container 100% height geven[/rml]
[rml][ CSS] Height 100%?[/rml]
http://www.quirksmode.org/css/100percheight.html

Ik heb een simpele lay-out met een gecentreerd frame die ik 100% hoogte van de viewport wil geven of groter wil laten groeien indien er meer content in het frame staat (dus min-height in Firefox). De key om dit in CSS te laten werken is de html en body elementen 100% hoogte te geven.
Nu werkt dit in IE, maar in Firefox versie 1.5.0.2 wil dit frame in de hoogte maar niet tot de browser viewport doorgroeien in, zie http://home.quicknet.nl/qn/prive/jonkie.xl/ff.html
Ik begrijp het niet meer hopelijk snappen jullie het, hieronder de code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>TEST</title>
    <style type="text/css">
    html { height:100%; padding:0; margin:0; }
    div {
        padding:0;
        margin:0;
    }
    body 
    {
        position:relative;
        min-height:100%;
        padding:0;
        margin:0;
        text-align:center;   /* needed for IE5.x */
        background-color:black;
    }

    /* Containers */
    div#frame {
        margin:0 auto;
        text-align:left; /* needed for IE5.x */
        min-height:100%;
        width:807px;
        background-color:white;
    }
  </style>
  
  <!--[if lt IE 7]>
  <style type="text/css">
  body,div#frame { height: 100%; }
  </style>
  <![endif]-->
  </head>
<body>
<div id="frame">TEST</div>
</form>
</body>
</html>

It’s nice to be important but it’s more important to be nice

zondag 30 april 2006 17:35

Acties:

JHS

Splitting the thaum.

html, body { height: 100%; } doen

.

DM!

zondag 30 april 2006 17:59

Acties:

pjonk

Topicstarter

Thnx was er van overtuigd dat ik dat al geprobeerd had, maar body height: 100% werkt nu wel. Ik heb ook een gevoel dat de browser cache mij voor de gek gehouden heeft maar het zal wel.

It’s nice to be important but it’s more important to be nice

zondag 30 april 2006 18:45

Acties:

XiN-eViL

kzie-nie-veel

OK, toevallig was ik ook hierna opzoek, en dit werkt dus iig

.

Maar waar ik mee zit, ik heb tabellen in de body, en in ff maakt ie ze mooi, maar in ie zijn de heights zo verschrikkelijk fout

.

Link: http://home.xin-evil.com/the-cat/news.php
Wie o wie helpt

?

zondag 30 april 2006 19:02

Acties:

pjonk

Topicstarter

Als ik kijk naar je code zie ik dat je op TR en TD's dezelfde CSS class applied.

code:

1
2
3

<tr class="top">
  <td class="top" colspan="3">Logo enzo</td>
</tr>

Zoiezo dient de TR puur als een container element en hierop kan je AFAIK alleen background color properties toepassen. Ik zou dus eerst de CSS classes uit de TR weghalen.
Ik gok dat IE de hoogte verdubbelt omdat die in de TR en TD voorkomt. Firefox negeert waarschijnlijk de hoogte van de TR.
En als je het op de moderne manier wilt doen gebruik dan gewoon DIV containers ipv tabellen.

It’s nice to be important but it’s more important to be nice

zondag 30 april 2006 19:06

Acties:

Sappie

De Parasitaire Capaciteit!

pjonk schreef op zondag 30 april 2006 @ 17:59:
Thnx was er van overtuigd dat ik dat al geprobeerd had, maar body height: 100% werkt nu wel. Ik heb ook een gevoel dat de browser cache mij voor de gek gehouden heeft maar het zal wel.

Verder staat er een overbodige endtag in je testcase, wat ook wel eens voor problemen kan zorgen

Overigens laat ik de container (/frame) div die je gebruikt vaak weg en centreer ik gewoon de body op de manier waarop je nu de frame div centreert. Dit heeft ten eerste als voordeel dat er minder overbodige markup is. Bovendien is mijn ervaring dat de body, wanneer daarop min-height is toegepast, zich anders (beter) gedraagt dan een div oid. Dit merk je vooral wanneer je gebruik wilt maken van een footer die onderaan het venster staat en evt meebeweegt naar onderen wanneer de content 'hoger' is dan het venster.

offtopic:
jo, bel je van de week nog

Specs | Audioscrobbler

zondag 30 april 2006 19:24

Acties:

XiN-eViL

kzie-nie-veel

pjonk schreef op zondag 30 april 2006 @ 19:02:
Als ik kijk naar je code zie ik dat je op TR en TD's dezelfde CSS class applied.
code:
1
2
3
<tr class="top">
  <td class="top" colspan="3">Logo enzo</td>
</tr>
Zoiezo dient de TR puur als een container element en hierop kan je AFAIK alleen background color properties toepassen. Ik zou dus eerst de CSS classes uit de TR weghalen.
Ik gok dat IE de hoogte verdubbelt omdat die in de TR en TD voorkomt. Firefox negeert waarschijnlijk de hoogte van de TR.
En als je het op de moderne manier wilt doen gebruik dan gewoon DIV containers ipv tabellen.

Omg

Ik had een <tr class="middle"> en die height stond niet op 100%...... nu wekrt t iig

.