Archief - HTML: IE (of FF) toont website verkeerd

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
R

Ramm

Legacy Member
http://www.judoclubtielt.be/orbit/

In FF toont hij hem zoals ik hem wil hebben, in IE toont hij het menu echter totaal verkeerd. Volgens mij ligt het aan het feit dat ik de links in het menu de stijl

display: block;

meegeef. Als ik dit weg doet geeft hij geen probleem. Zet ik daarachter 'width: 100%;', dan toont hij hem juist in IE, maar niet in FF :(

Iemand een oplossing?
o

orez

Legacy Member
Ramm zei:
Raar, hier nochtans geen probleem. Ik heb eens rechten hersteld, misschien dat het nu lukt (of via directe link http://www.judoclubtielt.be/orbit/index.html)
Klik om te vergroten...

nu werkt het wel, zal snel eens zien

*edit: redelijk snel al iets gezien.

ipv

#topmenu a { }
use #topmenu li a { }

en in die a dat ge als display:block zet, vergeet daar ook absoluut geen breedte en hoogte te definiëren ! dit is noodzakelijk ;)
test eens, en dan zien we wel weer verder.
F

Fr3aK

Legacy Member
Zien dat er geen spaties tussen uw LI-elementen zijn, dus best uw LI's in de code achter elkaar plaatsen.
HTML: 
<ul id="topmenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Features</a></li>
	<li><a href="#">Members</a></li>
	<li><a href="#">Community</a></li>
</ul>
wordt dus
HTML: 
<ul id="topmenu">
	<li><a href="#">Home</a></li><li><a href="#">Features</a></li><li><a href="#">Members</a></li><li><a href="#">Community</a></li>
</ul>
o

orez

Legacy Member
Fr3aK zei:
Zien dat er geen spaties tussen uw LI-elementen zijn, dus best uw LI's in de code achter elkaar plaatsen.
HTML: 
<ul id="topmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">Community</a></li>
</ul>
wordt dus
HTML: 
<ul id="topmenu">
    <li><a href="#">Home</a></li><li><a href="#">Features</a></li><li><a href="#">Members</a></li><li><a href="#">Community</a></li>
</ul>
Klik om te vergroten...

zeker niet het geval... ik plaats mijn li's ALTIJD onder elkaar en krijg nooit geen problemen. Dit is zelfs heel vuil gaan coderen, en enorm onoverzichtelijk. Tzit hem gewoon in de CSS hoor...
S

Spacy2003

Legacy Member
Fr3aK zei:
Zien dat er geen spaties tussen uw LI-elementen zijn, dus best uw LI's in de code achter elkaar plaatsen.
HTML: 
<ul id="topmenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Features</a></li>
	<li><a href="#">Members</a></li>
	<li><a href="#">Community</a></li>
</ul>
wordt dus
HTML: 
<ul id="topmenu">
	<li><a href="#">Home</a></li><li><a href="#">Features</a></li><li><a href="#">Members</a></li><li><a href="#">Community</a></li>
</ul>
Klik om te vergroten...

Lol, tussen tags mag je zoveel spaties, enters, tabs zetten als je wil.
Dat doet NIETS :p
F

Fr3aK

Legacy Member
Spacy2003 zei:
Lol, tussen tags mag je zoveel spaties, enters, tabs zetten als je wil.
Dat doet NIETS :p
Klik om te vergroten...
Test het uit, het zorgt ervoor dat die spaties tussen die LI's verdwijnen...

En moest ge het nog niet weten, als ge in de code nog maar één spatie tussen uw LI's hebt zit ge al met een duidelijke spatie achter uw LI's in uw layout.
Ipv mij af te breken zoude het beter zelf eens testen!
Q

Quilombo

Legacy Member
'k heb ooit eens exact hetzelfde voorgehad en 'k heb dat toen toch op een andere manier opgelost.


da's de css van toen ik da probleem nimeer had

Code: 
#menu ul {
	list-style: none;
	margin: 15px 0 0 8px;
	text-align: left;
	width: 144px;}

#menu ul li {
	border-bottom: 1px solid #333;}

#menu ul li a {
	display: block;
	text-decoration: none;
	padding: 5px;
	border-left: 3px solid #101010;
	color: #ccc;}

