 Nieuw 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:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td style="width:50%;background-color:#ccf" valign="top">
LEFT COLUMN
</td>
<td style="width:50%;background-color:#fcc" valign="top">
RIGHT COLUMN
<p style="white-space:nowrap;overflow:hidden;float:left;">
LONG_NON-BREAKING_TEXT long_non-breaking_text
LONG_NON-BREAKING_TEXT long_non-breaking_text
LONG_NON-BREAKING_TEXT long_non-breaking_text
LONG_NON-BREAKING_TEXT long_non-breaking_text
</p>
<div style="clear:both;"><hr/></div>
</td>
</tr>
</table>
</body></html>
<html> <head> <style type="text/css"> </style> </head> <body> <table style="width:100%"> <tr> <td style="width:50%;background-color:#ccf" valign="top"> LEFT COLUMN </td> <td style="width:50%;background-color:#fcc" valign="top"> RIGHT COLUMN <p style="white-space:nowrap;overflow:hidden;float:left;"> LONG_NON-BREAKING_TEXT long_non-breaking_text LONG_NON-BREAKING_TEXT long_non-breaking_text LONG_NON-BREAKING_TEXT long_non-breaking_text LONG_NON-BREAKING_TEXT long_non-breaking_text </p> <div style="clear:both;"><hr/></div> </td> </tr> </table> </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
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
