Avatar billede apo Praktikant
11. juni 2005 - 17:31 Der er 2 kommentarer og
1 løsning

Problemer med <div> i <td>

Hej :-)

Den her driller mig godt og grundigt...

Jeg har et table med 8 celler i alt. I en af cellerne har jeg følgende HTML-kode placeret:

<form style="margin:0px;" onsubmit="return checkForm(this)" method="post" name="nyhedsbrev" action="Nyhedsbrev.asp?Handling=Tilmeld">
    <div style="margin:0px; width:484px; height:20px; border:1px solid #9C9388; background-color:#9C9388; background-image:url('Gfx/baggrund_nyhedsbrev.png');">
        <div style="margin:0px; width:483px; height:19px; border-left:1px solid #E2DCD6; border-top:1px solid #E2DCD6;">
            <img src="Gfx/ikon_overskrift.png" style="float:left; margin-left:9px; margin-right:3px; margin-top:4px; width:11px; height:11px; border:0px;" alt=""><div style="margin-top:3px;" class="rubrikoverskrift">Nyhedsbrev</div>
        </div>
    </div>
    <div style="margin-top:1px; width:484px; border:1px solid #CDC5B7; background-color:#EDE9E0;">
        <div style="margin-top:5px; margin-left:10px; margin-right:10px; margin-bottom:10px;"><input type="text" name="navn" style="float:left; margin-right:2px; width: 193px; height: 16px;" value="Indtast navn" onfocus="if(this.value=='Indtast navn')this.value='';" onblur="if(this.value=='')this.value='Indtast navn';" class="input"><input type="text" name="email" style="float:left; margin-right:2px; width: 193px; height: 16px;" value="Indtast e-mailadresse" onfocus="if(this.value=='Indtast e-mailadresse')this.value='';" onblur="if(this.value=='')this.value='Indtast e-mailadresse';" class="input"><input type="submit" name="send" style="width:66px; height:20px; cursor:pointer; background-image:url('../gfx/knap_tilmeld.png'); background-color:#EFEBE7; border:0px" value=" " alt="Tilmeld"></div>
    </div>
</form>

Mit problem er at ovenstående kode skubber resten af siden mod højre, ved at skabe et mellemrum i højre side af cellen.

Den <td> hvor koden er placeret i har en bredde på 486px, og altså den samme bredde som ovenstående HTML og burde derfor ikke ændre noget. Oven i ser koden, som det eneste på siden, vidt forskellig ud i henholdsvis IE og FF.

Nogen der kan se fejl?

Apo
Avatar billede apo Praktikant
11. juni 2005 - 20:28 #1
Godt så! Jeg gik over til at lave det med et table i stedet... Det ved man hvad er, og det virker som det skal :-)

// Lukker

Apo
Avatar billede roenving Novice
12. juni 2005 - 01:55 #2
Jeg gættede på, at der var en detalje-fejl omkring boks-modellen (at en boks' bredde består af marginer + border-widths + paddings + boks-bredde !-), men jeg fik det ikke umiddelbart bekræftet ved en test, så måske kan en fuld kildekode give en idé ?-)
Avatar billede apo Praktikant
12. juni 2005 - 12:11 #3
Ja, men det virker mærkeligt, især fordi jeg har regnet den præcise størrelse ud med en lommeregner. Matematisk er dimensionerne i orden men det virker ikke i praktisk forstand, og det ser helt forkert ud i IE :-/

Jeg har netop taget højde for margins, border-widths, paddings og boksbredden...

Hovedtabellens dimensioner - width:700px;
|border:1px;|cellspacing="10"|boks:486px;|cellspacing="10"|border:1px;|hojremenu:180px;|border:1px;|cellspacing="10"|border:1px;|

Boksens dimensioner - width:486px;
|border:1px;|padding:10px;|input:197px;|margin-right:2px;|input:197px;|margin-right:2px;|knap:66px;|padding:10px;|border:1px;|

Den fulde kildekode er stort set den jeg viste dig her: http://eksperten.dk/spm/624233 + koden i mit første indlæg.

Apo
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester