CSS lay-out puzzle: IE is OK, maar FF en Chrome klopt niet
Ik ben al een tijdje bezig met een schrijfproject waarvoor ik gebruik wil maken van een speciale site waarin ik een soort mindmap wil laten draaien. Offline gebruik ik al een tijdje daarvoor het programma Personal Brain (www.thebrain.com). Sinds de afgelopen twee versies heeft PB ook de mogelijkheid om 'een brein' als 'webbrain' te uploaden naar hun eigen site en om het dan vervolgens via een javascript weer in een eigen siteomgeving te laten draaien. Na het nodige geklungel (duidelijk geen IT-er hier ;-) is het mij gelukt om er een demo van te maken: http://www.uilenkamer.nl/BrainTest/index.htm
Het komt aardig in de buurt van wat ik wilde hebben, maar helaas alleen in IE.
Als ik de pagina in FireFox of in Chrome open ziet de layout er ineens wat anders uit, niet wat ik in gedachten had. Is er hier misschien iemand die specialist is in dit soort interbrowsergedoe en die mij een tip kan geven hoe ik hier een oplossing voor kan vinden? Zou mij erg helpen. Txs!
(errors zijn op te lossen)
Edit:
werk of met DIV'jes of met Tables. Bij voorkeur DIV'jes
werk of met DIV'jes of met Tables. Bij voorkeur DIV'jes
Gewijzigd op 04/11/2010 19:04:38 door Bas IJzelendoorn
The Dutch Guy op 04/11/2010 19:02:59:
Edit:
werk of met DIV'jes of met Tables. Bij voorkeur DIV'jes[/quote]
Nooit in Tables! Tabellen zijn uit de jaren '50. Tabellen zijn voor het makkelijk weergeven van gegevens, niet voor een lay out!
werk of met DIV'jes of met Tables. Bij voorkeur DIV'jes[/quote]
Nooit in Tables! Tabellen zijn uit de jaren '50. Tabellen zijn voor het makkelijk weergeven van gegevens, niet voor een lay out!
Ik heb ze er voor een deel nu uitgehald en er mee verder. Maar dat zal toch niet die vertikale verschuiving van het linkerblad veroorzaken? Wat betreft DIV's en tables: kan redelijk wat met tables dat ik met DIV's niet kan. Daar zit helaas een CSS-gat van mij.
Olie koning op 04/11/2010 20:11:39:
Als hij in IE OK is dan is je code FOUT
Dit is wel heel dramatisch gezegd. Als je goed script heb je in 1 keer alles goed in FF, Chrome, enz en IE.
Dan kijk je of de gebruiker FF/Chrome of IE gebruikt. Dan laat je ze de juiste css zien.
ik zie het vaker, weet niet of het een goede oplossing is.
Je kunt het natuurlijk ook doen zoals de rest het zegt. Dat zou mooier zijn.
Mocht je er echt niet uitkomen, of zit je met de ronde randjes (border.radius (something like that<<)) dan zou je dit kunnen gebruiken.
Code (php)
1
<!--[if IE]><link rel="stylesheet" href="layout.css"><![endif]-->
Dit is ook mogelijk, maar wat ik al eerder zei. Als je CSS en HTML goed in elkaar zit en je geen CSS3 gebruikt staat alles overal gewoon goed.
Wouter de Jong op 04/11/2010 22:00:30:
Je bedoelt:
Dit is ook mogelijk, maar wat ik al eerder zei. Als je CSS en HTML goed in elkaar zit en je geen CSS3 gebruikt staat alles overal gewoon goed.
Code (php)
1
<!--[if IE]><link rel="stylesheet" href="layout.css"><![endif]-->
Dit is ook mogelijk, maar wat ik al eerder zei. Als je CSS en HTML goed in elkaar zit en je geen CSS3 gebruikt staat alles overal gewoon goed.
Dit ben ik het niet met je eens, soms MOET je wel een appart CSS bestand maken voor IE 6 omdat anders je website weer verkeerd getoond woord in IE 7+, ff en chrome etc.
Toevoeging op 04/11/2010 23:20:29:
Victor Php op 04/11/2010 20:36:50:
Ik weet niet precies hoe het moet, maar je kunt 2 aparte layout.css maken.
Dan kijk je of de gebruiker FF/Chrome of IE gebruikt. Dan laat je ze de juiste css zien.
ik zie het vaker, weet niet of het een goede oplossing is.
Je kunt het natuurlijk ook doen zoals de rest het zegt. Dat zou mooier zijn.
Mocht je er echt niet uitkomen, of zit je met de ronde randjes (border.radius (something like that<<)) dan zou je dit kunnen gebruiken.
Dan kijk je of de gebruiker FF/Chrome of IE gebruikt. Dan laat je ze de juiste css zien.
ik zie het vaker, weet niet of het een goede oplossing is.
Je kunt het natuurlijk ook doen zoals de rest het zegt. Dat zou mooier zijn.
Mocht je er echt niet uitkomen, of zit je met de ronde randjes (border.radius (something like that<<)) dan zou je dit kunnen gebruiken.
Dat raad ik alleen voor IE 6 aan, voor de rest van de browsers maar 1 CSS
Toevoeging op 14/11/2010 02:12:01:
Alsnog fixed.