Avatar billede glacier Nybegynder
20. december 2004 - 10:35 Der er 3 kommentarer og
1 løsning

Forskydning i Opera og firefox.

Hej

Når jeg sætter DOCTYPE til XHTML 1.1 eller HTML 4.01 Strict dannes der et lille mellemrum mellem mit logo og bunden af den tabel dom den er i.
denne forskydelse forekommer kun i opera og firefox.

nogen der kan hjælpe?

Min kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Moist.dk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="http://www.moist.dk/style.css" />
</head>
<body>

<table class="logotabel" cellpadding="0" cellspacing="0">
<tr>
<td class="logo"><img alt="Copyright 2004 Moist.dk" src="http://www.moist.dk/pics/logo.jpg" /></td>
</tr>
<tr>
<td class="menu">

<table class="menutabel" cellpadding="0" cellspacing="0">
<tr>
<td class="knap">
<div class="center"><img alt="" src="http://www.moist.dk/pics/menu-icon.jpg"/><a href="http://www.moist.dk/index.php"> Home </a></div>
</td>
<td class="knap">
<div class="center"><img alt="" src="http://www.moist.dk/pics/menu-icon.jpg"/><a href="http://www.moist.dk/info.php"> Info </a></div>
</td>
<td class="knap">
<div class="center"><img alt="" src="http://www.moist.dk/pics/menu-icon.jpg"/><a href="http://www.moist.dk/byen/byen.php"> I Byen </a></div>
</td>
<td class="knap">
<div class="center"><img alt="" src="http://www.moist.dk/pics/menu-icon.jpg"/><a href="http://www.moist.dk/event/event.php"> Events </a></div>
</td>
<td class="knap">
<div class="center"><img alt="" src="http://www.moist.dk/pics/menu-icon.jpg"/><a href="http://www.moist.dk/kontakt.php"> Kontakt </a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

<table>
<tr>
<td class="cellemellemrum"></td>
</tr>
</table>

<table class="hovedtabel">
<tr>

<td class="left" valign="top">



</td>

<td class="hoved" valign="top">
<table class="overskrift2tabel">
<tr>
<td class="overskrift2" align="center"><p>Nyheder:</p></td>
</tr>
</table>
</td>

<td class="right" valign="top">



</td>

</tr>
</table>

</body>
</html>


Mit CSS:

BODY {
    COLOR: #000000;
    background-image: url('pics/background.gif');
}
P {
    FONT-SIZE: 11px; FONT-FAMILY: verdana, tahoma, sans-serif;
}
h2 {
    FONT-SIZE: 11px; FONT-FAMILY: verdana, tahoma, sans-serif; COLOR: red;
}
B {
    FONT-SIZE: 12px; FONT-FAMILY: verdana, tahoma, sans-serif;
}
H1 {
    FONT-SIZE: 12px; FONT-FAMILY: verdana, tahoma, sans-serif;
}
A {
    FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, tahoma, sans-serif; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}
.text { font-family: verdana, tahoma, sans-serif; font-size: 8px; font-weight: normal; color: #000000; }

img {
    margin: 0px;
    border: 0px;
}

.center { text-align: center;
}

.logotabel {
        margin: auto;   
}

.menutabel {
        margin: auto;
        height: 1px;
}

.overskrift2tabel {
            margin: auto;
}

.logo {
    width: 770px;
    height: 125px;
    border-left: 1px solid #000000;
    border-right:1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.menu {
    width: 770px;
    height: 1px;
    BACKGROUND-COLOR: #878787;
    border-left: 1px solid Black;
    border-right: 1px solid Black;
    border-top: 0px solid Black;
    border-bottom: 1px solid Black;
    COLOR: #FFFFFF;
}

.knap {
    width: 100px;
    height: 1px;
    border: 0px solid Black;
}

.cellemellemrum {
    width: 650px;
    height: 1px;
    border: 0px solid Black;
}

.cellemellemrum2 {
    width: 132px;
    height: 1px;
    border: 0px solid Black;
}

.hovedtabel {
    width: 772px;
    margin: auto;
    BACKGROUND-COLOR: #FFFFFF;
    border-left: 1px solid #000000;
    border-right:1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.hoved {
    width: 472px;
    height: 200px;
    border-left: 1px solid #CFCECE;
    border-right: 1px solid #CFCECE;
    border-top: 0px solid Black;
    border-bottom: 0px solid Black;
}

.left {
    width: 150px;
    height: 200px;
    border: 0px solid Black;
}

.right {
    width: 150px;
    height: 200px;
    border: 0px solid Black;
}

.overskrift {
    width: 130px;
    height: 1px;
    border-left: 1px solid #000000;
    border-right:1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    BACKGROUND-COLOR: #A086A2;
    COLOR: #FFFFFF;
}

.overskrift2 {
    width: 432px;
    height: 1px;
    border-left: 1px solid #000000;
    border-right:1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;   
    BACKGROUND-COLOR: #A086A2;
    COLOR: #FFFFFF;
}

.loginfelt {
    width: 20px;
    height: 1px;
    border-left: 1px solid #000000;
    border-right:1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    BACKGROUND-COLOR: #A086A2;
    COLOR: #FFFFFF;
}

.streg {
    height: 1px;
    border-left: 0px solid #CFCECE;
    border-right:0px solid #CFCECE;
    border-top: 0px solid Black;
    border-bottom: 1px solid #CFCECE;
}

.byen1 {
    width: 472px;
}


input { border-style: solid; border-width: 1px; background-color: #CFCECE; font-family: verdana, tahoma, sans-serif; font-size: 8px;}
select { border-style: solid; border-width: 1px; background-color: #CFCECE; font-family: verdana, tahoma, sans-serif; font-size: 8px;}
textarea { border-style: solid; border-width: 1px; background-color: #CFCECE; font-family: verdana, tahoma, sans-serif; font-size: 8px;}
Avatar billede olebole Juniormester
20. december 2004 - 14:36 #1
<ole>

1. Drop XHTML foreløbig. Det eneste, du har ud af det, er at gøre livet surt for alle bestående browsere. WWW er endnu ikke klar til XHTML  :)

2. Prøv at lægge et link til siden - så er det meget lettere at se fejlen

/mvh
</bole>
Avatar billede glacier Nybegynder
20. december 2004 - 15:45 #2
www.moist.dk

Problemet er alt forskydelsen også forekommer hvis det er HTML 4.01 strict.
Avatar billede knudgert Nybegynder
20. december 2004 - 16:05 #3
<img style="vertical-align: bottom" alt="Copyright 2004 Moist.dk" src="http://www.moist.dk/pics/logo.jpg" />

burde gøre det (du kan selvf. også skrive det i dit cssark).

Jeg vil ikke gå så langt som olebole og sige at man ikke bør bruge xhtml, men man bør ikke bruge xhtml 1.1, men holde sig til xhtml 1.0, strict eller transitional.

Læs http://www.hintzmann.dk/articles/doctype/#ikke_xhtml11
Avatar billede olebole Juniormester
20. december 2004 - 16:19 #4
Hvis manabsolut insisterer på at servere kodefejl for brugernes browsere, kan man godt skrive XHTML - men da stort set al XHTML på WWW parses som fejlfyldt HTML4.01, er der ingen idé i det idag  :)

Må jeg i al beskedenhed anbefale:
  http://www.eksperten.dk/artikler/537
  http://www.eksperten.dk/artikler/538
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