Notifikationer

Markér alle som læst Log ud

steen_hansen Forsker

23. august 2006 - 00:14 Der er 12 kommentarer og
1 løsning

Dumt problem

Jeg forsøger at lave en tabel, som skal være 880px i bredden + en kant på 1px i hver side. Normalt ville jeg sige det ville give 882px i alt, men det er ikke tilfældet.

Inde i den tabel deler jeg op i to kolonner på hhv. 178px og 700px (allerede her er der modsætninger, 178 + 700 + 2 = 880, ikke 882). Når jeg angiver dette CSS:

.menucontenttable {
width: 880px;
padding: 0px;
margin: 0px auto;
border-collapse: collapse;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.menucontenttable td {
padding: 0px;
}
.tdmenu {
width: 178px;
padding: 0px;
border-collapse: collapse;
background-color: #a8a8a8;
}
.tdcontent {
width: 700px;
padding: 0px;
border-collapse: collapse;
background-color: #0000ff;
}

- så bliver tabellen rigtig i MSIE og Opera, men i FF og Mozilla bliver den 1px bredere. Den venstre kant rager 1px for langt til venstre.

Hvis jeg derimod retter dette:

.menucontenttable {
width: 880px;
padding: 0px;
margin: 0px auto;
/* border-collapse: collapse;*/
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.menucontenttable td {
padding: 0px;
}
.tdmenu {
width: 177px;
padding: 0px;
border-collapse: collapse;
background-color: #a8a8a8;
}
.tdcontent {
width: 695px;
padding: 0px;
border-collapse: collapse;
background-color: #0000ff;
}

- så bliver den rigtig i alle browsere. Nu har jeg så bare 2px mellem cellerne (til venstre for den venstre celle + mellem de 2 celler + til højre for den højre celle). Men det øverste CSS burde da give det samme? 2px + 178px + 700px, når border-collapse: collapse; er sat ind?

Lidt HTML også:

<table class="menucontenttable">
<tr>
<td class="tdmenu">Test</td>
<td class="tdcontent">Test</td>
</tr>
</table>

Det er meningen, at tabel inkl. kant i begge sider på 1px tilsammen skal give en bredde på 880px. Hvorfor kan jeg ikke få det til at passe med border-collapse?

Synes godt om

steen_hansen Forsker

23. august 2006 - 00:19 #1

Hvorfor kan jeg ikke få det til at passe med border-collapse - i FF og Mozilla?

Synes godt om

steen_hansen Forsker

23. august 2006 - 00:31 #2

PS: I Opera er der ikke noget luft omkring cellerne. Hvorfor er der ikke det, når der burde?

Synes godt om

steen_hansen Forsker

23. august 2006 - 01:44 #3

PPS: Tabellen SKAL være 880px bred.

Synes godt om

roenving Novice

23. august 2006 - 09:47 #4

Hos mig bliver de fuldstændig ens (testet med sådan en fætter i røven:

<div style="background:yellow;width:880px;margin: 0px auto;"> </div>

!-)

PS. Html 4.01 inkl. dtd-link !o]

Synes godt om

steen_hansen Forsker

23. august 2006 - 11:53 #5

Hej roenving

Det bliver det ikke hos mig, jeg kan ikke benytte border-collapse: collapse; uden, at tabellen bliver 1px for bred i FF og Mozilla.

Hvis jeg udelader border-collapse: collapse; og retter bredden på de 2 celler til, bliver det rigtigt, men så har jeg 2px rundt om cellerne. Dog ikke i Opera.

Hvor sætter du den div ind henne?

Synes godt om

roenving Novice

23. august 2006 - 11:57 #6

Jeg satte den bare lige efter tabelen, så jeg kunne se effekten i alle browsere !-)

-- du må have noget mere, måske du kan linke til et eksempel ?-)

Synes godt om

steen_hansen Forsker

23. august 2006 - 12:12 #7

Jeg kan ikke linke til siden, men du får lige HTML/CSS. Jeg ved mit CSS ikke er så hensigtsmæssigt, og heller ikke HTML (nestede tables), men jeg er i gang med forsøg :o)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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">
<META NAME="robots" content="all">
<link rel="stylesheet" type="text/css" href="/includes/style.css">
<title>Title</title>
</head>

<body>

