[IE/CSS] Foute weergave eerste bezoek

[Pred]

Hallo!

Ik heb een site gemaakt. Hij is volledig met CSS gemaakt, volgens de XHTML 1.0 Transitional W3C standaard. Er zullen een aantal overtredingkjes zijn, maar die moet ik nog laten controleren door W3C.

Anyway, ik zit met een probleem. In Mozilla Firebird wordt de site getoond zoals dat hoort. Maar zodra ik met IE (ik weet de versie niet) op school de site voor het eerst bezoek, dan ziet de site er zo uit:

terwijl in Mozilla Firebird de site er zo uitziet:

goed dus...

Note: zodra ik refresh dan is de site wel goed, maar ik vind een handmatige refresh na 1 seconde iets overdreven, en misschien zijn er meer mensen met dit probleem die een oplossing hebben gevonden.
Note 2: de rest van de site is wel ok!

Alvast bedankt voor het lezen!

[ Voor 3% gewijzigd door Pred op 21-01-2004 15:03 ]

[Verwijderd]

Note 1: Altijd een URI.
Note 2: Zie regel 1.

[Verwijderd]

Je plaatjes hebben allemaal een defineerde grootte ?

[Pred]

Verwijderd schreef op 21 januari 2004 @ 15:11:
Je plaatjes hebben allemaal een defineerde grootte ?

code:

    td.menuitem
    {
        border: 1px solid #A2BFE3;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: 80px;
        text-align: left;
        color: #FFFFFF;
        font-weight: bold;
        background-repeat: no-repeat;
    }

Width moet 80px zijn.

Maar wat het vage is is dat het alleen gebeurd als je de site voor het eerst bezoekt! Zodra je refresht is het weer goed. Daar wil ik graag de nadruk op leggen.

edit: het zou overigens heel goed kunnen dat het een bug is in IE. Omdat het met IE 6.0 me nog nooit is overkomen (en we op school denk ik 5.5 ofzo hebben)

[ Voor 14% gewijzigd door Pred op 21-01-2004 15:20 ]

[CrashOne]

Je menu kan je beter met lists maken.

Maar post eens een url, zal ik eens in IE5.x kijken.

[Thijsmans]

CrashOne schreef op 21 januari 2004 @ 20:07:
Je menu kan je beter met lists maken.

Maar post eens een url, zal ik eens in IE5.x kijken.

Daar zijn ze niet voor bedoelt.

Maar TS: probeer eens een margin mee te geven, en een padding, al was het maar '0' of '0px', want IE struikelt daar wel vaker over.

[Rickets]

Prammenhanger schreef op 21 januari 2004 @ 20:15:
Daar zijn ze niet voor bedoelt.

Niet?
Waarom is een menu dan geen lijst volgens jou?

[ Voor 28% gewijzigd door Rickets op 21-01-2004 20:17 ]

[Pred]

Rickets schreef op 21 januari 2004 @ 20:17:
[...]

Niet?
Waarom is een menu dan geen lijst volgens jou?

Ik zal het betreffende stukje (HTML/PHP) code hier plaatsen en de CSS die er mee gemoeid gaat... wacht aub op de volgende edit.
(dat met die list begrijp ik overigens niet)

De HTML:

HTML:

        <tr><td class="menuitemholder">
            <table cellpadding="0" cellspacing="0">
                <tr><td class="menuitem" align="center" valign="middle" 
onmouseover='this.style.borderColor="#FFFFFF"; getElementById("dropdownAlgemeen").style.visibility="visible";' 
onmouseout='this.style.borderColor="#A2BFE3"; getElementById("dropdownAlgemeen").style.visibility="hidden";'>
                    [img]"images/menuitemalgemeen.jpg"[/img]</td>
                </tr>
            </table>
        </td></tr>

De CSS (menuitemholder en menuitem):

code:

    td.menuitem
    {
        border: 1px solid #A2BFE3;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: 80px;
        text-align: left;
        color: #FFFFFF;
        font-weight: bold;
        background-repeat: no-repeat;
    }

    
    td.menuitemholder
    {
        padding-top: 7px;
        padding-bottom: 7px;
    }

[ Voor 100% gewijzigd door Pred op 21-01-2004 21:39 ]

[Pred]

dubbel

[ Voor 127% gewijzigd door Pred op 21-01-2004 21:40 ]

[BtM909]

Wat wazig blijft is het feit dat een refresh het geheel wel goed weergeeft. Vaak geeft dat aan dat IE de eerste keer een verkeerde rendering 'in gedachte' heeft.

Ik heb het weleens vaker gezien met extra marge ineens aan de rechterkant, omdat IE dacht dat er een scrollbar zichtbaar moest zijn. Krijg je bij een harde refresh (of temp inet files leeggooien) ook een verkeerde weergave?

[Pred]

BtM909 schreef op 21 januari 2004 @ 21:47:
Wat wazig blijft is het feit dat een refresh het geheel wel goed weergeeft. Vaak geeft dat aan dat IE de eerste keer een verkeerde rendering 'in gedachte' heeft.

Ik heb het weleens vaker gezien met extra marge ineens aan de rechterkant, omdat IE dacht dat er een scrollbar zichtbaar moest zijn. Krijg je bij een harde refresh (of temp inet files leeggooien) ook een verkeerde weergave?

Ja... het is echt heel frappant! Daarom dacht ik dat het een bug zou zijn! Omdat ik het hier (thuis, IE 6.0) niet heb! En, idd na een refresh het weer goed is!

Ik was eigenlijk op zoek naar mensen die dit fenomeen meteen herkenden! Maar helaas hebben die nog niet gereplyed, want ik denk dat dit probleem 'tracen' grotendeels nutteloos is, omdat ik het zelf ook tot in de kleinste details heb zitten checken. Plus het feit dat een docent bij mij op school (HTML/CSS expert) dit probleem ook had met zijn website.

[BtM909]

Is er echt geen mogelijkheid dat je een link kan geven Of lees ik ergens overheen?

[Verwijderd]

Soms krijg je dit soort dingen door spaties in de HTML code. Probeer eens je <img> tag volledig tussen de <td> te zetten zonder spaties ertussen...

Dus:

HTML:

<table>
  <tr>
    <td><img /></td>
  </tr>
</table>

Tussen de attributes van de tags kan je wel whitespace en newlines zetten.

[Rickets]

Pred schreef op 21 januari 2004 @ 21:35:
Ik zal het betreffende stukje (HTML/PHP) code hier plaatsen en de CSS die er mee gemoeid gaat... wacht aub op de volgende edit.
(dat met die list begrijp ik overigens niet)

In afwachting van een link naar jouw HTML-bestand: http://www.alistapart.com/articles/taminglists/
een interessant stukje voor jou over een list als menu.

[Pred]

Verwijderd schreef op 21 januari 2004 @ 22:00:
Soms krijg je dit soort dingen door spaties in de HTML code. Probeer eens je <img> tag volledig tussen de <td> te zetten zonder spaties ertussen...

Dus:

HTML:

<table>
  <tr>
    <td><img /></td>
  </tr>
</table>

Tussen de attributes van de tags kan je wel whitespace en newlines zetten.

Dit is bij mij bekend en is (volgens mij) niet het probleem, omdat het na het refreshen correct wordt weergegeven.

BtM909 schreef op 21 januari 2004 @ 21:53:
Is er echt geen mogelijkheid dat je een link kan geven Of lees ik ergens overheen?

Helaas... het heeft verschillende redenen, met als voornamelijkste dat het product nog niet is opgeleverd.

Ik ben bang dat ik met dit topic niet mijn doel zal bereiken... ik was op zoek naar mensen, die als die dit bericht lezen, meteen wisten waar het over gaat (omdat het een raar probleem is) en ook meteen een oplossing konden geven.

[BtM909]

Het enige wat ik nog kan adviseren is even alleen je menu testen. En dan even stukken toevoegen totdat het probleem zich voordoet. Weet je meteen of een stuk code dit veroorzaakt.

[Pred]

Rickets schreef op 21 januari 2004 @ 22:12:
[...]

In afwachting van een link naar jouw HTML-bestand: http://www.alistapart.com/articles/taminglists/
een interessant stukje voor jou over een list als menu.

Dat is interessant! Ik zal het eens in alle rust doornemen!

[Pred]

BtM909 schreef op 21 januari 2004 @ 22:15:
Het enige wat ik nog kan adviseren is even alleen je menu testen. En dan even stukken toevoegen totdat het probleem zich voordoet. Weet je meteen of een stuk code dit veroorzaakt.

Ik denk dat ik het hierbij laat. Ik zou het dan op een machine met IE 5.5 moeten testen... naja dat heb ik hier dus niet. Mensen moeten dan maar accepteren dat het de eerste keer beetje raar uitziet, maar zodra ze op een link klikken is het goed. Mijn straf dat ze IE 5.5 gebruiken Firebird!

[BtM909]

Waarom test je het zelf niet

Meerdere versies van Internet Explorer tegelijk gebruiken

[Spider.007]

quote: http://www.bluerobot.com/web/css/fouc.asp

<script type="text/javascript"></script>

helpt dit wellicht

[CrashOne]

heb even je menu met een list gemaakt, makkelijker te onderhouden en dynamischer:
http://www.tamaela.nl/got/list.htm

[Johnny]

CrashOne schreef op 21 januari 2004 @ 23:10:
heb even je menu met een list gemaakt, makkelijker te onderhouden en dynamischer:
http://www.tamaela.nl/got/list.htm

in plaats van

code:

ul li:hover {
}

kun je beter

code:

ul li a:hover {
border-color: #ffffff;
}

hover werkt in MSIE namelijk alleen op <a> tags.

[CrashOne]

Als je een hover wilt gebruiken kun je idd beter die gebruiken of de htc die clay heeft geschreven, dan heb je ook hover support op andere elementen in IE.

[Pred]

CrashOne schreef op 21 januari 2004 @ 23:10:
heb even je menu met een list gemaakt, makkelijker te onderhouden en dynamischer:
http://www.tamaela.nl/got/list.htm

Haha heb je tijd over ofzo! Bedankt man ik gooi em er binnenkort in! Denk dat het probleem dan wel opgelost is! Leer ik hier ook nog eens wat! Haha dank je wel! Ziet er ook goed uit!