Søg
Avatar billede steen_hansen Forsker
25. november 2005 - 14:17 Der er 17 kommentarer og
1 løsning

Bredde i Opera

Hvorfor har denne tabel en bredde på 203px i Opera, og ikke 202?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<style>
html, body {
background-color: #396da5;
height: 100%;
margin: 0px;
border: 0px;
padding: 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 18px;
}
</style>
<title>Test</title>
</head>

<body>

<table style="width: 202px; padding: 0px; margin: auto; border-collapse: collapse;">
    <tr>
        <td style="width: 200px; padding: 0px; border: 1px solid black; background-color: #ff0000;">Test</td>
    </tr>
</table>

</body>

</html>
Avatar billede apo Praktikant
25. november 2005 - 20:03 #1
Jeg kan ikke give dig en teknisk forklaring på hvorfor Opera viser din tabel med en bredde på 203px, når du har sat den til 202px. Men de enkelte elementer vises ofte med små forskelle, de enkelte browsere imellem.

Jeg har selv tidligere kæmpet med problemet, bl.a. da et input voldte mig problemer, og ødelagde designet når siderne blev vist i FF og Opera. IE viste som ønsket inputet med en bredde på 135px, FF viste en bredde på 138px og Opera viste en bredde på 140px - Jeg valgte at give inputet en bredde på 137px, hvilket var det tætteste jeg kunne komme på en gennemsnitlig anvendelig bredde (Som ikke ødelagde designet) i de tre browsere.

Jeg tror ikke, det kan lade sig gøre, at få vist en side 100% ensartet i både IE, FF og Opera - Der vil nok altid være en minimal forskel.

Måske bliver det bedre i de senere browserversioner...
Avatar billede steen_hansen Forsker
25. november 2005 - 21:55 #2
Hej apo

Jeg TROR nu på, at det kan lade sig gøre, og jeg mener bestemt, at kæden hopper af et eller andet sted mellem padding/margin/border. Tror jeg da :D

Jeg har kæmpet med det før, og har fået det til at hænge sammen på en eller anden måde. Men dette, som skulle være så simpelt, giver simpelthen så meget arbejde. Jeg har kombineret mig igennem alt muligt. Men lige meget hjælper det :o/
Avatar billede apo Praktikant
25. november 2005 - 23:01 #3
Hmm... Har du forsøgt at erstatte: margin:auto; med margin:0; ?
Avatar billede steen_hansen Forsker
26. november 2005 - 00:03 #4
Ja:

margin: auto 0px;
margin: auto;
margin: 0px;

Det havde ingen effekt. Skal man sætte det både på table og td?
Avatar billede apo Praktikant
26. november 2005 - 00:21 #5
Når du bruger værdien '0' i en CSS-regel, behøver du ikke sætte enhed på - Enhed = f.eks. 'px'. Dette gælder _kun_ værdien '0'.

Og så bør du lige sikre dig, at du bruger de rette CSS-regler, og at de giver den ønskede effekt:

margin:0 auto; (ikke margin: auto 0; !) centerer tabellen - Og er så vidt jeg ved et 'hack'.
margin:auto; er jeg ikke sikker på eksisterer - http://www.w3.org/TR/REC-CSS1#margin
margin:0; sætter marginen til 0 på det valgte element.

Jeg ved ikke om det ændrer noget hos dig, men du kan måske forsøge med:

table {border-collapse:collapse;}
table td {margin:0; padding:0;}
Avatar billede steen_hansen Forsker
27. november 2005 - 10:28 #6
Desværre ikke, det er nøjagtigt det samme. Nu begynder jeg snart at tude. Det må da være muligt at lave en tabel, som rent faktisk svarer til de angivne mål i både MSIE, Opera og NS? Hvor svært kan det være? :o(
Avatar billede steen_hansen Forsker
27. november 2005 - 10:32 #7
Jeg har forsøgt lidt med forskellige opstillinger, men lige lidt hjælper det:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<style type="text/css">
html, body {
background-color: #396da5;
height: 100%;
margin: 0px;
border: 0px;
padding: 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 18px;
}
table {
border-collapse: collapse;
}
table td {
margin:0;
padding: 0;
}
</style>
<title>Test</title>
</head>

<body>

<table style="width: 202px; padding: 0px; margin: 0px auto; border-collapse: collapse; border-spacing: 0px;">
    <tr>
        <td style="width: 200px; padding: 0px; border: 1px solid black; background-color: #ff0000;">Test</td>
    </tr>
</table>
<div style="height: 50px;"></div>

<table style="width: 202px; padding: 0px; margin: 0px auto; border-collapse: collapse;">
    <tr>
        <td style="width: 200px; padding: 0px; border: 1px solid black;">Test</td>
    </tr>
</table>
<div style="height: 50px;"></div>
<table style="width: 202px; margin: 0px auto;">
    <tr>
        <td style="width: 200px; border: 1px solid black;">Test</td>
    </tr>
</table>

</body>

</html>
Avatar billede steen_hansen Forsker
27. november 2005 - 10:47 #8
Så tror jeg den er der:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<style type="text/css">
html, body {
background-color: #396da5;
height: 100%;
margin: 0px;
border: 0px;
padding: 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 18px;
}
</style>
<title>Test</title>
</head>

<body>

<table style="width: 202px; margin: 0px auto; border-spacing: 0px;">
    <tr>
        <td style="width: 200px; border: 1px solid black; padding: 0px;">Test</td>
    </tr>
</table>
<div style="height: 50px;"></div>
<table style="width: 200px; margin: 0px auto; border-spacing: 0px;">
    <tr>
        <td style="width: 200px; border-collapse: collapse; padding: 0px; background-color: #fff000;">Test</td>
    </tr>
</table>

</body>

</html>

Er det ikke korrekt?
Avatar billede steen_hansen Forsker
27. november 2005 - 10:49 #9
Den er der sq! :)