<table class="maintable">
<tr>
<td class="bannertoptd">
<table class="bannertoptable">
<tr>
<td class="bannertoptd1"></td>
<td class="bannertoptd2"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bannermenu">
<table class="bannermenutable">
<tr>
<td><a href="#" onfocus="this.blur();" class="menubannerleft" title="">Support</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">Din profil</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">Postkassen</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">Brugernes FAQ</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">Debat</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">MSIE</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">Windows</a></td>
<td><a href="#" onfocus="this.blur();" class="menubanner" title="">Log ind</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="menucontenttable">
<tr>
<td class="tdmenu">Test</td>
<td class="tdcontent">Test</td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
padding: 0px;
background-color: #dadada;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maintable {
width: 100%;
padding: 0px;
margin: 0px auto;
border-collapse: collapse;
}
.maintable td {
padding: 0px;
}
.bannertoptd {
width: 100%;
height: 90px;
padding: 0px;
border-collapse: collapse;
}
.bannertoptd1 {
width: 233px;
height: 90px;
padding: 0px;
border-collapse: collapse;
background-image: url('/images/banner/logo.gif');
}
.bannertoptd2 {
width: 647px;
height: 90px;
padding: 0px;
border-collapse: collapse;
}
.bannertoptable {
width: 880px;
height: 90px;
padding: 0px;
margin: 0px auto;
border-collapse: collapse;
}
.bannertoptable td {
padding: 0px;
}
.bannermenu {
width: 100%;
height: 30px;
padding: 0px;
border-collapse: collapse;
border-top: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
background-image: url('/images/banner/bannermenubg.jpg');
}
.bannermenutable {
width: 880px;
height: 30px;
padding: 0px;
margin: 0px auto;
border-collapse: collapse;
}
.bannermenutable td {
height: 30px;
padding: 0px;
border-collapse: collapse;
}
.menubannertdwidth {
width: 110px;
height: 30px;
padding: 0px;
border-collapse: collapse;
}
a.menubanner, a.menubanner:link, a.menubanner:visited {
display: block;
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
text-align: center;
background-image: url("/images/banner/out.gif");
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: normal;
font-size: 11px;
color: #000;
text-decoration: none;
}
a.menubanner:hover {
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
border-collapse: collapse;
background-image: url("/images/banner/on.jpg");
}
.bannerActiveMenu {
display: block;
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
border-collapse: collapse;
background-image: url("/images/banner/on.jpg");
}
a.menubanner, a.bannerActiveMenu, a.menubanner:hover, a.bannerActiveMenu:hover {
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
text-decoration: none;
border-collapse: collapse;
}
a.menubannerleft, a.menubannerleft:link, a.menubannerleft:visited {
display: block;
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
border-collapse: collapse;
background-image: url("/images/banner/out_left.gif");
text-align: center;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: normal;
font-size: 11px;
color: #000;
text-decoration: none;
}
a.menubannerleft:hover {
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
border-collapse: collapse;
background-image: url("/images/banner/on_left.jpg");
}
.bannerActiveMenuLeft {
display: block;
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
border-collapse: collapse;
background-image: url("/images/banner/on_left.jpg");
}
a.menubannerleft, a.bannerActiveMenuLeft, a.menubannerleft:hover, a.bannerActiveMenuLeft:hover {
width: 110px;
height: 22px;
padding: 8px 0px 0px 0px;
border-collapse: collapse;
text-decoration: none;
}
.menucontenttd {
width: 100%;
padding: 0px;
border-collapse: collapse;
}
.menucontenttable {
width: 880px;
padding: 0px;
margin: 0px auto;
/* border-collapse: collapse;*/
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.menucontenttable td {
padding: 0px;
}
.tdmenu {
width: 177px;
padding: 0px;
border-collapse: collapse;
background-color: #a8a8a8;
}
.tdcontent {
width: 695px;
padding: 0px;
border-collapse: collapse;
}

Synes godt om

roenving Novice

23. august 2006 - 12:18 #8

Hrm ...

-- ja, det ser underligt ud, når der er border-collapse på ,-(

Synes godt om

steen_hansen Forsker

23. august 2006 - 12:27 #9

GODT, så er det ikke kun mig, der er galt på den :o)

Med border-collapse er tabellen 1px for bred. Uden border-collapse er det fint, men så er der de 2px luft omkring cellerne, men dog ikke i Opera. At valide for skønheden er sq ikke altid nemt :o)

Håber virkelig, at du ser et eller andet, som jeg har overset, eller har en anden løsning.

Jeg tænkte på at lave en baggrund til <body>

html, body {
background-image: urk(/images/bodybg.gif');
}

- og så lave en tabel på 880px i bredden istedet. Det kan være, at det er dét, der skal til, så jeg undgår for mange nestede tables?

Synes godt om

steen_hansen Forsker

23. august 2006 - 12:27 #10

html, body {
background-image: url('/images/bodybg.gif');
}

Synes godt om

steen_hansen Forsker

23. august 2006 - 12:43 #11

I teorien, så burde det være rigtigt nok? Jeg tænker på border-collapse m.m.

Synes godt om

steen_hansen Forsker

03. september 2006 - 03:13 #12

Jeg byggede det op fra bunden igen, og fik det hele rigtigt. Har ikke brugt noget af det ovenstående. Lukker :o)

Synes godt om

mclemens Nybegynder

16. september 2006 - 00:31 #13

( såfremt andre får problemer og ønsker en løsning på
problemet med border-collapse så kig på denne tråd:
http://www.eksperten.dk/spm/730808#rid6416611 )

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS