Avatar billede htm Nybegynder
24. juni 2003 - 21:50 Der er 26 kommentarer og
1 løsning

Tablesproblemer i Opera

Hej

Hvordan jeg få min undermenu til at være variabel sådan at den tilpasser sig Main?

I IE virker det fint
I Mozilla virker det fint

Men I Opera 7.11 Er den ligeglad med min height: 100%

Den bliver bare pænt siddende på midten, af tabellen! Hvordan kan jeg få den til at se OK i Opera også?

Link: http://www.munchi.dk/tabletest.php
Avatar billede pixeldude Nybegynder
24. juni 2003 - 22:33 #1
Det er fordi at ifølge standarden findes height attributten ikke til table tagget.  Det er kun IE, NS/Mozilla der tror de er smarte ved at understøtte det.

Måden du forsøger at lave et layout på er heller ikke valid længere.  Tabeller er kun til præsentation af tabulære data.  For at få dit design optimeret til XHTML og måske senere XML bør du bruge CSS til det, læs lidt på følgende web-site:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
Avatar billede htm Nybegynder
24. juni 2003 - 22:38 #2
Øøøh har du overhovedet kigget på min side?

Den overholder XHTML og kører med højden i CSS! - Kunne godt tænke mig at vide konkret hvad der skal laves om på det!
Avatar billede pixeldude Nybegynder
24. juni 2003 - 22:41 #3
Jeg syntes da lige jeg har kigget ... øjeblik
Avatar billede pixeldude Nybegynder
24. juni 2003 - 22:43 #4
Jeg mente at du skulle droppe dine tabeller, og så lave designet i CSS med <div> tagget istedet.
Avatar billede htm Nybegynder
24. juni 2003 - 22:45 #5
Det var ikke det du skrev ;o)

Jeg har ikke tænkt mig at lave det med div-tag, hvis dette kan undgås. Vil gerne have det i tabels! Og det burde også kunne lade sig gøre at fikse en så lille ting!
Avatar billede pixeldude Nybegynder
24. juni 2003 - 22:55 #6
Det var det jeg mente.

Men det er ihverfalt grunde til at det ikke virker.  Der findes ikke en height attribut til table-tagget. Tjek her http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1

Hvis man gør det uden tabeller får man også en meget lettere kode.
Sådan her ser mit site f.eks ud:

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

<html>
<head>
    <title>Dammark.NET</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
    margin: 0px;
    height: 100%;
    border: none;
    background: #cccccc;
    color: #000000;
    font-family: "Verdana", Geneva, Arial, Helvetica, sans-serif;
    scrollbar-base-color:#FFEFD5;
    scrollbar-face-color:#FFEFD5;
    scrollbar-highlight-color:#000000;
}

input, textarea {
    border: 1px solid black;
    color: black;
    background-color: #cccccc;
}

h3 {
    margin-bottom: 0px;
    background: #FFEFD5;
    color: #000000;
    margin-top: 0px;
    font-size: 18px;
    font-weight: bolder;
    font-family: "Verdana", Geneva, Arial, Helvetica, sans-serif;
    border-bottom: 1px solid black;
    padding-top: 35px;
    padding-left: 3px;
    padding-bottom: 3px;
    width: 747px;
}

h4 {
    margin-bottom: 0px;
    color: #000000;
    background: #FFEFD5;
    margin-top: 0px;
    font-size: 12px;
    font-weight: bolder;
    font-family: "Verdana", Geneva, Arial, Helvetica, sans-serif;
    padding-left: 3px;
    border-bottom: 1px solid black;
}

#container {
    position: absolute;
    width: 750px;
    height: 430px;
    left: 50%;
    top: 0px;
    margin-left: -375px;
    margin-top: 10px;
    border: 1px solid black;
    background: #ffffff;
    color: #000000;
}

#box1 {
    position: absolute;
    width: 235px;
    height: 150px;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid black;
    background: #ffffff;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

#box2 {
    position: absolute;
    width: 235px;
    height: 150px;
    left: 247px;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid black;
    background: #ffffff;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

#box3 {
    position: absolute;
    width: 235px;
    height: 150px;
    left: 494px;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid black;
    background: #ffffff;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

#white {
    position: absolute;
    top: 230px;
    left: 0px;
    width: 729px;
    height: 190px;
    margin-left: 10px;
    border: 1px solid black;
    box-sizing: content-box;
    background: #ffffff;
    z-index: 7;
    -moz-box-sizing: content-box;
}

