[CSS] Height 100%? - Softwareontwikkeling

donderdag 2 maart 2006 20:59

Acties:

Verwijderd

Topicstarter

Ik zet een 'span' in een 'a'.
Het is de bedoeling dat die span de groote van het scherm krijgt, maar in IE6 wil dat maar niet lukken.
In IE6 wordt de hoogte van de 'a' aangehouden...

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title> height 100%? </title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<style type='text/css'>
    html,body {
        margin:0;
        padding:0;
        height:100%;
    }
    p {
        margin:0;
        padding:0;
    }
    a {
        height:100px;
        float:right;
        display:block;
    }
    a span {
        display:block;
        position:absolute;
        top:0;
        left:0;
        border:1px solid #a00;
        height:100%;
        width:100%;
    }
</style>

<p>
<a href='#nogo'>| Begin tweede link</a>
<a href='#nogo'>einde eerste link |<span>Deze box is geen height 100%</span></a>

Hoe kan ik het goed krijgen, net zoals bij alle andere browsers?

donderdag 2 maart 2006 21:09

Acties:

Verwijderd

ik gok op het doctype correct doen -> standards mode

donderdag 2 maart 2006 21:23

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 02 maart 2006 @ 21:09:
ik gok op het doctype correct doen -> standards mode

Volgens deze pagina triggert mijn doctype al standards mode...dus wat is er niet correct aan mijn doctype?

[ Voor 9% gewijzigd door Verwijderd op 02-03-2006 21:23 ]

donderdag 2 maart 2006 21:51

Acties:

Verwijderd

Een span is een inline element, die kan je geen height, block etc meegeven, dan zeg je

code:

1	a{height:100px}

en een a is wel een block element, dus die hoogte word ook voor de span aangenomen. Daarnaast zeg je

code:

1	html, body{}

terwijl die tags niet in je code voorkomen.

code:

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

<html>
<head>
    <title></title>
    <style type='text/css'>

    a {
        border: 1px solid #FF3300;
        display: block;
        float: left;
        height: 100%;
        min-height: 100%;
    }
    html,body {
        height: 100%;
        min-height: 100%;       
        margin: 0;
        padding: 0;
    }

    </style>
</head>

<body>
<a href='#nogo'>| Begin tweede link</a>
<a href='#nogo'>einde eerste link |<span>Deze box is geen height 100%</span></a>
</body>
</html>

dit zou in IE al wat meer moeten doen

donderdag 2 maart 2006 22:00

Acties:

Verwijderd

Verwijderd schreef op donderdag 02 maart 2006 @ 21:23:
[...]
Volgens deze pagina triggert mijn doctype al standards mode...dus wat is er niet correct aan mijn doctype?

my bad, verkeerd gegokt

@hierboven, reinste klets, sorry hoor, maar ook als html head en body tags niet voorkomen, zijn de elementen er gewoon en dus te stijlen. Verder zijn zowel a als span per default allebei inline elementen, maar dexus zet ze in z'n css allebei om naar block, volledig correct.

Verder raar gedrag van IE, zat nog te spelen met een position: relative op body, aangezien een absolute box tov een gepositioneerde parent neergezet wordt, maar dat haalt ook niet veel uit...

donderdag 2 maart 2006 22:07

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 02 maart 2006 @ 21:51:
Een span is een inline element, die kan je geen height, block etc meegeven

Als ik die span display:block meegeef is het toch een block-element.

code:
1
a{height:100px}
en een a is wel een block element, dus die hoogte word ook voor de span aangenomen.

Mja normaal gesproken wel, maar door de position:absolute wordt toch de hoogte van de body of een parent met position genomen?

Daarnaast zeg je
code:
1
html, body{}
terwijl die tags niet in je code voorkomen.

html, body worden vanzelf aangemaakt door de browser en kan ik dus ook gewoon selecteren met CSS.

[...code...]
dit zou in IE al wat meer moeten doen

Mja maar dan heeft de a height:100% en niet de span die in de a staat.

Dus dat lost het helaas niet op.

Verwijderd schreef op donderdag 02 maart 2006 @ 22:00:
Verder raar gedrag van IE, zat nog te spelen met een position: relative op body, aangezien een absolute box tov een gepositioneerde parent neergezet wordt, maar dat haalt ook niet veel uit...

tja het is idd maar raar gedrag van IE.
Niet dat ik anders gewent ben, maar meestal krijg ik dat wel opgelost, maar dit keer (nog) niet

donderdag 2 maart 2006 22:31

Acties:

TheDane

1.618

Ik kwam laatst ergens hier op GoT deze link tegen over het positioneren van elementen.

Met name de aleppo layout vond ik wel handig

donderdag 2 maart 2006 23:10

Acties:

crisp

Devver

Pixelated

Zoals ik het zo zie is dit inderdaad weer buggy, of in ieder geval non-standard, behaviour van IE; morgen eens kijken of IE7 beta 2 het wel beter doet anders heb ik er weer een mooie testcase bij (en ik heb er al een behoorlijk aantal)

Overigens wel een bug die qua ranzigheid eigenlijk ook wel een plek verdient op positioniseverything

[ Voor 29% gewijzigd door crisp op 02-03-2006 23:18 ]

Intentionally left blank

donderdag 2 maart 2006 23:21

Acties:

Verwijderd

Topicstarter

Mwa testcase ziet er meer zo uit

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title> height 100%? </title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<style type='text/css'>
    html,body,p {
        height:100%;
        background:#a00;
        margin:0;
        padding:0;
    }
    em {
        width:250px;
        height:250px;
        display:block;
    }
    span {
        background:#fff;
        display:block;
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
    }
</style>

<p><em><span>There should be no red on this page.</span></em></p>

En die werkt ook niet in IE7b2.

donderdag 2 maart 2006 23:25

Acties:

crisp

Devver

Pixelated

Ik had 'm teruggebracht tot dit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title> height 100%? </title>
<style type='text/css'>
    html,body {
        margin:0;
        padding:0;
        height:100%;
        background-color: yellow;
    }
    div {
        height: 100px;
        width: 600px;
    }
    div div {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background-color: red;
    }
</style>
<div><div>This box should cover the entire viewport</div></div>

het feit dat inline-elementen met CSS display:block krijgen is geen voorwaarde voor de bug, dus gebruik ik gewoon block-level elementen. Ook de paragraaf heeft er niets mee te maken...

Overigens verbaasd het me niets dat dit in IE7 beta 2 nog fout gaat; de meeste van mijn testcases zijn gevallen die in IE6 ook al fout waren. Het sterkt mijn vermoeden dat er fundamenteel weinig gewijzigd is aan de CSS-implementatie van IE7 maar dat er vooral work-arounds zijn aangebracht voor een aantal bekende bugs...
De 2 meest fundamentele wijzigingen in mijn ogen betreffen wijzigingen in het interne layout-model (hasLayout) voor relative positioning en wijzigingen in het overflow-model. Ironisch gezien brengen deze 2 wijzigingen weer een hele sloot nieuwe bugs met zich mee

[ Voor 46% gewijzigd door crisp op 02-03-2006 23:42 ]

Intentionally left blank

donderdag 2 maart 2006 23:41

Acties:

Verwijderd

Topicstarter

Ah ja dat is wel beter.
Jammer dat die pijn aan mijn ogen doet

Nu alleen nog een workaround vinden.

[ Voor 25% gewijzigd door Verwijderd op 02-03-2006 23:46 ]

vrijdag 3 maart 2006 01:17

Acties:

crisp

Devver

Pixelated

Cascading Stylesheet:

1	height: expression(this.offsetParent.scrollHeight+'px');

iets anders kan ik atm niet zo verzinnen...

Intentionally left blank

vrijdag 3 maart 2006 11:19

Acties:

Sappie

De Parasitaire Capaciteit!

Wellicht enigszins offtopic, maar ik was ook even aan het experimenteren met het voorbeeldje dat crisp aandroeg. Daarbij was ik wat aan het spelen met margins (/paddings) en lijkt het erop dat firefox (1.5 that is) het één en ander ook niet lekker interpreteerd als het gaat om absolute positioning.

De margin van de 'first-level' div heeft namelijk op een of andere manier invloed op de positie van de absoluut gepositioneerde div. Margin collapsing is afaik niet van toepassing op absoluut gepositioneerde elementen en tevens is de 'first-level' div niet het 'containing block'.

edit: Opera rendert het voorbeeld van crisp btw weer op een andere manier

De breedte van de 'first-level' div wordt daar dan weer overgenomen, in tegenstelling tot IE die zowel breedte als hoogte overneemt. Schijnbaar een heikel punt bij de implementatie van css..

[ Voor 30% gewijzigd door Sappie op 03-03-2006 11:46 ]

Specs | Audioscrobbler

vrijdag 3 maart 2006 11:56

Acties:

crisp

Devver

Pixelated

Sappie: weet je zeker dat je in Firefox in standards-compliant mode test en niet in quirksmode? Daar zit namelijk een verschil in (check de verschillende default stylesheets maar)mmz, lijkt me een overervings-kwestie, eens uitzoeken...

Opera 9 doet mijn voorbeeld overigens wel goed (en in het geval van de margins doet Opera 9 precies hetzelfde als Firefox)

[ Voor 38% gewijzigd door crisp op 03-03-2006 12:04 ]

Intentionally left blank

vrijdag 3 maart 2006 12:14

Acties:

Sappie

De Parasitaire Capaciteit!

