2px balk is zichtbaar in FF en Chrome, IE niet zichtbaar
Ik ben bezig met een template website (gekocht) te vullen met onze eigen gegevens en graphics. Nu is de template totaal opgebouwd uit vervelende tables in tables in tables met hier en daar een div. Daarbij staand de styles overal in het html pagina's zelf.
Ik ben zelf gewend alles in div's op te bouwen en die centraal uit een stylesheet aan te sturen als het ware. Nu ben ik al bezig met het maken van een versie die alleen uit divjes bestaat. Echter vanwege tijdsdruk en andere projecten die tegelijk lopen duurt dit veel te lang. Hierdoor is er gekozen om de gekochte template als eerst af te maken aangezien deze voor 90% al gereed is.
Het probleem waar ik nu echter tegen aan loop is dat er boven en onder de header een balk van 2px verschijnt in FireFox. IE doet het hierin "goed". Een voorbeeld van die balkjes is te zien op:
www.gerbenvanerkelens.com/img/screen.jpg
De code voor dat stuk is als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<BODY onLoad="MM_preloadImages('images/m1r.jpg','images/m2r.jpg','images/m3r.jpg','images/m4r.jpg','images/m5r.jpg','images/m6r.jpg','images/m7r.jpg','images/m8r.jpg')">
<!-- ImageReady Slices (01_home.psd - Slices: 02, 04, bottom, top, top_bg) -->
<TABLE WIDTH="750" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="center">
<TR>
<TD><IMG SRC="images/top.jpg" WIDTH=750 HEIGHT=28 ALT="" border="0px"></TD>
</TR>
<TR>
<TD width="750" height="214" valign="top">
<TABLE WIDTH="750" BORDER="0" CELLPADDING="0px" CELLSPACING="0px">
<TR>
<TD><IMG SRC="images/top_left.jpg" WIDTH=34 HEIGHT=214 ALT=""></TD>
<TD WIDTH="681" HEIGHT="214" ALT="" valign="top">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0','width','681','height','214','src','flash/main','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flash/main' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="681" height="214">
<param name="movie" value="flash/main.swf">
<param name="quality" value="high">
<embed src="flash/main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="681" height="214"></embed>
</object></noscript>
</TD>
<TD>
<IMG SRC="images/right_top.jpg" WIDTH="35" HEIGHT="214" ALT="" border="0px"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD background="images/top_bg.jpg" WIDTH="750" HEIGHT="45" valign="top">
<div style="margin-top:20px; margin-left:50px;"><a href="index.php" style="color:#5B5B5B">Home</a> > Welkom
</div>
</TD>
<!-- ImageReady Slices (01_home.psd - Slices: 02, 04, bottom, top, top_bg) -->
<TABLE WIDTH="750" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="center">
<TR>
<TD><IMG SRC="images/top.jpg" WIDTH=750 HEIGHT=28 ALT="" border="0px"></TD>
</TR>
<TR>
<TD width="750" height="214" valign="top">
<TABLE WIDTH="750" BORDER="0" CELLPADDING="0px" CELLSPACING="0px">
<TR>
<TD><IMG SRC="images/top_left.jpg" WIDTH=34 HEIGHT=214 ALT=""></TD>
<TD WIDTH="681" HEIGHT="214" ALT="" valign="top">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0','width','681','height','214','src','flash/main','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flash/main' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="681" height="214">
<param name="movie" value="flash/main.swf">
<param name="quality" value="high">
<embed src="flash/main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="681" height="214"></embed>
</object></noscript>
</TD>
<TD>
<IMG SRC="images/right_top.jpg" WIDTH="35" HEIGHT="214" ALT="" border="0px"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD background="images/top_bg.jpg" WIDTH="750" HEIGHT="45" valign="top">
<div style="margin-top:20px; margin-left:50px;"><a href="index.php" style="color:#5B5B5B">Home</a> > Welkom
</div>
</TD>
Heeft iemand enig idee wat er hieraan niet klopt.
Quote:
Een voorbeeld van die balkjes is te zien op:
www.gerbenvanerkelens.com/img/screen.jpg
www.gerbenvanerkelens.com/img/screen.jpg
dood....
Je html is ook erg.. "dood". Hoofdletter tags, inline styling, body onload en background op Table.
De afbeelding heb ik opnieuw geupload en werkt nu wel weer.
Kan je ook een live voorbeeldje tonen? Dan kan ik er met CSSviewer en Firebug naar kijken, ik denk dat het met je margins te maken heeft of gewoon omdat die tables een opening maken (je zou even een div om alles heen kunnen gooien en die een witte background geven).
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens
Ps. IE was degene die het hier juist fout deed, door geen line-height te plaatsen op een element alleen maar omdat er geen tekst in stond.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Perfect! Dat was de oplossing! Zal hem nu aan gaan passen in de rest van de pagina's. Bedankt voor de snelle hulp!