#main {
    position: absolute;
    top: 230px;
    left: 0px;
    width: 729px;
    height: 190px;
    margin-left: 10px;
    border: 1px solid black;
    box-sizing: content-box;
    overflow: auto;
    z-index: 9;
    -moz-box-sizing: content-box;
}

#mainimage {
    position: absolute;
    top: 230px;
    left: 0px;
    width: 729px;
    height: 190px;
    margin-left: 10px;
    border: 1px solid black;
    box-sizing: content-box;
    z-index: 9;
    -moz-box-sizing: content-box;
}

#mainbottom {
    position: absolute;
    top: 230px;
    left: 0px;
    width: 729px;
    height: 190px;
    margin-left: 10px;
    border: 1px solid black;
    box-sizing: content-box;
    filter:alpha(opacity=20);
    z-index: 8;
    -moz-box-sizing: content-box;
    -moz-opacity:0.2;
}

#admin {
    position: absolute;
    top: 70px;
    left: 0px;
    width: 729px;
    height: 350px;
    margin-left: 10px;
    border: 1px solid black;
    background: #ffffff;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.content {
    height: 129px;
    width: 230px;
    font: 12px "Verdana", Geneva, Arial, Helvetica, sans-serif;
    padding: 3px;
    overflow: auto;
}

.description {
    vertical-align: top;
}

.thumbnails {
    border: 1px solid black;
}

</style>
</head>
<body>
<div id="container">
    <h3>1975 | Sebastian Dammark // MultimedieDesigner MMD</h3>
        <div id="box1">
            <h4>Om Sebastian Dammark</h4>
            <div class="content">Box 1</div>
        </div>
        <div id="box2">
            <h4>Kvalifikationer</h4>
            <div class="content">Box 2</div>
        </div>
        <div id="box3">
            <h4>Referencer</h4>
            <div class="content">Box 3</div>
        </div>
    <div id="mainimage">Mainarea</div>
</div>
</body>
</html>
Avatar billede htm Nybegynder
24. juni 2003 - 23:01 #7
Og igen: Jeg vil ikke lave det med div-tags hvis dette kan undgås!
Jeg bruger ingen height attribut til table tagget, jeger udemærket godt klar over dette ikke er tilladt! Jeg bruger CSS til det samme! Og hvis du lægger mærke til det overholder siden XHTML-standarden!

p.s. En anden gang kan du så ikke smide et link til din side i stedet for at smide hele kildekoden her? Jeg hader mega lange spørgsmål, fordi der er en lang kildekode i spørgsmålet!
Avatar billede pixeldude Nybegynder
24. juni 2003 - 23:02 #8
Hvorfor vil du ikke bruge <div?
Avatar billede htm Nybegynder
24. juni 2003 - 23:06 #9
Af fler grunde:

bla:
-Jeg gider ikke sætte mig ind i hvordan det fungerer nu, har ikke rigtigt brugt det før
-Jeg har et billede jeg har delt op så det omkranser menuen, det føler jeg ikke lige får at lave med div nu!

Du skal regne med at dette eksempel jeg har smidt op er et eksempel jeg har dannet på baggrund af min rigtige side,, hvor problemet ligger! Og dette har jeg ikke lyst til at lave om!
Avatar billede pixeldude Nybegynder
24. juni 2003 - 23:08 #10
Ok
Avatar billede htm Nybegynder
24. juni 2003 - 23:30 #11
Er der virkelig ikke nogen der kan finde ud af at løse mit problem?
Avatar billede rrm Nybegynder
24. juni 2003 - 23:49 #12
skal undermenu fylde resten af pladsen i højden???
Avatar billede htm Nybegynder
24. juni 2003 - 23:50 #13
Ja!
Avatar billede knudgert Nybegynder
24. juni 2003 - 23:51 #14
Start med at sætte en enhedsangivelse i css, hvor den mangler, det er ret vigtigt at den er med.

.maintable {
    height: 600;
skal formentlig være px.
.maintable {
    height: 600px;
samt
.undermenu {
    width:100px;
    height: 100;
skal vel være %
.undermenu {
    width:100px;
    height: 100%;
Avatar billede rrm Nybegynder
24. juni 2003 - 23:53 #15
Prøv at lægge baggrundsbilledet på td'en bag tablen og så lægge tablen oven på...
Avatar billede htm Nybegynder
24. juni 2003 - 23:53 #16
knudgert>> Ok det var en lille fejlindtastning ;o) - er rettet uden bedre resultat
Avatar billede htm Nybegynder
24. juni 2003 - 23:55 #17
rrm>> Jeg forstår ikke helt hvad du mener, kan du forklare det nærmere?

Det eneste det handler om at undermenu skal være variabel i størrelse i forhold til mainvinduet!
Avatar billede rrm Nybegynder
25. juni 2003 - 00:09 #18
Jeg tænkt på følgende:

<td style="background-image:billede">
<table ..  >
  <td>
  menu
  </td>
</table
</td>

Altså det jeg vil er at bruge cellen under den tabel med undermenu m.m og så give den et bagground billede eller farve. Og så lægge en tabel ovenpå. Ved dog ikke om den er gennemsigtig men ellers kan man sætte et baggrounds billedet for den...
Avatar billede htm Nybegynder
25. juni 2003 - 00:14 #19
Kan godt se hvor du vil hen ala det jeg har lavet nu, men det duer ikke rigtigt! Jeg kan stadig ikke få min menu til at fylde hele td'en, hvilket er vigtigt!
Avatar billede rrm Nybegynder
25. juni 2003 - 00:42 #20
Hvad med dette her:
<table border="1" width="50%">
<tr>
  <td valign="top" style="width:50%;background-color:red">
  <table border="0" width="100%">
    <tr>
    <td>blabla<br>djfhdskjfhjk</td>
    </tr>
  </table>
  </td>
  <td>fsdfsdf<br><br><br><br><br>dflksjdflk</td>
</tr>
</table>
Avatar billede htm Nybegynder
25. juni 2003 - 12:09 #21
Forstår ikke hvor du vil have det ind henne? Kan du smide det ind i forhold til mig eksempel?
Avatar billede rrm Nybegynder
25. juni 2003 - 13:34 #22
Ud fra explorer versionen har jeg skruet følgende sammen: http://rrm1.users.whitehat.dk/table.html

???
Avatar billede htm Nybegynder
25. juni 2003 - 17:16 #23
Det er ikke perfekt, men det går da, Vil du smide et svar?
Avatar billede rrm Nybegynder
25. juni 2003 - 18:30 #24
ok, tror ikke det bliver bedre...
Avatar billede htm Nybegynder
25. juni 2003 - 18:31 #25
Nej det gør det nok ikke!
Avatar billede hermandsen Juniormester
25. juni 2003 - 21:48 #26
Jeg har de seneste par dage brugt nogle timer (sandsynligvis lidt for mange) i at sætte mig ind i W3C's CSS-standarder...

Lige omkring height-egenskaben i CSS fandt jeg noget meget interessant...

Det forholder sig nemlig sådan at height i CSS, version 1, ikke kan stå som procent, kun som en fast værdi, eller som "auto".

Beviset:
http://www.w3.org/TR/REC-CSS1#height

Sjovt nok så tillader CSS1 width i procent, men sådan er standarderne så underlige...

Kigger vi der i mod på CSS, version 2, så finder følgende:

Value:      <length> | <percentage> | auto | inherit
Initial:      auto
Applies to:      all elements but non-replaced inline elements, table columns, and column groups
Inherited:      no
Percentages:      see prose
Media:      visual

http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property

Sådan som jeg læser det, kan du altså godt bruge height i procent med CSS2, men ikke i table-kolonner... Opera overholder dermed standarderne, og der er sikkert ikke så megen anden udvej end at smide en <div> rundt om skidtet... <div>-tag'et er bare en style-container, og bør være lige til at gå til...

Læs mere på html.dk: http://www.html.dk/dokumentation/html4/tags/div/

Undrer mig godt nok lidt over at du kunne få det til at fungere i Mozilla, da jeg fornyligt så en bug der netop omhandlede dette problem... (http://bugzilla.mozilla.org/show_bug.cgi?id=88641#c11)
Havde selv samme problem med noget XHTML den anden dag, hvor Mozilla Firebird ikke ville benytte den style, men nu har jeg fundet ud af hvorfor... Bare underligt at det virkede i HTML 4.01!!

Nå, godt at du fandt en løsning... :)

//hermandsen
Avatar billede htm Nybegynder
25. juni 2003 - 23:12 #27
Mange tak hermandsen for den gode uddybende forklaring! Det er rart at vide!

Personligt har jeg ikke kigget på w3 for at se hvad der er understøttet af standarden, har kun kigget på hvordan det er forklaret på www.w3schools.com, derudover har jeg kigget på resultatet i de forskellige browsere!

Det med mozilla, virkede i hvert fald fint i min 1.1 - men jeg kan dermed ikke udelukke at problemet eksisterer i en senere version eller ældre version! Man skulle måske teste med den nyeste mozilla ;o)
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