[css table] verschil tussen ie en firefox

[Tom-my]

Probeer met de onderstaande code (uit een standaard cms systeem) een thema aan te passen. Onder ie werkt het goed, maar onder firefox komt er ruimte in de tabellen waardoor de plaatjes een klein tikje verschoven worden. Ik heb kramp in mn oogspier van het kijken, wie heeft een klein zetje in de goede richting

Bekijk www.dpf-clan.nl maar is onder ie en dan is onder firefox. Ik heb geprobeerd van relatief naar absolute cellen te gaan dat hielp niet. Ik heb geschoven met de attr. (heb wel is eerder gehad dat dat een probleem oploste) kreeg het ook niet goed. Mis ik iets fundamenteels?

code:

<br><table width=\"650\" cellpadding=\"0\" cellspacing=\"0\">
    <tr>
        <td colspan=\"3\">
            <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" >
                <tr>
                    <td width=\"67\" height=\"9\">[img]\"".THEME."images/title_top_left.gif\"></td>
                    <td[/img]</td>
                    <td width=\"5\" height=\"9\">[img]\"".THEME."images/title_top_right.gif\"></td>
                </tr>
            </table>
            <table[/img]
                <tr>
                    <td width=\"16\" height=\"25\"> [img]\"".THEME."images/title_mid_left.gif\"></td>
                    <td[/img]<b>{NEWSTITLE}</b></td>
                    <td width=\"11\" height=\"25\">[img]\"".THEME."images/title_mid_right.gif\"></td>   
                </tr>
            </table>
            <table[/img]
                <tr>
                    <td width=\"33\" height=\"17\">[img]\"".THEME."images/title_bot_left.gif\"></td>
                    <td[/img]</td>
                    <td width=\"33\" height=\"17\">[img]\"".THEME."images/title_bot_right.gif\"></td>
                </tr>
            </table>
        </td>   
    </tr>
    <tr>
        <td[/img]
            <table width='100%' cellpadding='0' cellspacing='0'>
                <tr>
                    <td width='30' height='100%' background='".THEME."images/body_left.gif'></td>
                    <td class='backlogo'><br>&nbsp;{NEWSBODY}<br></td>
                    <td width='30' height='100%' background='".THEME."images/body_right.gif'></td>  
                </tr>
            </table>
            <table width='100%' cellpadding='0' cellspacing='0'>
                <tr>
                    <td width='30' height='100%' background='".THEME."images/body_left.gif'></td>
                    <td bgcolor='#F3F3F3'><br>&nbsp;{EXTENDED}<br></td>
                    <td width='30' height='100%' background='".THEME."images/body_right.gif'></td>  
                </tr>
            </table>
        </td>   
    </tr>
    <tr>
        <td colspan='3'>
            <table width='100%' cellpadding='0' cellspacing='0'>
                <tr>
                    <td width='30' height='100%' background='".THEME."images/body_left.gif'></td>
                    <td bgcolor='#F3F3F3'></td>
                    <td bgcolor='#F3F3F3'><center>{NEWSCOMMENTS}</center></td>
                    <td bgcolor='#F3F3F3' width='50'>{ADMINOPTIONS}{EMAILICON}{PRINTICON}</td>
                    <td width='30' height='100%' background='".THEME."images/body_right.gif'></td>  
                </tr>
            </table>
            <table cellpadding='0' cellspacing='0' width='100%'>
                <tr>
                    <td width='14' height='7'>[img]'".THEME."images/body_bot_left.gif'></td>
                    <td[/img]</td>
                    <td width='14' height='7'><a href='http://www.netsurf.ru' target='_blank'>[img]'".THEME."images/body_bot_right.gif'></a></td>
                </tr>
            </table>
        </td>
    </tr>
</table[/img]

[Verwijderd]

Mijn god, wat een berg code voor zo'n simpele site. Waarom heb je in godsnaam al die bgcolor, width en heights in je HTML staan? Absoluut onleesbaar op deze manier.

Als je het nou doet met div's, daarin een background-image, ipv een hele tabel, dan is het een stuk makkelijker te onderhouden.

Je doet alsof het XHTML 1.1 is, maar het is verre van dat. Ik zie bijvoorbeeld een document.write staan, en dat mag niet in XHTML. Daarnaast is het de bedoeling dat je opmaak van content scheidt, en dat doe jij ook heel duidelijk niet.

Ik hoop dat je de fout in je site vindt, maar het wordt natuurlijk wel lastig met zo'n onduidelijke code.

Edit: het probleem zou best wel eens die 'width' en 'height' kunnen zijn die jij zo slordig in de pagina zelf opgeeft. Dat zijn namelijk puur 'aanbevelingen' aan de browser, en deze mag daar mee doen wat deze wil. Je kunt daarom beter vanuit CSS een height opgeven, daar moeten browsers zich namelijk aan houden.

[ Voor 21% gewijzigd door Verwijderd op 06-09-2005 01:09 ]

[disjfa]

Verwijderd schreef op dinsdag 06 september 2005 @ 01:07:
Als je het nou doet met div's normaal html, daarin een background-image, ipv een hele tabel, dan is het een stuk makkelijker te onderhouden.

Divs....

[Tom-my]

Het is niet mijn code, dat is het probleem Ik probeer een eenvoudige oplossing te vinden en ondertussen zit ik te dubben het inderdaad over te schrijven. Het is onderdeel van een thema in een cms systeem. Is er iets wat firefox moeilijk laat doen over marges (en dus cellpadding en spacing niet gebruikt?)

[disjfa]

Tom-my schreef op dinsdag 06 september 2005 @ 01:11:
Het is niet mijn code, dat is het probleem Ik probeer een eenvoudige oplossing te vinden en ondertussen zit ik te dubben het inderdaad over te schrijven. Het is onderdeel van een thema in een cms systeem. Is er iets wat firefox moeilijk laat doen over marges (en dus cellpadding en spacing niet gebruikt?)

Ja, geen tabellen gebruiken voor je layout. Semantisch html gebruik (of te wel normaal gebruik maken van de html tags voor de dingen waarvoor ze bedoelt zijn).

[Tom-my]

disjfa schreef op dinsdag 06 september 2005 @ 01:22:
[...]

Ja, geen tabellen gebruiken voor je layout. Semantisch html gebruik (of te wel normaal gebruik maken van de html tags voor de dingen waarvoor ze bedoelt zijn).

Hmm dus met divjes. Heb ik een klein vraagje, de tabel voor een news item is opgebouwd nu uit 3 geneste tables, eentje voor boven een voor midden een voor onder.

De top tabel is weer gemaakt uit 3 td's. Hoe zet je netjes geneste divs naast elkaar?

[disjfa]

Als je met divjes gaat klooien kan je net zo goed met tabellen verder gaan. Ik heb het over normaal html gebruik.

[Tom-my]

Wat is in dit geval volgens jou dan normaal html gebruik. Je vindt dat ik het verkeerd doe, prima. Maar een kleine opheldering of richting vertellen wat je wel bedoelt anders dan een zeer abstracte opmerking als normaal gebruik van iets is voor mij wat vaag. Ik wil best meer leren maar welke kant je hiermee op wil is mij niet duidelijk.

[disjfa]

Voor mij is het nog niet eens duidelijk wat je wilt, maar zover ik zie wil je een titel (ook wel vertaalt header) en een stukje text in 2 op gebouwd. Dan kom ik even snel uit op of een paar gefloate divjes en een headertje erboven of een headertje en een tabelletje.

simpel:

HTML:

<h1>headertje</h1>
<p>text</p>

En als je 2 texten naast elkaar wilt en werkend in IE:

HTML:

<h1>headertje</h1>
<div>
  <span style="float:left;">text</span>
  <span style="float:right;">text</span>
</div>

En dan de benodigde plaatjes netjes in de css en dan kan je al een flink eind komen.

[ Voor 12% gewijzigd door disjfa op 06-09-2005 01:49 ]

[Verwijderd]

ey disjfa, beter opletten als ik je wat vertel he waarom wordt die <p> ineens een <div> als er spans in komen?

code:

<h1>headertje</h1>
<p>
  <span style="float:left;">text</span>
  <span style="float:right;">text</span>
</p>

[disjfa]

Dat is gewoon een persoonlijke voorkeur aangezien ik ook vaker met block elementen in een container speel (als ik zoiets gebruik dus) en dan heb je weer niets aan een div

[ Voor 9% gewijzigd door disjfa op 06-09-2005 09:52 ]