[HTML/CSS] Table height gedoe * - Softwareontwikkeling

vrijdag 11 januari 2008 10:45

Acties:

Topicstarter

Hey gasten!

Ik ben aan het klooien met tabellen in IE met de doctype enzo. Dat geneuzel kent iedereen wel, maar ik kwam er niet uit door andere topics door te nemen. Dit is het geval:
Ik ben bezig met een website die tabellen gebruikt. Een tabel met 3 TD's: Article - Splitter - Particle
Nu draait het om de 3e, de meest rechtse (particle). Deze TD bevat een nieuwe TABLE, met 5 rows. 4 van de 5 rows hebben een vaste hoogte, één (de omschrijving) zou de rest van de ruimte (hoogte) in moeten nemen, maar dit gebeurt in Internet Explorer niet, omdat deze niet in quirksmode staat.

Pagina waar het over gaat:
http://kipusoep.yournewspage.com/Post/24667

Simpeler voorbeeld:
FaNtJuH in "\[HTML/CSS] Table height gedoe deel 999"

Het gaat om de rechterkant van de tabel, het stukje over "Zwaar spel".

Dit is de huidige DTD:

HTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Met deze 'quirksmode' DTD werkt het wel, maar dan werkt "margin: 0px auto;" niet en de knoppen bovenaan worden dan ook veel te klein.

HTML:

1
2
3

<!-- Quirksmode in IE --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Wie kan mij vertellen hoe ik met de XHTML 1.0 Strict DTD dit toch voor elkaar kan krijgen in Internet Explorer (7)?

[ Voor 23% gewijzigd door plofkip op 13-01-2008 21:10 ]

vrijdag 11 januari 2008 11:03

Acties:

moozzuzz

Waarom XHTML 1.0 Strict DTD en <?xml version="1.0" encoding="utf-8"?> in één document?

vrijdag 11 januari 2008 11:19

Acties:

TeeDee

CQB 241

Afaik zorgt

XML:

1	<?xml version="1.0" encoding="utf-8"?>

er al voor dat IE in quirks staat.

Verder is het wel handig om een iets makkelijker te doorgronden testcase online geplaatst wordt.

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 11 januari 2008 11:23

Acties:

disjfa

be

HTML:

1	<body id="body">

Zegt genoeg. Leer gewoon eerst een keer html. Wees zeker van waar je mee bezig bent.

In je ts staan 20 verwijzingen naar dat je mischien wel niet weet waar je bij toeval mee bezig kan zijn. Niemand begrijpt wat je dan bedoelt natuurlijk.

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 11 januari 2008 12:40

Acties:

plofkip

Topicstarter

TeeDee schreef op vrijdag 11 januari 2008 @ 11:19:
Verder is het wel handig om een iets makkelijker te doorgronden testcase online geplaatst wordt.

Ok daar heb je gelijk in, zal ik zo doen...

disjfa schreef op vrijdag 11 januari 2008 @ 11:23:
HTML:
1
<body id="body">
Zegt genoeg. Leer gewoon eerst een keer html. Wees zeker van waar je mee bezig bent.

In je ts staan 20 verwijzingen naar dat je mischien wel niet weet waar je bij toeval mee bezig kan zijn. Niemand begrijpt wat je dan bedoelt natuurlijk.

Sorry hoor....

Hoe kun je in een wereld met zoveel verschillende browsers en DTD's zeker zijn van wat je doet?

Heb de ts aangepast...

[ Voor 7% gewijzigd door plofkip op 11-01-2008 13:06 ]

zondag 13 januari 2008 21:10

Acties:

plofkip

Topicstarter

Een simpeler voorbeeld zoals beloofd:

HTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        html, body {
          height:100%;
          width: 100%;
          margin: 0;
          padding: 0;
          border: none;
       }
    </style>
</head>
<body>
    <table style="height: 100%;">
        <tr>
            <td>
                <table style="background: yellow;">
                    <tr>
                        <td>
                            Blaa<br />Blaa<br />Blaa<br />Blaa<br />Blaa<br />Blaa<br />Blaa<br />Blaa<br />Blaa
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="height: 100%;">
                    <tr>
                        <td style="width: 19px; background: red; height: 100%;">
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="height: 100%;">
                    <tr>
                        <td style="background: gray; height: 60px;">
                            Blaaaaaaaat<br />bla
                        </td>
                    </tr>
                    <tr>
                        <td style="background: blue; height: 100%;">
                            Tesst<br />a
                        </td>
                    <!-- Deze TD moet de overgebleven ruimte op vullen -->
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