apo, du skal have 1000 tak for indsatsen, og for det får pointene. Smid lige et svar.
Avatar billede steen_hansen Forsker
27. november 2005 - 10:53 #10
og for det får pointene = og for det får du pointene
Avatar billede steen_hansen Forsker
27. november 2005 - 11:19 #11
Nu er det kun ét problem: "Test" er rykket 2px til højre i MSIE. Hvor mangler jeg noget, og vil det påvirke noget i de andre browsere?

<table style="width: 900px; margin: 0px auto; border-spacing: 0px; background-color: #fff;">
    <tr>
        <td style="width: 900px; border-collapse: collapse; padding: 0px;">Test</td>
    </tr>
</table>
Avatar billede steen_hansen Forsker
27. november 2005 - 11:42 #12
Og border-collapse ser ikke ud til at have nogen effekt i denne sammenhæng:

<table style="width: 900px; margin: 0px auto; border-spacing: 0px; background-color: #fff;">
    <tr>
        <td style="width: 900px; padding: 0px;">Test</td>
    </tr>
</table>
Avatar billede steen_hansen Forsker
27. november 2005 - 12:29 #13
Nej, nu er bredden god nok, men højden (line-height: 18px;) bliver forkert nu.

Jeg ved jeg er nede i noget småt, men det irriterer mig, at MSIE sætter line-height til 19px nu, det er mere for at få en forståelse for hvad der sker:

<table style="width: 900px; margin: 0px auto; border-collapse: collapse; border-spacing: 0px; background-color: #fff;">
    <tr>
        <td style="width: 900px; padding: 0px;">Test</td>
    </tr>
</table>

Og jeg er lidt bange for, at det hele eskalerer, jo mere der blive lagt på.
Avatar billede apo Praktikant
27. november 2005 - 12:44 #14
Du kan sætte dette i dit stylesheet (F.eks. under 'html,body {}'):

table {border-collapse:collapse;}
table td {margin:0; padding:0;}

Derved behøver du ikke at have det stående i en inline-style (Og det gælder samtidig for alle tables som standard med mindre, du overskriver CSS-reglen via en inline-style - direkte på en tabel).

Jeg vil mene at en enkelt pixels forskel i højden er billigt sluppet. Hvis det er lykkedes dig at få bredden til at være præcis, tror jeg bare at du skal være tilfreds med det. Én pixel i højden er der ingen, der lægger mærke til når først klaveret spiller :-)

Jeg har i hvert fald ingen forklaring på hvordan (om!) du kan præcisere det yderligere.
Avatar billede steen_hansen Forsker
27. november 2005 - 13:25 #15
Det er også meningen, at mine styles skal sættes ind i et stylesheet. Lige nu forsøger jeg bare at få det sat rigtigt op :)

Det er rigtigt, at 1px må siges at være noget fluekn....ri, men mine erfaringer siger mig, at det vil give problemer i andre sammenhænge, hvis ikke det bliver rettet op fra start.

Der må være et eller andet specielt, der gør, at der er de små forskelle. Det må skulle styles på en bestemt måde i hhv. Opera/NS og MSIE.
Avatar billede steen_hansen Forsker
27. november 2005 - 22:50 #16
Hm, underligt. Nu er den også 18px i højden i MSIE:

<table style="width: 900px; margin: 0px auto; border-collapse: collapse; border-spacing: 0px; background-color: #fff;">
    <tr>
        <td style="width: 900px; padding: 0px;">Test</td>
    </tr>
</table>

Husk lige at smide et svar, apo :)
Avatar billede apo Praktikant
28. november 2005 - 19:20 #17
Svar :-)
Avatar billede steen_hansen Forsker
28. november 2005 - 21:23 #18
Tak for indsatsen, apo. Jeg havde godt nok en lang og sej kamp for så lidt. Men det lykkedes da :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
White papers
Flere white papers »