[Løst] css tabell med to kolonner.

[Stian_]

Hei!

 

Jeg har et problem paa denne siden: http://fitmindscentre.com.au/

 

Jeg har en css tabell, med to kolonner, der foerste kolonne sin text (hoved innhold) er under andre kolonne sine bilder (sidebar).

Dette medfoerer at siden har en stor hvit firkant.

 

Har forsoekt aa feilsoeke med Developer tools for Chrome, uten aa finne aarsaken.

 

 

Usikker paa hvor feilen er, eller hva jeg maa endre paa.

 

Kode:

/**
* style.css utdrag
**/
 #wrapper {
display: table;
}
 #content {
display: table-cell;
 }
 #sidebar {
display: table-cell;
 }
/**
* HTML utdrag
**/
<div id="wrapper">
 <section id="content">
	<header>
	  <h2>Welcome</h2>
	</header>
	<article>
	  <header>
		<h3>Lorem ipsum</h3>
	  </header>
	  <section>
		<p>Lorem ipsum dolor sit...</p>
	  </section>
	</article>
  </section>
  <section id="sidebar">
	<nav>
	  <a href="#apply" title="Apply online today!"></a>
	</nav>
  </section>
</div>

 

 

Et annet spm. er hvorfor siden ikke vises i IE8? Dette er et lite issue, da WinXP ikke kan oppgradere til IE9. Er det grunnet html5?

 

 

HTML5: http://fitmindscentre.com.au/

CSS normalize (uendret): http://fitmindscentr...s/normalize.css

CSS: http://fitmindscentr...heets/style.css

 

Tusen takk for all deres tid og hjelp!

 

PS: Beklager mangel paa ae, oe og aa, men sitter paa australsk tastatur.

[Stian_]

Naa mistenker jeg at det kan ha noe med sidebaren, da jeg har display:block paa noen elementer der.

 

For jeg har 4 stk anchor elementer, med foelgende css kode:

 

#sidebar nav a:link:nth-child(1),
#sidebar nav a:visited:nth-child(1) {
 display: block;
 width: 296px;
 height: 111px;
 background: url(../images/side_applyonline.png);
}
#sidebar nav a:hover:nth-child(1),
#sidebar nav a:active:nth-child(1) {
 background: url(../images/side_applyonline.png) bottom;
}

 

 

Mistenker at det har noe med display: block;

[MikkelRev]

Hvorfor bruker du egentlig display: table ?

[Milktea]

Fordi han enkelt vil vise innholdet i kolonner, hva ellers?

 

#content {
 vertical-align: top;
}

[Stian_]

Hvorfor bruker du egentlig display: table ?

 

Fordi table er et design valg og burde vaere i css. html er kun for innhold...

 

 

Fordi han enkelt vil vise innholdet i kolonner, hva ellers?

 

#content {
 vertical-align: top;
}

 

Dette fungerte supert! Tusen takk. Vet du aarsaken? Jeg har en annen side, GoofProductions.com der jeg har brukt css tables ogsaa, men ikke hatt samme problem...

 

 

EDIT:

Aarsaken er at jeg brukte bilder med hoeyde paa 222px... mens height var satt til 111px. hvorfor texten gikk ned til bunnen vet jeg ikke. Det var i hvertfall forskjellen mellom denne siden og GoofProductions.com.

Tusen takk for hjelpen =)

Endret 22. april 2012 av Stian_