[HTML] Tekst schuift uit div vandaan in Gecko-browsers

[Superdeboer]

Een tijdje geleden heb ik een eenvoudig portaltje in elkaar gedraaid op basis van tabellen. Nu had ik even een middagje nix te doen en wilde ik kijken of ik er een tabelloze layout van kon maken. Ik heb de zaak in XHTML 1.0 strict gemaakt.
Nu zit ik echter met een raar probleempje. Dit is de website: http://hj.student.utwente.nl/
In Internet Explorer 6.0 ziet alles er precies uit zoals het hoort. In zowel Firefox als Opera schuift de tekst met de uptime uit de onderste grijze div... terwijl ik die tekst daar wel *in* geplaatst heb.

HTML:

<div id="uptimebox">                            
    <form id="form1" action="">
        <div><input type="hidden" name="time" size="0" value="0" /></div>
    </form>
        
    De uptime is: <span id="uptime"></span>

    <script type="text/javascript">start();</script>
</div>

Dat stukje JavaScript is nodig om de uptime 'real-time' mee te laten tellen in de browser. Ook als ik dat weghaal en alleen een stukje plain tekst erin zet, dan schuift 't nog uit de div vandaan. Ik vind dat vreemd, omdat ik meen dat Internet Explorer zonder XML-declaratie voor de DTD ook gewoon in standards mode rendert. In principe zouden IE en de Gecko-browsers dit dus hetzelfde moeten behandelen? Er kan dus in ieder geval geen probleem zitten met verschillende box models ofzo lijkt me... Omdat het bovendien allemaal netjes valideert bij W3C, heb ik geen idee wat dit voor raar probleem is.

Ik hoop dat iemand me even op weg kan helpen. CSS etc. staat gewoon allemaal in de file zelf.

[disjfa]

Komt door de margins die op dat form zitten waar de text van de tijd in staat.

[crisp]

Je hebt trouwens geen form nodig om een input element te kunnen gebruiken

Daarbij is het zeker niet zo dat IE in strict mode precies hetzelfde rendert als andere browsers. Het klopt dat IE (alleen versie 6 dan) in strict mode wel het w3 boxmodel gebruikt, maar het floatmodel wijkt nog steeds af (lees: is ongelovelijk buggy en verkeerd geimplementeerd) en IE blijft elementen uitrekken als de inhoud niet past (tenzij je expliciet overflow opgeeft).

[ Voor 75% gewijzigd door crisp op 24-10-2004 20:04 ]

[Superdeboer]

disjfa schreef op 24 oktober 2004 @ 20:00:
Komt door de margins die op dat form zitten waar de text van de tijd in staat.

Oh dude...
Daar heb ik niet een keer aan gedacht; wat stom zeg! Nou, hartstikke bedankt, 't is nu gefixt.

crisp schreef op 24 oktober 2004 @ 20:01:
Je hebt trouwens geen form nodig om een input element te kunnen gebruiken

Hmmm dat wist ik ook niet. Bovendien is het zo dat ik geen JavaScript-held ben en dit scriptje door de servereigenaar is geschreven. Toen ik mijn oude HTML-opmaak omzette naar XHTML 1.0 heb ik maar zoveel mogelijk geprobeerd om de dingen die bij dat scriptje horen hetzelfde te laten... Ik zal me wel eens in DOM enzo gaan verdiepen binnenkort; dan kan dat form dus inderdaad weg.

Daarbij is het zeker niet zo dat IE in strict mode precies hetzelfde rendert als andere browsers. Het klopt dat IE (alleen versie 6 dan) in strict mode wel het w3 boxmodel gebruikt, maar het floatmodel wijkt nog steeds af (lees: is ongelovelijk buggy en verkeerd geimplementeerd) en IE blijft elementen uitrekken als de inhoud niet past (tenzij je expliciet overflow opgeeft).

Hmmm, dat wist ik allemaal niet, vaak draaien de discussies die ik tegenkom over de verschillende browserinterpretaties om problemen met het box model en de hacks daarvoor. * Superdeboer gaat deze termen eens in Google gooien. Iig ben ik nu een stukje verder. Tnx jullie allebei.

[crisp]

Geen formulier nodig:

JavaScript:

var curtime = 1103339000, timer;

function up() {

    curtime += 1000;
    var time = curtime;
            
    days = (time - (time % 86400000)) / 86400000;
        time = time - (days * 86400000);
    hours = (time - (time % 3600000)) / 3600000;
        time = time - (hours * 3600000);
    mins = (time - (time % 60000)) / 60000;
        time = time - (mins * 60000);
    secs = (time - (time % 1000)) / 1000;   
            
    if(days == 1) {
        out = "1 dag, ";
    } else {
        out = days + " dagen, ";
    } 
    out = out + hours + " uur, ";   
    if(mins == 1) {
        out = out + " 1 minuut en ";
    } else {
        out = out + mins + " minuten en ";
    }
    if(secs == 1) {
        out = out + " 1 seconde";
    } else {
        out = out + secs + " seconden";
    }

    if (!timer)
    {
        document.getElementById('uptime').appendChild(document.createTextNode(''));
        timer = document.getElementById('uptime').firstChild;
    }
    timer.nodeValue = out;
    setTimeout('up()',1000);
}

HTML:

<div id="uptimebox">
    De uptime is: <span id="uptime"></span>
    <script type="text/javascript">up()</script>
</div>

gewoon met een JS global dus

[Superdeboer]

W000000t dankjewel dude!

Alleen nou zit er één raar klein prutsdingetje in... waar ik net zo min iets van begrijp, omdat ik het script nou eenmaal niet snap ( )...

En dat is dat er tussen
• http://hj.student.utwente.nl/ (het oude script)... en
• http://hj.student.utwente.nl/index_zonder_form.php (jouw script)...

...ongeveer 50 minuten verschil zit...

Jouw script loopt achter... of... nahja... 't is gek; want wat ik ervan begrijp ziet het er toch allemaal wel redelijk hetzelfde uit.

OK shoot me... ik ben gaar: ik moet natuurlijk wel de daadwerkelijke uptime doorgeven aan het script hè...

Tnx dus.

[ Voor 14% gewijzigd door Superdeboer op 24-10-2004 20:57 ]

[disjfa]

Dat is neem ik aan de tijd die je meekrijgt van een php variabele En het is 50 mins na je eerste post........

[crisp]

Voor wat betreft boxmodel verschillen doe ik het tegenwoordig zo: ik laat IE6 gewoon in strict mode renderen, maar laat IE < 6 een additionele stylesheet toepassen middels een conditional comment:

HTML:

<!--[if lt IE 6]><link rel="stylesheet" href="css/ie5.css" /><![endif]-->

mijn gewone stylesheet blijft dus verschoond van boxmodelhacks