Verschil in IE en Firefox?
Ik heb hier een stukje code dat in IE anders (goed) wordt weergegeven en in Firefox (fout).
Hoe kan dat?
Code (php)
1
2
3
2
3
<TR BGCOLOR="#BACCE9"><IMG SRC="img/spacer.gif" WIDTH="15" HEIGHT="20" BORDER="0"><a href="zoekhulp.php"><img src="img/help.gif" border="0" alt="Hulp bij het zoeken"></a>
<IMG SRC="img/spacer.gif" WIDTH="5" HEIGHT="1" BORDER="0"><a href="categorie.php"><img src="img/reset.gif" border="0" alt="Reset uw zoekactie"></a>
<TD WIDTH="17"><IMG SRC="img/spacer.gif" WIDTH="17" HEIGHT="1" BORDER="0"></TD>
<IMG SRC="img/spacer.gif" WIDTH="5" HEIGHT="1" BORDER="0"><a href="categorie.php"><img src="img/reset.gif" border="0" alt="Reset uw zoekactie"></a>
<TD WIDTH="17"><IMG SRC="img/spacer.gif" WIDTH="17" HEIGHT="1" BORDER="0"></TD>
In IE geeft hij netjes de blauwe achtergrond #BACCE9 weer en dan de 2 img's en dan weer een stukje blauwe achtergrond. Dit is perfect.
In Firefox geeft hij eerst een stukje wit, dan plaatje 1, dan stukje wit, dan plaatje 2 en dan weer een stuk wit.
Hoe kan dat nou?
Gewijzigd op 01/01/1970 01:00:00 door Matthew
probeer is ipv bgcolor="#BACCE9" dit: style="background-color: #BACCE9"
<table cellpadding="0" cellspacing="0">
Of nog netter:
Geen tabellen gebruiken en lekker met CSS divjes inelkaar zetten
Tabellen is echt zóóóó 2000
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="209" BGCOLOR="#BACCE9">
<TR>
<TD COLSPAN="2"><IMG SRC="img/spacer.gif" WIDTH="1" HEIGHT="7" BORDER="0"></TD>
</TR>
<TR BGCOLOR="#BACCE9"><IMG SRC="img/spacer.gif" WIDTH="15" HEIGHT="20" BORDER="0"><a href="zoekhulp.php"><img src="img/help.gif" border="0" alt="Hulp bij het zoeken"></a>
<IMG SRC="img/spacer.gif" WIDTH="5" HEIGHT="1" BORDER="0"><a href="categorie.php"><img src="img/reset.gif" border="0" alt="Reset uw zoekactie"></a>
<TD WIDTH="17"><IMG SRC="img/spacer.gif" WIDTH="17" HEIGHT="1" BORDER="0"></TD>
<TR>
<TD COLSPAN="2"><IMG SRC="img/spacer.gif" WIDTH="1" HEIGHT="7" BORDER="0"></TD>
</TR>
<TR BGCOLOR="#BACCE9"><IMG SRC="img/spacer.gif" WIDTH="15" HEIGHT="20" BORDER="0"><a href="zoekhulp.php"><img src="img/help.gif" border="0" alt="Hulp bij het zoeken"></a>
<IMG SRC="img/spacer.gif" WIDTH="5" HEIGHT="1" BORDER="0"><a href="categorie.php"><img src="img/reset.gif" border="0" alt="Reset uw zoekactie"></a>
<TD WIDTH="17"><IMG SRC="img/spacer.gif" WIDTH="17" HEIGHT="1" BORDER="0"></TD>
Hopelijk heeft iemand de oplossing.
style="border-collapse:collapse" zou wel moeten werken. zet deze border:collapse trouwens op de table zelf dus:
Gewijzigd op 01/01/1970 01:00:00 door Tamara
Tabellen worden nog steeds gebruikt, het is echter zo 2000 om je layout aantekleden met tabellen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="209" BGCOLOR="#BACCE9" style="border-collapse:collapse">
<TR>
<TD COLSPAN="2"><IMG SRC="img/spacer.gif" WIDTH="1" HEIGHT="7" BORDER="0"></TD>
</TR>
<TR BGCOLOR="#BACCE9"><IMG SRC="img/spacer.gif" WIDTH="15" HEIGHT="20" BORDER="0"><a href="zoekhulp.php"><img src="img/help.gif" border="0" alt="Hulp bij het zoeken"></a>
<IMG SRC="img/spacer.gif" WIDTH="5" HEIGHT="1" BORDER="0"><a href="categorie.php"><img src="img/reset.gif" border="0" alt="Reset uw zoekactie"></a>
<TD WIDTH="17"><IMG SRC="img/spacer.gif" WIDTH="17" HEIGHT="1" BORDER="0"></TD>
<TR>
<TD COLSPAN="2"><IMG SRC="img/spacer.gif" WIDTH="1" HEIGHT="7" BORDER="0"></TD>
</TR>
<TR BGCOLOR="#BACCE9"><IMG SRC="img/spacer.gif" WIDTH="15" HEIGHT="20" BORDER="0"><a href="zoekhulp.php"><img src="img/help.gif" border="0" alt="Hulp bij het zoeken"></a>
<IMG SRC="img/spacer.gif" WIDTH="5" HEIGHT="1" BORDER="0"><a href="categorie.php"><img src="img/reset.gif" border="0" alt="Reset uw zoekactie"></a>
<TD WIDTH="17"><IMG SRC="img/spacer.gif" WIDTH="17" HEIGHT="1" BORDER="0"></TD>
geen verschil :(
je mist ook een TD openen bij de tweede rij onder anders, maar zoals jev zei kun je beter een beetje met je tijd meegaan.
Als je precies bovenstaande code hebt zou het wel eens kunnen komen omdat je tussen de <TR> en de <IMG> geen <TD> hebt staan in de tweede regel.
Doel van DIVs:
- Minder (schonere) code
- Flexibele(re) positionering van elementen, waardoor hergebruik van HTML code makkelijker wordt.
Praktijk:
- Door gebrekkige implementatie van CSS standaarden zijn sommige 'eisen' aan een layout niet te realiseren via enkel DIVs+CSS.
- Soms moeten er zoveel DIVs in elkaar genest worden om een layout te realiseren, dat een tabel zelfs minder code geeft.
- Soms kost het te veel tijd om een layout met DIVs+CSS compatible te krijgen voor alle grote(re) browsers. Soms is het daarom noodzakelijk om consessies te doen in de opbouw van de html code.