login  Naam:   Wachtwoord: 
Registreer je!
 Forum

IE bug: verschil Enter/F5; verschil door lege style tag (Opgelost)

Offline TomJansen - 23/01/2008 13:31 (laatste wijziging 08/10/2008 08:25)
Avatar van TomJansenNieuw lid Hallo mensen,

ik denk dat ik een vreemde bug ben tegengekomen in Internet Explorer. Ik had namelijk een probleempje met een pagina van mij, en toen ik dat probleempje had geisoleerd naar de kleinst mogelijke HTML, merkte ik wel iets heel vreemds. Het doet zich in elk geval voor met IE 6 en 7, en niet met FF.

Ten eerste wat ik probeer te bereiken:
Ik wil het venster verdelen in twee fluid kolommen, dus iedere kolommen 50% breedte.
In de rechterkolom moet, van een stuk tekst alleen de bovenste regel zichtbaar zijn. Dus alleen het gedeelte wat er in past, zeg het meest linkse stuk van de tekst.

Dat probeer ik als volgt te maken:
Ik gebruik een table om het venster in twee kolommen te verdelen.
Voor de regel tekst in de rechterkolom gebruik ik een p (mag ook een div zijn).
Deze is gestijld met "white-space:nowrap; overflow:hidden;". En bovendien met "float:left;" want om een of andere rede werkt het anders niet.

Zo dus:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.     </style>
  5. </head>
  6. <body>
  7.  
  8. <table style="width:100%">
  9. <tr>
  10.     <td style="width:50%;background-color:#ccf" valign="top">
  11.         LEFT COLUMN
  12.     </td>
  13.     <td style="width:50%;background-color:#fcc" valign="top">
  14.         RIGHT COLUMN
  15.         <p style="white-space:nowrap;overflow:hidden;float:left;">
  16.             LONG_NON-BREAKING_TEXT long_non-breaking_text 
  17.             LONG_NON-BREAKING_TEXT long_non-breaking_text
  18.             LONG_NON-BREAKING_TEXT long_non-breaking_text
  19.             LONG_NON-BREAKING_TEXT long_non-breaking_text
  20.         </p>
  21.         <div style="clear:both;"><hr/></div>
  22.     </td>
  23. </tr>
  24. </table>
  25.  
  26. </body></html>


Ik heb deze pagina online staan: http://tomj.gethost.nl/long_non_breaking_text.html
Met FF werkt dit altijd goed.
En als je met IE naar die pagina surft, en je herlaadt de pagina met F5, dan ziet het er meestal goed uit (goed = de kolommen zijn ieder 50% breedte).
Maar als je dan de pagina herlaadt door de adresbalk te focussen en op ENTER te drukken, dan ziet het er meestal niet goed uit: IE maakt dan de rechterkolom zo breed dat de hele tekst er in past i.p.v. dat de tekst afgesneden wordt. En de linkerkolom wordt kleiner dan de helft.

Het zou toch niet uit mogen maken of je de pagina vernieuwt met F5 of met Enter?! Om een of andere rede krijg ik met F5 steeds het gewenste resultaat en met Enter niet. Ik heb dit met meerdere webservers geprobeerd en ook met een lokaal bestand; en steeds blijft dit verschil tussen F5 en Enter bestaan.

Maar het wordt nog gekker:
Als ik het style-element (<style type="text/css"></style>) waar nota bene geen enkele style rule in zit, verwijder, dan geeft IE altijd dat ongewenste resultaat, ongeacht of ik op Enter of F5 druk.
Geloof het of niet kijk op http://tomj.get...style.html

Iemand eerder zoiets meegemaakt? Weet iemand verschillen tussen F5 en Enter? Wat doet een leeg <style> element met IE? Iemand een workaround of tip om een enkele regel tekst af te kappen in een element met fluid breedte? (Reeds geprobeerd met readonly input, hetzelfde probleem)

Groetjes uit Westerhoven, Tom Lange Jansen

4 antwoorden

Gesponsorde links
Offline NTS64 - 23/01/2008 14:43
Avatar van NTS64 PHP gevorderde Als ik jouw pagina in IE 7 open, dan krijg altijd de kolommen in slechte verhouding te zien(ook die pagina met <style type="text/css"></style>).
Zet op regel 10 en 13 een ; na je laatste style attribuut.
Het kan zijn dat IE daardoor je style niet juist weergeeft.



css code - Bekijk de code zonder highlighting - Klap code in 
  1. <td style="width:50%;background-color:#ccf;">


css code - Bekijk de code zonder highlighting - Klap code in 
  1. <td style="width:50%;background-color:#fcc;">
Offline lemoinet - 23/01/2008 18:09 (laatste wijziging 23/01/2008 18:10)
Avatar van lemoinet PHP gevorderde doe eens ctrl+f5 en kijk dan eens of hij het nog door

kan momenteel niet in IE7 testen (linux)
Offline Maffiow - 24/01/2008 06:26
Avatar van Maffiow PHP interesse ik ervaar hetzelfde als jou TomJansen.. zo zie je maar IE , vreemde boel soms  
Offline TomJansen - 24/01/2008 15:05 (laatste wijziging 24/01/2008 15:08)
Avatar van TomJansen Nieuw lid Ik heb het nog ergens anders geprobeerd, op een computer met IE6.
De pagina verschijnt de eerste keer steeds verkeerd. (Eerste keer = als ik nog niet bij deze pagina was.)
En als ik dan de pagina herlaad, maakt niet uit hoe, dan wordt ie goed (dus dan werkt overflow:hidden ineens wel).
Maar als het bestand lokaal staat dan maakt het wel uit hoe ik herlaad:
met F5 of Ctrl-F5 komt ie goed; met Enter in de adresbalk komt ie verkeerd.

Ik had de puntkomma's (;) erbij gezet, de DOCTYPE op een enkele regel gezet, een <title> gegeven,
maar helaas geen verschil.

Ik las hier dat je width:100% of height:100% moet toevoegen, zodat "hasLayout" getriggerd wordt, maar dit maakte geen verschil.
Ik weet niet of dit er iets mee te maken heeft, maar daar hebben ze de truuk om in het element met overflow:hidden, een element met position:relative te stoppen. Dat werkt niet voor mij.

Stomtoevallig ontdek ik dat het wel werkt als ik er een <div> met width:100% omheen zet.
Het maakt dan ook niet meer uit of er wel of niet een leeg <style> element in staat.
Doctype maakt ook niet uit.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3. <table style="width:100%">
  4. <tr>
  5.     <td style="width:50%;background-color:#ccf;" valign="top">
  6.         LEFT COLUMN
  7.     </td>
  8.     <td style="width:50%;background-color:#fcc;" valign="top">
  9.         RIGHT COLUMN
  10.  
  11. 	<div style="width:100%;">
  12. 	    <p style="white-space:nowrap;overflow:hidden;float:left;">
  13. 		LONG_NON-BREAKING_TEXT long_non-breaking_text
  14. 		LONG_NON-BREAKING_TEXT long_non-breaking_text
  15. 		LONG_NON-BREAKING_TEXT long_non-breaking_text
  16. 		LONG_NON-BREAKING_TEXT long_non-breaking_text
  17. 	    </p>
  18. 	</div>
  19.  
  20.     </td>
  21. </tr>
  23.  
  24. </body></html>
http://tomj.get...-okay.html

Dus mijn probleem is opgelost en misschien heeft iemand anders er ook nog iets aan.
De vraag waarom IE zo gek doet, laat ik open...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.253s