[ Voor 4% gewijzigd door plofkip op 13-01-2008 21:13 ]

zondag 13 januari 2008 21:15

Acties:

disjfa

be

Waarom gebruik je tabellen?

En je zegt tegen je tabellen dat ze een hoogte van 100% moeten krijgen, de td waar ze in staan heeft geen hoogte, wat is 100% van niets

Maar, waarom tabellen

[ Voor 6% gewijzigd door disjfa op 13-01-2008 21:16 ]

disjfa - disj·fa (meneer)
disjfa.nl

zondag 13 januari 2008 23:13

Acties:

plofkip

Topicstarter

disjfa schreef op zondag 13 januari 2008 @ 21:15:
Waarom gebruik je tabellen?

En je zegt tegen je tabellen dat ze een hoogte van 100% moeten krijgen, de td waar ze in staan heeft geen hoogte, wat is 100% van niets Maar, waarom tabellen

Die parent TD is automatisch al 100%.
Waarom tabellen? Tjah.. Ipv van die table van de post zelf kan ik DIV's ipv de TR's gebruiken, maar als ik een div geen waarde geef, neemt ie dan de overige ruimte in?

En ik ben niet zo goed met DIV's naast elkaar krijgen... Waarschijnlijk met float property

Ik krijg dat nooit goed

(want er zijn TR's waar 2 TD's in zitten: de bron links en rechts een link naar Comments bijvoorbeeld)

[ Voor 18% gewijzigd door plofkip op 13-01-2008 23:14 ]

maandag 14 januari 2008 23:06

Acties:

plofkip

Topicstarter

^bump^

dinsdag 15 januari 2008 08:20

Acties:

f.v.b

In je voorbeeld pagina krijg ik de hoogte nog wel goed door een extra height: 100% toe te voegen op de td. In onderstaande snippet gaat het om de eerste regel. Daar staat de extra height:

code:

            <td style="height: 100%;">
                <table style="height: 100%;">
                    <tr>
                        <td style="background: gray; height: 60px;">
                            Blaaaaaaaat<br />bla
                        </td>
                    </tr>

In je kipusoep pagina krijg ik het echter niet aan de praat... Maar daar kan je een meer standaard CSS oplossing gebruiken die hetzelfde bereikt. Knip daarvoor de tabel in de rechter kolom in tweeen. De tweede tabel bevat alleen de 'comments' en 'add this' rows. Alle andere rows gaan in de eerste tabel.

De layout en CSS wordt dan als volgt. Let daarbij goed op de inline styles:

code:

  <td class="blogtd topictd" id=particle0 style="position: relative;">
    <!-- TopicPost -->
    <table class="topic post" id=topicpost0 style="margin-bottom: 30px;">
      <...>
    </table>
    <table style="position: absolute; bottom: 0px; right: 0px;">
      <...>
    </table>
  </td>

De position relative op de td bepaalt dat we ten opzichte van die td absoluut willen gaan positioneren. De position absolute op de 2e tabel, zet de onderkant en de rechterkant van die tabel vast op de onderkant en rechterkant van de (position relative) td.

Tot slot moeten we er nog voor zorgen dat de 1e tabel en de 2e tabel niet over elkaar heen kunnen schuiven. Daarvoor zorg de margin-bottom 30px. Die zorgt voor 30 pixels witruimte onder de 1e tabel. Op die plek kan de 2e tabel mooi staan.

Don't erase all files?
[Yes] [No]

dinsdag 15 januari 2008 12:54

Acties:

plofkip

Topicstarter

f.v.b schreef op dinsdag 15 januari 2008 @ 08:20:
In je voorbeeld pagina krijg ik de hoogte nog wel goed door een extra height: 100% toe te voegen op de td. In onderstaande snippet gaat het om de eerste regel. Daar staat de extra height:
[....]

Klinkt veelbeloved, ga het donderdag proberen, dan laat ik weer van mij horen

Over dat van het voorbeeld: het voorbeeld is niet hetzelfde als wat ik in de praktijk wil bereiken op die kipusoep pagina...

[ Voor 80% gewijzigd door plofkip op 15-01-2008 12:56 ]

maandag 21 januari 2008 16:08

Acties:

plofkip

Topicstarter

In Internet Explorer werkt die work-around perfect, in FF zie je alleen de hele Comments en Add this table niet...

dinsdag 22 januari 2008 03:52

Acties:

f.v.b

Volgens mij is de CSS oplossing in moderne browsers een stuk robuuster. Probeer die eens.

Don't erase all files?
[Yes] [No]

woensdag 23 januari 2008 08:48

Acties:

plofkip

Topicstarter

f.v.b schreef op dinsdag 22 januari 2008 @ 03:52:
Volgens mij is de CSS oplossing in moderne browsers een stuk robuuster. Probeer die eens.

Sorry, maar welke CSS oplossing?

donderdag 24 januari 2008 12:10

Acties:

plofkip

Topicstarter

Bump

donderdag 24 januari 2008 12:11

Acties:

disjfa

be

Wat verwacht je nou precies van ons? Heb je jezelf al verdiept in html en een oplossing zonder tabellen

Of blijf je wachten tot wij een oplossing geven?

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 24 januari 2008 18:51

Acties:

plofkip

Topicstarter

Ik verwacht dat mensen mij hierbij willen helpen. Bijvoorbeeld f.v.b.

Maargoed, sluit hem maar dan. Houden we het hierbij en dan zullen mensen die hetzelfde probleem hebben en ernaar gaan zoeken dus ook geen oplossing vinden.

zaterdag 26 januari 2008 15:07

Acties:

f.v.b

Ik had twee oplossingen gegeven. De eerste was het toevoegen van een extra height attribute.

Bij de tweede oplossing moest de tabel in twee tabellen gesplitst worden. Vervolgens kon je de tweede tabel met CSS (inline styles) aan de onderkant van het blokje vastzetten.

Heb je die tweede oplossing ook geprobeerd?

[ Voor 0% gewijzigd door f.v.b op 26-01-2008 15:09 . Reden: t -> d ]

Don't erase all files?
[Yes] [No]

zondag 27 januari 2008 20:06

Acties:

plofkip

Topicstarter

f.v.b schreef op zaterdag 26 januari 2008 @ 15:07:
Ik had twee oplossingen gegeven. De eerste was het toevoegen van een extra height attribute.

Bij de tweede oplossing moest de tabel in twee tabellen gesplitst worden. Vervolgens kon je de tweede tabel met CSS (inline styles) aan de onderkant van het blokje vastzetten.

Heb je die tweede oplossing ook geprobeerd?

Eerste werkte niet, tweede had ik het juist over... Dan is die balk in FF weg... Maar ik ga er zelf wel op verder klussen en als ik iets heb laat ik het hier achter...

woensdag 20 februari 2008 20:24

Acties:

Verwijderd

Tsjonge jonge Be, wat kan jij moeilijk doen!

I.p.v. die jongen gewoon ff te helpen. We weten nu allemaal dat jij er echt heel veel verstand van hebt maar probeer nu eens echt te helpen.

Ik heb namelijk precies hetzelfde probleem. Ik maak gebruik van een Joomla website en heb als doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nu wil ik m'n pagina (CSS, geen tabellen) waar weinig text in staat toch tot onder aan het scherm hebben. Met tabellen is het me wel gelukt maar nu wil ik hetzelfde met CSS met eventueel een andere doctype als dat nodig is.

Juist omdat meerdere mensen met dit soort problemen op deze pagina terecht komen is het van groot belang om met elkaar een oplossing te vinden i.p.v. iemand af te vallen.

woensdag 20 februari 2008 20:35

Acties:

TeeDee

CQB 241

En nu verwacht je van ons dat we in de glazen bol kijken en exact kunnen zien hoe de opbouw van je site is?

offtopic:
het is disjfa, geen be. Net als dat ik geen CQB 241 ben, maar TeeDee

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 25 februari 2008 19:05

Acties:

Verwijderd

Kijk daar gaan we weer... Alleen maar commentaar!

Ik geef alleen maar aan dat het wijzigen van m'n doctype ermee te maken had. Nou heb ik er ook niet veel verstand van maar ik heb wel dit gevonden:

http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

En hieruit blijkt dat er veel zijn die met dit probleem worstelen want zelfs deze manier is niet helemaal toppie.
Als jij en Disjfa nou ook zo'n website beginnen dan doen jullie tenminste echt iets goeds met al die kennis en je glazen bol!