Side ser fortsat ikke ens ud i forskellige browsere

Det du gerne vil have, er det ikke noget lignende:
Hele tabellen skal altid fylde 100% af browservinduet og det orange i toppen skal have en fast højde (og bredde naturligvis)?

Jo, altså højden (også bredde) skal beregnes af samtlige elementer (dvs. det orange samt de grå felter) og så lave en 100% højde på baggrund af disse - ikke som nu hvor siden går ud over vinduet.

Hvad så med denne opbygning:

table {height: 100%; border: 5px; width: 640px;}
td.orange {height: 140px; background-color: orange;}
td.graa {background-color: #666666;}
td.graalys {background-color: #999999;}

<table>
<tr><td colspan="2" class="orange">titel</td></tr>
<tr>
<td class="graa" width="140">menu</td>
<td class="graalys">hovedramme</td>
</tr>
</table>

Se jeg ville jo helst undgå tabeller og bruge CSS i stedet for til opbygning af siden. :o(

Jeg har fundet ud af at det er     padding: 5px; som gør at den grå #content bliver bredere i Mozilla og Netscape, men hvordan løses det?

Hmm... hvordan ser dit css ud?

body {
    margin: 0px;
    background-color: #FFFFFF;
}
#title {
    background-color: #FF9900;
    position: absolute;
    height: 68px;
    width: 640px;
    left: 5px;
    top: 5px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 0px solid #000000;
    border-left: 1px solid #000000;
}
#leftmenu {
    background-color: #999999;
    position: absolute;
    height: 100%;
    width: 161px;
    left: 5px;
    top: 73px;
    padding: 5px;
    border-top: 0px solid #000000;
    border-right: 0px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;   
}
#content {
    background-color: #CCCCCC;
    position: absolute;
    height: 100%;
    width: 479px;
    left: 166px;
    top: 73px;
    padding: 5px;
    border-top: 0px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 0px solid #000000;
}

Er det noget med doctypen - kan man sætte det på en CSS fil?

Forklaring: 
1.Når man skriver 100% i CSS så er det 100% af browser-vinduets størrelse. og det er uanset placering af elementet.

2.Størrelsen af et element regnes således ud
BorderWidth = BorderLeftWidth + PaddingLeft + ContentWidth + PaddingRight + BorderRightWidth.
Men det er faktisk IE der gør det forkert, har man sat bredden på et element, så smider den resten inden i og der er forkert i følge standarden.

Løsning:
1. For at opnå det du ønsker, så placer din div i top:0; giv den derefter en border-top: på 5px solid #farve;.  Du kan styre div'ens synlige størrelse med border.  For at gøre dette skal du også sætte din body til at have 100% i højde.

2. For at få browsere til at forstå koden ens kan du bruge dettet trick.
box-sizing: border-box;, -moz-box-sizing: border-box; eller box-sizing: content-box;, -moz-box-sizing: content-box;.  Det er godt nok ikke valid CSS men mon ikke det bliver det i CSS3

Der er en ulempe ved 1. Løsning amn kan ikke give border en gennemsigtig farve.

Et lille link til folket.
http://webfx.eae.net/dhtml/boxsizing/boxsizing.html

Det lyder som om pixeldude er temmelig ferm til det der med boxsizing, - det vil jeg ikke gøre mig klog på. Hvis du stadig vil anvende din metode med boxene, så tror jeg bare du skal nærlæse teksten i den url pixeldude har sendt.

Jeg ville nu stadig anvende tabeller i stedet, - hvis der altså ikke er tale om et større site. Alternativt er frames jo også en mulighed.

Arrrgh ... frames. Det sagde du da vel ikke, jeg troede det ord var glemt.  Tabeller kan også gå til nød bortset fra at det er et helvedes arbejde hvis man skal skifte design.  Udviklingen går jo i retning af at man skiller indhold og design for sig.  Tabeller er som sagt til visning af tabulære data.

Quote W3C:
"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

Ja, jeg kunne heller ikke finde på at anvende store sites på den måde, men mindre sites, - ligesom www.canedo.dk :)

Frames er jo ret velegnet til formålet, - hvorfor ikke benytte frames?

Frames har mange problemer med brugervenligheden.  Bl.a. når man skal tilføje sider til foretrukne og udskrifter på andre platforme end MS.

pixeldude >> uha jeg ikke så meget for ikke-valid kode, men ikke desto mindre så ser det ud til at din 2. løsning gjorde tricket da jeg indsatte

    box-sizing: border-box;
    -moz-box-sizing: border-box;

i alle mine divs - box-sizing: content-box;, -moz-box-sizing: content-box; kunne jeg ikke få til at virke.

Kunne du evt. give et CSS eksempel på din første løsning - jeg er lidt udsikker på hvordan det helt præcist gøres. :o)

En div som skal følge browserens størrelse og sammentidig have 5px space i top og bund.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        body {
            height: 100%;
        }
       
        #top {
            position: absolute;
            background: #ffffff;
            width: 430px;
            top: 0px;
            left: 50%;
            margin-left: -215px;
            z-index: 2;
        }
       
        #bottom {
            position: absolute;
            background: #ffffff;
            width: 430px;
            top: 100%;
            left: 50%;
            margin-left: -215px;
            margin-top: -18px;
            z-index: 2;
        }
       
        #content {
            position: absolute;
            height: 100%;
            width: 430px;
            top: 0px;
            left: 50%;
            margin-left: -215px;
            border-top: 20px solid black;
            border-bottom: 20px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            z-index: 1;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    </style>
</head>

<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="content"></div>
</body>
</html>

Box-Sizing bliver en del af CSS3 med sikkerhed.  Det er bare et spørgsmål om hvornår det bliver valid kode.

Tak jeg prøver lige når jeg kommer hjem igen. Ja, jeg var inde og kigge på deres side og så at box-sizing står som "draft", så det gør jo ikke noget at være lidt på forkant. :o)

Nu hvor jeg har dig, så har jeg faktisk lige to spørgsmål.
- hvad synes du er bedst at bruge til skriftstørrelse px eller pt?
- mht til farver skal man så gå efter deciderede web colors ala http://www.visibone.com/colorlab/?

Jeg forhøjer lige med lidt point hvis du svarer.

Hvad angår farver, så er den rigtige måde at gøre det på sådan her #div {color: rgb(255,0,0)}.  Men det er også ok at skrive HEX koderne sådan her #div {color: #ff0000}.  Ved fontene bruger jeg altid px, jeg ved faktisk ikke hvorfor, men pt er vist det mest rigtige da jeg ikke kan find px i standarden.

Nå vi nu snakker farver så tag lige et kig på http://www.colormatch.dk/ som rigtig lækker når man skal finde nogle farver der passer godt sammen.

OK, nu har jeg lige prøvet og umiddelbart ser det fint ud - indtil teksten i content bliver længere end skærmbilleder så ser det ikke så godt ud mere -> http://www.ejstrup-kongskov.dk/test/test.php

Kan man komme ud om det på nogen måde?

colormatch... totalt lækkert site, hvorfor kendte jeg ikke det for lang tid siden!?¿?

Ja, det et fikst lille link! :o)

Jeg har siddet og roddet lidt frem og tilbage og tænkte på om man måske kunne bruge overflow funktionen til noget? Hvis jeg bruger auto så kommer der blot en scrollbar inde i selve content elementet - dog ville jeg allerhelst blive fri for denne (aht. til designet) og så bruge den alm. windows scrollbar i højre side!

Er der håb?

I den div hvor texten er tilføj en overflow:auto så den ser sådan her ud:
#content {
            position: absolute;
            height: 100%;
            width: 430px;
            top: 0px;
            left: 50%;
            margin-left: -215px;
            border-top: 20px solid black;
            border-bottom: 20px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            z-index: 1;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            overflow:auto;
        }

Nej du er nød til at bruge overflow.

OK, jeg prøver lige at lege lidt med det - hvad betyder z-index forresten og hvorfor sætter du egentlig den 20px sorte border på?

Hvad er det helt præcist der styrer højden på top og bottom elementerne?

Kan det passe at det er skriftstørrelsen?

Unskyld for al den spam, men nu tror jeg at jeg er med på grunden til de 20px og z-index, men jeg kan stadig ikke blive klog hvordan jeg styrer højden på top og bottom, da dit eksempel hos mig giver en hvid kant på 19px...

Så nu skriver jeg altså ikke mere :o)

Hvis jeg laver en:

#test {
  top: 100px;
  width: 4;
  height: 1;
  background: #ff0000;
}

Så bliver den 19px i højden?!

Jeg oprettede et nye spm på det med div'en, så det har jeg nu fået løst, men jeg takker mange gange for hjælpen med det andet!