[HTML / W3C] Tabel Hoogte 100% binnen IE - Softwareontwikkeling

donderdag 10 maart 2005 16:00

Acties:

Verwijderd

Topicstarter

Ik maak gebruik van de strict DTD van het W3C, dan wil ik vervolgens een pagina uitvullen over mijn gehele scherm binnen IE.. (binnen FireFox gaat het overigens wel goed).

De pagina heeft een tabel met twee rijen, de eerste rij is 23 pixels, de tweede rij, de rest van de pagina. Als ik dit nu in het brakke IE bekijk krijg ik een pagina van 100% + 23pixels.

Ik wil niet de expression methode gebruiken binnen mijn stylesheet omdat dit niet standaard is buiten IE.

Hieronder mijn code

code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">    

        <style type="text/css">
        html
        {
            height                      : 100%;
        }

        body
        {
            height                      : 100%;
            padding                     : 0px;
            margin                      : 0px;
        }

        #main
        {
            height                      : 100%;
            width                       : 100%;
        }
        
        #TitleBar
        {
            height                      : 23px;
            background-color            : #1961AB;
        }
        
        #ContentBar
        {
            height                      : 100%;
            background-color            : red;
        }
        </style>
    </head>
    
    <body>
    
        <table id="main" cellspacing="0">
            <tr id="TitleBar">
                <td>
                    TitleBar
                </td>
            </tr>
            <tr id="ContentBar">
                <td>
                    ContentBar
                </td>
            </tr>
        </table>
    </body>
</html>

donderdag 10 maart 2005 16:09

Acties:

gorgi_19

Kruimeltjes zijn weer op :9

Clientside HTML / Javascript hoort nog steeds in Webdesign & Graphics

>> Webdesign & Graphics

Digitaal onderwijsmateriaal, leermateriaal voor hbo

donderdag 10 maart 2005 16:13

Acties:

Rowanov

Kop eens wat anders...

Nogal logisch dat hij 100% + 23px wordt, als je nou gewoon je tabel 100% hoogte geeft ipv je content ding en de 100% bij je content weghaalt.
(Denk ook eens aan het feit dat tabellen niet bedoeld zijn voor opmaak)

[ Voor 10% gewijzigd door Rowanov op 10-03-2005 16:14 ]

donderdag 10 maart 2005 16:20

Acties:

Verwijderd

Topicstarter

Rowanov schreef op donderdag 10 maart 2005 @ 16:13:
Nogal logisch dat hij 100% + 23px wordt, als je nou gewoon je tabel 100% hoogte geeft ipv je content ding en de 100% bij je content weghaalt.
(Denk ook eens aan het feit dat tabellen niet bedoeld zijn voor opmaak)

Ik heb nu de height van de content uitgezet en de table stond al op 100%, maar nu blijft de titlebar niet meer op 23px maar deze wordt groter, helaas helpt important in de css ook niet.

code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">    

        <style type="text/css">
        html
        {
            height                      : 100%;
        }

        body
        {
            height                      : 100%;
            padding                     : 0px;
            margin                      : 0px;
        }

        #main
        {
            height                      : 100%;
            width                       : 100%;
        }
        
        #TitleBar
        {
            height                      : 23px;
            background-color            : #1961AB;
        }
        
        #ContentBar
        {
            background-color            : red;
        }
        </style>
    </head>
    
    <body>
    
        <table id="main" cellspacing="0">
            <tr id="TitleBar">
                <td>
                    TitleBar
                </td>
            </tr>
            <tr id="ContentBar">
                <td>
                    ContentBar
                </td>
            </tr>
        </table>
    </body>
</html>

donderdag 10 maart 2005 16:21

Acties:

Morrar

Mag ik vragen waarom je niet gewoon een <div id="Titlebar"> aanmaakt en die een kleurtje meegeeft? En dan de achtergrondkleur van "Contentbar" aan de <body> hangt?

Dus zo:

code:

<html>
  <head>
     <style>
     body { background-color: red; }
     div.titlebar { background-color: #1961AB; height: 23px;
     </style>
   </head>
   <body>
      <div id="Titlebar">title</div>
   </body>
</html>

[ Voor 69% gewijzigd door Morrar op 10-03-2005 16:23 ]

donderdag 10 maart 2005 16:29

Acties:

Verwijderd

Topicstarter

Morrar schreef op donderdag 10 maart 2005 @ 16:21:
Mag ik vragen waarom je niet gewoon een <div id="Titlebar"> aanmaakt en die een kleurtje meegeeft? En dan de achtergrondkleur van "Contentbar" aan de <body> hangt?

Dus zo:
code:
1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
     <style>
     body { background-color: red; }
     div.titlebar { background-color: #1961AB; height: 23px;
     </style>
   </head>
   <body>
      <div id="Titlebar">title</div>
   </body>
</html>

Dat zou wel leuk kunnen, goed idee overigens, maar ik had nu het probleem nog een beetje versimpeld, naast de titlebar heb ik ook een contextbar die geheel onder aan de pagina wordt geplaatst en die ook 23px hoog is, dat is helaas hier niet mee op te lossen denk ik.

donderdag 10 maart 2005 16:34

Acties:

GambitRS

w00t

Verwijderd schreef op donderdag 10 maart 2005 @ 16:29:
[...]

Dat zou wel leuk kunnen, goed idee overigens, maar ik had nu het probleem nog een beetje versimpeld, naast de titlebar heb ik ook een contextbar die geheel onder aan de pagina wordt geplaatst en die ook 23px hoog is, dat is helaas hier niet mee op te lossen denk ik.

Dat kan hetzelfde als met de top, alleen moet je dan geloof ik bottom: 0px; toevoegen. En position:absolute; zal waarschijnlijk ook nodig zijn

[ Voor 6% gewijzigd door GambitRS op 10-03-2005 16:39 ]

MechWarrior || Monsters Game

donderdag 10 maart 2005 16:34

Acties:

Rowanov

Kop eens wat anders...

Ik vraag me af of je zelf hebt gezocht, dat kan echt heel makkelijk; er was nog geen uur geleden een topic over:
uitlijn vraagje
Veel plezier met lezen.

donderdag 10 maart 2005 16:56

Acties:

Sappie

De Parasitaire Capaciteit!

Het blijft een irritant probleem als je het met tabellen oplost (absolute (23px) en relatieve (100%) waardes tegelijk). IE in Quirksmode rendert het wel op de manier die je zou willen, echter gebruikt het dan weer een ander box model, wat je ook weer niet wil hebben.

Verder zou ik dus zoals de rest al aangeeft geen tabellen gebruiken voor je layout.

Specs | Audioscrobbler

donderdag 10 maart 2005 17:11

Acties:

Verwijderd

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

samen met

code:

1
2
3

<body topmargin="0" marginwidth="0" marginheight="0">
<table height="100%">
...

does the trick.

[ Voor 25% gewijzigd door Verwijderd op 10-03-2005 17:12 ]

donderdag 10 maart 2005 20:41

Acties:

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op donderdag 10 maart 2005 @ 17:11:
code:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Das dus een ongeldig / onvolledig doctype en zorgt er daardoor voor dat IE in Quirksmode gaat..

[ Voor 13% gewijzigd door Sappie op 10-03-2005 20:48 ]

Specs | Audioscrobbler

vrijdag 11 maart 2005 09:17

Acties:

Verwijderd

Lijkt me niet, de specificatie van de DTD is naar mijn mening niet verplicht. De browser kijkt niet naar die DTD om te bepalen hoe het document er moet gaan uitzien. Bovendien komt de site met dergelijk doctype perfect door de W3C validator, ook zonder DTD.

vrijdag 11 maart 2005 09:25

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op vrijdag 11 maart 2005 @ 09:17:
Lijkt me niet, de specificatie van de DTD is naar mijn mening niet verplicht. De browser kijkt niet naar die DTD om te bepalen hoe het document er moet gaan uitzien. Bovendien komt de site met dergelijk doctype perfect door de W3C validator, ook zonder DTD.

Ik weet wel zeker van wel. IE(6) rendered alleen in strictmode als het document begint met een volledig DTD, dus inclusief URI. Bijna alle browsers gebruiken een vorm van doctype-switching.

Verwijderd schreef op donderdag 10 maart 2005 @ 17:11:
code:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
samen met
code:
1
2
3
<body topmargin="0" marginwidth="0" marginheight="0">
<table height="100%">
...
does the trick.

En heb je dat al geprobeerd te valideren? Geen van de attributen die je gebruikt zijn valid in HTML 4.0...

[ Voor 5% gewijzigd door crisp op 11-03-2005 09:27 ]

Intentionally left blank

vrijdag 11 maart 2005 11:25

Acties:

Verwijderd

Daar heb je wel een punt, de attributen in de body zijn niet valid volgens W3C. Ik probeer me zo veel mogelijk aan de regels te houden maar soms moet je afwijken blijkbaar. Ik ben eens benieuwd naar andere oplossingen voor het probleem.

Ik blijf echter tables verdedigen om de layout van een pagina te bepalen.

[ Voor 15% gewijzigd door Verwijderd op 11-03-2005 11:26 ]

vrijdag 11 maart 2005 11:33

Acties:

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op vrijdag 11 maart 2005 @ 11:25:
Daar heb je wel een punt, de attributen in de body zijn niet valid volgens W3C. Ik probeer me zo veel mogelijk aan de regels te houden maar soms moet je afwijken blijkbaar. Ik ben eens benieuwd naar andere oplossingen voor het probleem.

Ik weet niet precies wat het probleem is van de TS. Maar de enige layout die je volgens mij niet 100% goed krijgt in alle browsers dmv css is de layout met een footer die altijd onderaan de pagina staat, behalve als de content groter is dan de pagina. Kijk daarvoor maar eens hier:

[rml][ CSS] De perfecte CSS-only footer[/rml]

Andere layouts zijn, voor zover ik kan bedenken, allemaal op te lossen mbv CSS.

Specs | Audioscrobbler

vrijdag 11 maart 2005 12:43

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op vrijdag 11 maart 2005 @ 11:25:
Daar heb je wel een punt, de attributen in de body zijn niet valid volgens W3C. Ik probeer me zo veel mogelijk aan de regels te houden maar soms moet je afwijken blijkbaar. Ik ben eens benieuwd naar andere oplossingen voor het probleem.

Wat dacht je van CSS?

Cascading Stylesheet:

body {
  padding: 0;
  margin: 0;
}

Ik blijf echter tables verdedigen om de layout van een pagina te bepalen.

Waarom? Zie ook mijn opmerking hierboven: "Wat dacht je van CSS?"

Intentionally left blank