Volgens mij test ik Firefox inderdaad in standards mode, uitgaande van de door mozilla beschikbaar gestelde testcase: http://dbaron.org/mozilla/tests/compat?doctype=

Ik gebruik namelijk gewoon jouw voorbeeld en heb daar slechts een margin toegepast op de 'first-level' div. bijv:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title> height 100%? </title>
<style type='text/css'>
    html,body {
        margin:0;
        padding:0;
        height:100%;
        background-color: yellow;
    }
    div {
        height: 100px;
        width: 600px;
        margin: 100px;
    }
    div div {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background-color: red;
    }
</style>
<div><div>This box should cover the entire viewport</div></div>

de linker bovenhoek van de rode div is daar dus gepositioneerd waar de 'first-level' div begint en dat lijkt me niet geheel zoals zou moeten, toch?

EDIT: zoals crisp al aangeeft, stom voorbeeld

Verder maakte ik gebruik van opera 8.52

edit:
zag je edit net pas, crisp.. ben het ook eens aan het uitzoeken. Lijkt me echter dat het absoluut gepositioneerde block slechts overerft van zijn gepositioneerde 'ancestor'. Verder, wanneer je expliciet de margins / paddings van de absolute div op 0 zet, rendert het wel weer zoals je in eerste instantie zou verwachten..

[ Voor 35% gewijzigd door Sappie op 03-03-2006 13:24 ]

Specs | Audioscrobbler

vrijdag 3 maart 2006 13:20

Acties:

crisp

Devver

Pixelated

ik had deze case:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title> height 100%? </title>
<style type='text/css'>
    html,body {
        margin:0;
        padding:0;
        height:100%;
        background-color: yellow;
    }
    div.foo {
        height: 100px;
        width: 600px;
        margin: 100px;
    }
    div.foo div {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background-color: red;
    }
</style>
<div class="foo"><div>This box should cover the entire viewport</div></div>

In jouw geval is het niets dan logisch dat de margin ook voor de 2e div geldt

In mijn case krijg je onderaan de pagina nog een stuk margin terwijl de absoluut gepositioneerde div geen margins heeft

Intentionally left blank

vrijdag 3 maart 2006 13:23

Acties:

Sappie

De Parasitaire Capaciteit!

hehe das erg stom van me

zag ik echt ff over het hoofd, maar tis inderdaad niet meer dan logisch. Es ff naar jouw case kijken

edit: weer weg.. ben nog niet helemaal wakker ofzo

maar dat wat in je nieuwe case gebeurt lijkt gewoon op margin collapsing. Verder heeft de absoluut gepositioneerde div niet veel met dat gebeuren te maken.

[ Voor 185% gewijzigd door Sappie op 03-03-2006 13:39 ]

Specs | Audioscrobbler

vrijdag 3 maart 2006 13:53

Acties:

crisp

Devver

Pixelated

Sappie schreef op vrijdag 03 maart 2006 @ 13:23:
hehe das erg stom van me zag ik echt ff over het hoofd, maar tis inderdaad niet meer dan logisch. Es ff naar jouw case kijken

edit: weer weg.. ben nog niet helemaal wakker ofzo maar dat wat in je nieuwe case gebeurt lijkt gewoon op margin collapsing. Verder heeft de absoluut gepositioneerde div niet veel met dat gebeuren te maken.

Ah, inderdaad; de collapsed margin drukt de body naar beneden zoals hier beter te zien is:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title> height 100%? </title>
<style type='text/css'>
    html,body {
        margin:0;
        padding:0;
        height:100%;
    }
    html {
        background-color: yellow;
    }
    body {
        background-color: red;
    }

    div.foo {
        height: 100px;
        width: 600px;
        margin: 100px;
        background-color: blue;
    }
</style>
<div class="foo">foo</div>

needless to say dat dit in IE wel fout gaat

Intentionally left blank

vrijdag 3 maart 2006 21:22

Acties:

orange.x

Probleem is juist je Doctype, sleutel die er maar eens uit, en al die andere dingen, en hij werkt onder IE ook

vrijdag 3 maart 2006 21:41

Acties:

Verwijderd

Topicstarter

Kan je een voorbeeld geven orange.x bij mij verandert er namelijk helemaal niets.

zaterdag 4 maart 2006 11:01

Acties:

crisp

Devver

Pixelated

orange.x schreef op vrijdag 03 maart 2006 @ 21:22:
Probleem is juist je Doctype, sleutel die er maar eens uit, en al die andere dingen, en hij werkt onder IE ook

Bad advice; quirksmode rendering is op sommige punten misschien logischer in IE, maar levert in andere browsers onvoorspelbaardere resultaten op. Het voordeel van je confirmeren aan de standaarden is juist de voorspelbaarheid in andere browsers (en tot op zekere hoogte ook in IE).

Intentionally left blank