zet gewoon display: block eens op je links (en niet meer op je li's zelf), of een width op je ul ofzo, probeer maar wat :)
S

Smoerf

Legacy Member
Fr3aK zei:
Test het uit, het zorgt ervoor dat die spaties tussen die LI's verdwijnen...

En moest ge het nog niet weten, als ge in de code nog maar één spatie tussen uw LI's hebt zit ge al met een duidelijke spatie achter uw LI's in uw layout.
Ipv mij af te breken zoude het beter zelf eens testen!
Klik om te vergroten...

Show me the spacers boy...
http://joggink.be/snippets/li/
R

Ramm

Legacy Member
OK, bedankt voor al jullie tips in elk geval. Ik heb verschillende dingen uitgeprobeerd, maar ze gaven meestal wel ergens een fout. Als ik bv. een width zette bij mijn li/a, dan toonde hij dat in FF anders dan in IE, omdat ik ook met een padding werkte. in FF werd die padding meegerekend in de width, in IE niet (of omgekeerd).

Anyway, dan heb ik het maar op de harde manier gedaan. Lijntje per lijntje en iedere keer kijken of hij hetzelfde resultaat gaf. Met volgende code ziet het er +- gelijk uit in IE en FF (de pagina kan ik nu niet aanpassen, maar zal het vanavond doen):

Code: 
#topmenu{
	width: 160px;
	background: #444444;
	margin: 0px;
	padding: 0px 10px 0px 0px;
	list-style-type: none;
}

#topmenu li{
	margin: 0px;
	padding: 0px 1px 1px 0px;
}

#topmenu li a{
	color: #FFFFFF;
	background: #000000;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: 2px 2px 2px 10px;
}

#topmenu li a:hover{
	background: #444444;
}

Waar lag nu de 'fout'?

Code: 
#topmenu li{
	margin: 0px;
	padding: 0px 1px 1px 0px;
}
blijkbaar moest ik absoluut een rechterpadding meegeven voor IE. Als ik dit op 0 zet, dan geeft hij die ongelooflijke spatie, met 1 padding is er geen probleem.
o

orez

Legacy Member
Fr3aK zei:
Test het uit op het voorbeeld van Ramm, het lag zoals hij zelf zegt aan zijn css maar door die newlines en spaties/tabs te verwijderen kunt ge het ook oplossen...
Klik om te vergroten...

neen, dat is NIET de oplossing, en da moe ni uitgetest worden op Ramm zijn voorbeeld, als zijn CSS goed is, heb je het spacer probleem niet, dus moet de css in orde gebracht worden, en dient er geen supermessy code te worden gemaakt.
F

Fr3aK

Legacy Member
orez zei:
neen, dat is NIET de oplossing, en da moe ni uitgetest worden op Ramm zijn voorbeeld, als zijn CSS goed is, heb je het spacer probleem niet, dus moet de css in orde gebracht worden, en dient er geen supermessy code te worden gemaakt.
Klik om te vergroten...
Kruip es ni zo snel op u paard, ik zeg dat het zo ook KAN, niet dat het zo MOET...
S

Smoerf

Legacy Member
Echt niet...

Je browser houdt absoluut geen rekening met spaties tussen tags... Zelfs newlines interpreteert hij niet behalve als je ze tussen pre tags zet...
d

dJeez

Legacy Member
Smoerf zei:
Echt niet...

Je browser houdt absoluut geen rekening met spaties tussen tags... Zelfs newlines interpreteert hij niet behalve als je ze tussen pre tags zet...
Klik om te vergroten...
... of als je IE gebruikt, denken we maar aan de whitespace die ineens verschijnt bij het gebruik van images in tabellen (ok dat is niet proper, maar voor html mails kan je niet echt anders - toch niet als die mail er in zoveel mogelijk apps correct moet uitzien). Nu ik er zo aan denk, eigenlijk zou ik eens moeten testen of dat in IE7 ook nog het geval is...
F

Fr3aK

Legacy Member
Smoerf zei:
Echt niet...

Je browser houdt absoluut geen rekening met spaties tussen tags... Zelfs newlines interpreteert hij niet behalve als je ze tussen pre tags zet...
Klik om te vergroten...
http://www.drostdesigns.com/whitespace-bug-in-ie/
http://www.brunildo.org/test/IEWlispace.php
http://www.soxiam.com/Code/CSSWhiteSpaceBugInIE

Sorry, maar als dat geen bug is ben ik de volgende paus... Voor ge probeert uw gelijk te halen moogt ge eerst wa onderzoek doen hoor... (Ook al zijt ge Crew Member)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan