[HTML / CSS] relative gepositioneerde DIV rekt TD op

[E-Vix]

Ik zit met een probleempje.
Ik ben bezig om het nieuwe ontwerp van de site van het bedrijf waar ik voor werk te implementeren.
nou heb ik bovenaan voor de header twee plaatjes die over elkaar heen vallen. De een is een gradient, en de ander is een 3 kleurig logo. Om de laadtijden laag te houden is de gradient een JPG en is het logo een GIF. Ik had er ook één grote JPG achtergrond van kunnen maken, maar dan zou er bovenaan een plaatje van 50 kb ofzo staan in plaats van de paar KB die het nu is.
Maar nu het probleem. Het logo moet met een klein deel over de gradient heen vallen. Dit gedeelte van het logo is welliswaar transparant, maar omdat een stukje verder naar links het logo iets verder naar beneden uitsteekt valt het over elkaar heen. Om het logo er over heen te laten vallen heb ik deze in een DIV geplaatst en deze een relative positie in een TD gegeven. deze TD moet 84 pixels hoog zijn, maar het logo is 89 pixels hoog. Omdat de TD waar dit logo in staat relative gepositioneerd wordt zou je denken dat dat niets uit maakt, maar helaas... De TD wordt dus opgerekt naar 89 pixels. Ik heb al van alles en nog wat geprobeerd om die TD op 84 pixels hoog te krijgen, maar het wil gewoon niet lukken.

HTML:

<table width="752" height="128" cellpadding="0" cellspacing="0" border="0" style="background:#FFFFFF">
    <tr>
        <td style="background:url(/img.v3/top/achtergrond_bovenbalk.gif) repeat-x " height="13" colspan="2"></td>
    </tr>
    <tr>
        <td height="84" colspan="2" style="height:84px; max-height:84px; " >
            <div style="position:relative; top:12px; left:3px; overflow:visible; width:0; height:0" >
                [img]"/img.v3/top/logo_hotelspecials_transpar.gif"[/img]
            </div>
        </td>
    </tr>
    <tr>
        <td width="165" valign="bottom">[img]"/img.v3/menu/menu_top_blue.gif"[/img]</td>
        <td width="587" height="31" style="border-bottom:#B0B0B0 solid; border-bottom-width:1px; background:url(/img.v3/top/background_payoff.jpg) repeat-y #292e7b; text-align:center; color:#FFFFFF">payoff tekst komt hier</td>
    </tr>
</table>

Wat heb ik o.a. geprobeerd?

• maxheight op desbetreffende TR
• maxheight op desbetreffende TD
• float=left op de IMG
• z-index div hoger gooien
• div width en height op 0 en overflow op visible

Wie weet er dus hoe ik er voor kan zorgen dat die TD echt maar 84 pixels hoog wordt ondanks dat er dus een div met een plaatje van 89 pixels hoog in staat?

[BtM909]

Je moet je div een position:absolute en je td een position: relative geven

[E-Vix]

BtM909 schreef op vrijdag 20 januari 2006 @ 10:38:
Je moet je div een position:absolute en je td een position: relative geven

Als ik de DIV een position:absolute zou gaan geven en ze besluiten dat ze opeens de pagina in het midden van de browser uitgelijnd willen hebben dan zit ik met een probleem...
Wat voor nut zou het overigens hebben om die td een position:relative te geven?

Is er geen manier om die TD zich niets van de hoogte aan te laten trekken van wat hij denkt er in te hebben staan?

edit:
ff geprobeerd

ok. Heb het geprobeerd met die position:relative en position:absolute. Het werkt in Internet Explorer goed, alleen in Mozilla lijnt hij de plaatjes niet uit ten opzichte van de TD, maar ten opzichte van de bovenkant van de browser zelf. Het resultaat is dan ook dat in Mozilla de logo's gewoon veel te hoog komen te staan...

[ Voor 24% gewijzigd door E-Vix op 20-01-2006 11:17 ]

[BtM909]

Heb je een voorbeeld ergens online?

[E-Vix]

http://stage.hotelspecials.nl/tpl.v3/header.html

Let niet op de smarty tags die er boven staan. Deze pagina zal straks geinclude en geparsed gaan worden door smarty en dan verdwijnen ze.

[E-Vix]

**kick**

[E-Vix]

** SCHOP **