Avatar billede fagghunter Nybegynder
14. september 2008 - 19:48 Der er 15 kommentarer

Divs i tabel height

Hey!

Jeg har et problem med mine divs i min tabel. Meningen er at min table skal fungere som den store container til mine divs, og grunden til dette er at jeg skal bruge en fixed center med 2 variable sider (width="100%"), og det skal jeg sådan set også med height="100%". Problemet er at jeg har sat body til height: 100%; det samme med mine divs og tabellen, dog udvider mine divs højde ikke til tabellens (det virker fint med width). Jeg har valgt at paste koden på en pastebin, da det fylder lidt:

http://pastebin.com/m284c72c0

Jeg håber I kan hjælpe mig, har brugt en del timer på det :( Jeg tanker på forhånd.
Avatar billede roenving Novice
14. september 2008 - 21:22 #1
Måske er det det, jeg viser i denne tråd, du skal bruge ?-)
Avatar billede roenving Novice
14. september 2008 - 21:22 #2
Avatar billede fagghunter Nybegynder
14. september 2008 - 22:05 #3
Nej det er det ikke. Min table height virker fint nok, måske har jeg formuleret det forkert. Tabellen bliver 100% høj, men min div's inde i tabellen fylder ikke tabellen ud, de bliver bare ligeså høje som billederne indeni. Evt copy paste min kode ind og check :)
Avatar billede jokkejensen Novice
14. september 2008 - 22:22 #4
Er det ALT din markup?, mangler du ikke elementerne body og html, som du giver height: 100%; i din CSS ?

Vh..
Avatar billede fagghunter Nybegynder
14. september 2008 - 22:53 #5
det er der self. :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Wowdo Design Studio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="main_table">
  <tr>
    <td valign="top">
    <!-- LEFT CONTAINER -->
    <div id="left_container">
        <div id="left_top"></div>
        <div id="left_menu"></div>
        <div id="left_logounder"></div>   
        <div id="left_quickview"></div>   
        <div id="left_content">&nbsp;</div> 
        <div id="left_bottom"></div>
    </div>
    </td>
    <td width="1024" valign="top">
    <!-- CENTER CONTAINER -->
    <div id="center_container">
        <!-- Top Background -->
        <div id="top_bg"><img src="images/top.jpg" width="1024" height="20" alt="top_bg" /></div>
        <!-- Menu -->
        <div id="logo"><img src="images/logo.jpg" width="264" height="42" alt="logo" /></div>
        <div id="forside"><img src="images/forside.jpg" width="114" height="42" alt="forside" /></div>
        <div id="referencer"><img src="images/referencer.jpg" width="140" height="42" alt="referencer" /></div>
        <div id="kompetencer"><img src="images/kompetencer.jpg" width="158" height="42" alt="kompetencer" /></div>
        <div id="profil"><img src="images/profil.jpg" width="98" height="42" alt="profil" /></div>
        <div id="kontakt"><img src="images/kontakt.jpg" width="107" height="42" alt="kontakt" /></div>
        <div id="kant"><img src="images/corner.jpg" width="143" height="42" alt="corner" /></div>
        <!-- Under Logo -->
        <div id="logo_under"><img src="images/logo_under.jpg" width="1024" height="25" alt="logo_under" /></div>
        <!-- Quick View Container -->
        <div id="quick_view">
            <div class="transparent"><!-- CONTENT HERE --></div>
        </div>
        <!-- Content Container -->
        <div id="content_container">
            <div class="transparent">&nbsp; <!-- CONTENT HERE --></div>
        </div>
        <!-- Bottom Container -->
        <div id="bottom_container"></div>
    </div>
    </td>
    <td valign="top">   
    <div id="right_container">
        <div id="right_top"></div>
        <div id="right_menu"></div>
        <div id="right_logounder"></div>   
        <div id="right_quickview"></div>   
        <div id="right_content">&nbsp;</div> 
        <div id="right_bottom"></div>
    </div></td>
  </tr>
</table>
</body>
</html>
Avatar billede roenving Novice
15. september 2008 - 06:18 #6
Med en xml-prolog udelukker du i hvert fald korrekt tolkning af en hel del centrale elementer af css i IE(6- ?-)
Avatar billede fagghunter Nybegynder
15. september 2008 - 11:21 #7
Hvad mener du? Det er ikke strict...
Avatar billede roenving Novice
15. september 2008 - 16:15 #8
Prøv dette simple dokument:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<html>

<head>

<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
div{width:100px;height:100px;border:35px solid red;text-align:center;padding-top:35px;}
</style>
</head>
<body>
<div id="minDiv">En div-tekst</div>
</body>

</html>

-- prøv derefter at fjerne xml-deklarationen (1. linje !-)

-- prøv derefter også at fjerne doctypen og bemærk hvor den er korrekt !o]
Avatar billede fagghunter Nybegynder
15. september 2008 - 17:10 #9
Måske er jeg blind. Dit dokument, i Firefox er den det samme hele tiden, i IE7 skifter den efter man først fjerne doctypen og ikke til 100px gange 135px (altså den hvide box, med padding 35px) men til størrelsen af teksten med 35px ned (og teksten er ikke verdana i IE7 eller hvad det nu er). Hvis man bruger http://ipinfo.info/netrenderer/ så se min kode ud til at virke fint både på 5.5 og 6.0 (ja bortset fra at jeg bruger en gennemsigtig .png men er i gang med at bruge en workaround).
Avatar billede roenving Novice
15. september 2008 - 17:13 #10
Jepz, fjern xml-deklarationen og den er ens i samtlige browsere !-)
Avatar billede olebole Juniormester
15. september 2008 - 17:49 #11
<ole>

I IE6 vil alt, der bliver skrevet før DTD'en, bevirke, at IE går i såkaldt 'quirks mode'. Det bevirker bl.a, at CSS' box model sættes ud af kraft. Din XML-deklaration svarer - hvad CSS-understøttelse angår - til helt at udelade DTD'en i IE6.

Bug'en er rettet i IE7

/mvh
</bole>
Avatar billede olebole Juniormester
15. september 2008 - 17:51 #12
- men hvorfor overhovedet bruge en XML-deklaration til XHTML 1.0 Transitional? Sådan en kode vil jo alligevel aldrig kunne parses som andet end HTML  =)
Avatar billede fagghunter Nybegynder
15. september 2008 - 21:28 #13
Det er et godt spørgsmål. Jeg har fulgt HTML.dk's tut på XHTML og hvad der er forskellen, så C/P det øverste...
Avatar billede fagghunter Nybegynder
15. september 2008 - 22:16 #14
Mit oprindelige problem er der stadigvæk, jeg kan ikke forstå hvorfor den ikke kan tilpasse højden efter en tabel? latterligt..
Avatar billede olebole Juniormester
16. september 2008 - 02:35 #15
CSS foreskriver, at en relativ højde (f.eks. en højde sat i procent) skal beregnes udfra det omkransende elements højde - som derfor eksplicit skal være sat.

Det 'latterlige' er vel bare, du ikke har sat en højde på din tabelcelle  =)
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