CSS-kode funker ikke?

6. mai 2012

Jeg lurer rett og slett på hva som er galt, og hvorfor det ikke funker. Jeg har flere forskjellige sider med tables, og hver side skal ha sin egen stil på tabellene. Problemet er at det er bare noen av classene som blir tatt hensyn til, til tross for at jeg har laget det identisk på de forskjellige. Vi kan bruke egg, bacon og kylling som eksempel.

På den ene siden har jeg følgende:

Kode

<div class="egg">
		<h4 class="innhold">Egg</h4>
		<?php include("eggtable.php"); ?>
</div>

og på en annen side har jeg:

Kode

<div class="bacon">
		<h4 class="innhold">Bacon</h4>
		<?php include("bacontable.php"); ?>
</div>

I style.css står det:

HTML-kode

.innhold h4 {
		font-size: 1.2em;
		}
		
.egg table {
		border: 1px solid #900;
		border-collapse: collapse;
		width: 100%;
		}

.bacon table {
		border: 1px solid #009;
		border-collapse: collapse;
		width: 50%;
		}

Dette funker brillefint. Men jeg får ikke lagt til flere klasser.
På en annen side kan jeg for eksempel skrive:

Kode

<div class="Kylling">
		<h4 class="innhold">Kylling</h4>
		<?php include("kyllingtable.php"); ?>
</div>

og forsøke å skrive følgende i style.css:

HTML-kode

.kylling table {
		border: 1px solid #090;
		border-collapse: collapse;
		width: 70%;
		}

Men dette funker ikke. Kyllingtabellen blir rett og slett bare fullstendig uformatert, som om ingen css-kode gjelder. Jeg har prøvd på vanvittig mange måter, men jeg får ikke lagt til flere tabellstiler. Jeg skulle gjerne hatt en tabell med width 30% nå, og har prøvd å bare klassifisere den som en fungerende stilklasse og sette inn width:30% i selve html-tagen, men det funker ikke.

Jeg fatter ikke hvorfor det skjer. Jeg gjør rett og slett alt fullstendig identisk på alle klasser, men likevel er det kun egg og bacon som funker, alt annet ender opp uten formatering. Noen som har noen tips?

nso

popålol

Administrator

6.157 5.582

6. mai 2012

Stor K liten k. Klassenavn er case-sensitive.

Sist endret av nso; 6. mai 2012 kl. 02:26.

BbZrP

Trådstarter

42 39

6. mai 2012

Sitat av nso

Stor K liten k. Klassenavn er case-sensitive.

Vis hele sitatet...

Ah beklager. Det var rett og slett bare skrivefeil av meg i innlegget. På siden min bruker jeg andre klassenavn, alt i lowercase. Har sjekket likhet flere ganger, og sjekket akkurat igjen nå når du påpekte det.

Alt er fullstendig identisk, men det fungerer likevel ikke. Og som sagt har jeg prøvd veldig mange ganger, med veldig mange forskjellige navn. Har til og med prøvd å flytte de forskjellige klassene rundt omkring i style-filen for å se om det hjelper, men det gjør det selvsagt ikke. Det er de samme to klassene som funker, alt annet ignoreres bare.

nso

popålol

Administrator

6.157 5.582

6. mai 2012

Utenom kapitaliseringen er det ikke noe problem med eksemplene dine. Vil anta at feilen ligger en annen plass i HTML-kilden din. Det er vanskelig å si hva som er feil uten å se koden.

Sist endret av nso; 6. mai 2012 kl. 02:33.

toaos66

54 4

6. mai 2012

Har du kildekoden for eggtable.php, bacontable.php og kyllingtable.php også?

BbZrP

Trådstarter

42 39

6. mai 2012

Sitat av nso

Utenom kapitaliseringen er det ikke noe problem med eksemplene dine. Vil anta at feilen ligger en annen plass i HTML-kilden din. Det er vanskelig å si hva som er feil uten å se koden.

Vis hele sitatet...

Vel, her er HTMLen på samtlige sider.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
		<?php include("head.php"); ?>

<body>
<div id="total">
		<div id="header">
				<?php include("header.php"); ?>
		</div>
		
		<div id="container">
				<div id="meny">
						<?php include("meny.php"); ?>
				</div>
		
				<div id="innhold">
						<div id="temahead">
								<h3>Overskrift</h3>
								
						</div>
						<div class="bacon">
								<?php include("bacontable.php"); ?>
						</div>
				</div>
		
				<div id="info">
						<?php include("info.php"); ?>
				</div>
		</div>
		
		<div id="footer">
				<?php include("footer.php"); ?>
		</div>
</div>

</body>
</html>

Eneste som forandrer seg fra side til side, er den div-en med class=bacon og include bacontable. Da forandrer jeg slik at det er hundre prosent identisk, bare med annet klassenavn, selvsagt. Likevel er det kun et par av klassene som virker.

Regner da med at det er stylesheetet det er noe galt med. Men jeg kan ikke fatte hva. Det er riktignok veldig langt, på grunn av så mange forskjellige klasser, men jeg kan ikke fatte hva som skal kunne gjøre at noen klasser funker mens andre ikke gjør det.

Når det er sagt, alt dette er testet lokalt med XAMPP. Kan det rett og slett være en feil med systemet, og at det likevel vil funke dersom jeg laster filene opp på nett? Eller er det utelukket?

Sitat av toaos66

Har du kildekoden for eggtable.php, bacontable.php og kyllingtable.php også?

Vis hele sitatet...

Ja, her er htmlen:

HTML-kode

<table>
<tr>
<th>Egg</th>
<th>Egg</th>
<th>Egg</th>
</tr>
<tr>
<td>Egg</td>
<td>Egg</td>
<td>Egg</td>
</tr>
<tr>
<td>Egg</td>
<td>Egg</td>
<td>Egg</td>
</tr>
</table>

Tilsvarende for andre tabeller.

nso

popålol

Administrator

6.157 5.582

6. mai 2012

Når det er sagt, alt dette er testet lokalt med XAMPP. Kan det rett og slett være en feil med systemet, og at det likevel vil funke dersom jeg laster filene opp på nett? Eller er det utelukket?

Vis hele sitatet...

Det er utelukket. Eneste som evt kunne blitt blokkert fordi det var lokalt er runtime-kode som JS eller expressions i CSS.

Vi må nesten ha hele kildekoden til CSS'en også. Screenshots av en side som fungerer og en side som ikke fungerer hadde også hjulpet.

Sist endret av nso; 6. mai 2012 kl. 03:01. Grunn: glemte quote

toaos66

54 4

6. mai 2012

Du kunne jo prøvd med dette i CSS-fila:

Kode

table.egg {
		border: 1px solid #900;
		border-collapse: collapse;
		width: 100%;
		}

table.bacon {
		border: 1px solid #009;
		border-collapse: collapse;
		width: 50%;
		}

Og dette i eggtables.php feks.:

Kode

<table class="egg">
<tr>
<th>Egg</th>
<th>Egg</th>
<th>Egg</th>
</tr>
<tr>
<td>Egg</td>
<td>Egg</td>
<td>Egg</td>
</tr>
<tr>
<td>Egg</td>
<td>Egg</td>
<td>Egg</td>
</tr>
</table>

Og dette i bacontable.php

Kode

<table class="bacon">
<tr>
<th>Bacon</th>
<th>Bacon</th>
<th>Bacon</th>
</tr>
<tr>
<td>Bacon</td>
<td>Bacon</td>
<td>Bacon</td>
</tr>
<tr>
<td>Bacon</td>
<td>Bacon</td>
<td>Bacon</td>
</tr>
</table>

Sist endret av toaos66; 6. mai 2012 kl. 02:56.

BbZrP

Trådstarter

42 39

6. mai 2012

Sitat av nso

Vis hele sitatet...

Test fungerer ikke
Fungerer.. (Whitet ut noen kolonner for privacy's sake..)

Her er kodene:

Kode

	<div id="temahead">
		<h3>Tabell 2012</h3>
</div>
<p style="text-align: right; font-size: 1em;">Sist oppdatert: 30/4-12</p>
<div class="sestabell">
		<?php include("inctabell.php"); ?>
</div>

Kode

	<div id="temahead">
		<h3>TEST TEST TEST</h3>
</div>
						
<div class="testest">
		<?php include("tabtest.php"); ?>
</div>

Og CSS:

HTML-kode

.sestabell table {
		border: 1px solid #090;
		border-collapse: collapse;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		}

.sestabell th {
		background-color: #090;
		color: #fff;
		padding: 3px;
		}
		
.sestabell td {
		border-left: 1px solid #090;
		border-right: 1px solid #090;
		width: auto;
		padding: 4px 7px;
		white-space: nowrap;
		}

.testest table {
		border: 1px solid #090;
		border-collapse: collapse;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		}
		

.testest th {
		background-color: #090;
		color: #fff;
		padding: 3px;
		}
		
.testest td {
		border-left: 1px solid #090;
		border-right: 1px solid #090;
		width: auto;
		padding: 4px 7px;
		white-space: nowrap;
		}

Jeg skjønner lite.

Sist endret av BbZrP; 6. mai 2012 kl. 03:17.

nso

popålol

Administrator

6.157 5.582

6. mai 2012

Siden det rundt er likt må det være forskjell i hva tabtest.php returnerer og det inctabell.php returnerer. Vis oss (copy-paste) selve HTML'en som tabtest.php returnerer.

Sist endret av nso; 6. mai 2012 kl. 03:19.

BbZrP

Trådstarter

42 39

6. mai 2012

Sitat av nso

Siden det rundt er likt må det være forskjell i hva tabtest.php returnerer og det inctabell.php returnerer. Vis oss (copy-paste) selve HTML'en som tabtest.php returnerer.

Vis hele sitatet...

tabtest.php:

HTML-kode

<table>
<tr>
<th>Egg</th>
<th>Egg</th>
<th>Egg</th>
</tr>
<tr>
<td>Egg</td>
<td>Egg</td>
<td>Egg</td>
</tr>
<tr>
<td>Egg</td>
<td>Egg</td>
<td>Egg</td>
</tr>
</table>

inctabell.php (copypaste bortsett fra anonymisering av innhold):

HTML-kode

<table>

<tr>
		<th>#</th>
		<th>Lag</th>
		<th>S</th>
		<th>V</th>
		<th>U</th>
		<th>T</th>
		<th>M&aring;l</th>
		<th>P</th>
</tr>

<tr>
		<td>1</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>2</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>3</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>4</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>5</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>6</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>7</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>8</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>9</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>

<tr>
		<td>10</td>
		<td>Anon</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x</td>
		<td>x &ndash; x</td>
		<td>x</td>
</tr>
</table>

nso

popålol

Administrator

6.157 5.582

6. mai 2012

Det ser helt likt ut. Du får nesten gjøre de to sidene (en som funker og en som ikke funker) tilgjengelig på nett så vi får se nøyaktig hvordan bitene faller sammen, det blir da også mye lettere å ta i bruk debug-tools enn når vi får servert bruddstykker av totalbildet. Du får seff ta å anonymisere dataen først.

Alternativt kan du kopiere inn kildekoden fra browseren for hver av sidene. Altså CTRL+U i browseren og paste inn hele kildekoden. Det er ikke så interessant hva du har tenkt den skal gjøre (php-include), det er mer interessant å se hva den faktisk har gjort.

Sist endret av nso; 6. mai 2012 kl. 03:36.

BbZrP

Trådstarter

42 39

6. mai 2012

Sitat av nso

Vis hele sitatet...

Nå funket det plutselig. Har refreshet jevnlig, uten hell, men nå funket det plutselig, ca 20 min etter at jeg rørte filene sist. Kanskje det bare er tregheter i XAMPP? Har slitt litt med at andre endringer jeg gjør, ikke vises dersom jeg oppdaterer en og samme browser, men det problemet løser jeg ved å tømme cachen eller prøve en annen nettleser. Dette problemet med klasser, har jeg derimot hatt selv med tom cache og i alle nettlesere. Men nå funker det altså plutselig.

Mener jeg tidligere har slitt med dette i flere dager. Altså at jeg har opprettet ny klasse om kvelden, uten å få ønsket resultat, og deretter lagt meg og ikke rørt filene på to dager, for så å komme tilbake og refreshe for å få akkurat samme, mislykkede resultat to dager senere.

Vanligvis når det har skjedd, så har jeg jo bare gått inn og endret på nytt igjen med en gang jeg ser det ikke virker. Men nå har det altså fungert, etter 20 min venting. Tror som sagt jeg tidligere har ventet i timer og dager uten synlig effekt. Vet du hva som kan være problemet? Kjipt å ikke umiddelbart kunne se endringene man gjør.

(Dette blir dog kanskje bedre når jeg får lastet det opp på nett?)

Sist endret av BbZrP; 6. mai 2012 kl. 03:45.

nso

popålol

Administrator

6.157 5.582

6. mai 2012

Det er ingen caching i xampp, så det må være nettleseren din. Antar du refresher med F5 istedetfor CTRL+R

toaos66

54 4

6. mai 2012

Du husket å hente inn style.css i alle filene ja?
Altså:

HTML-kode

<link rel=stylesheet type="text/css" href="style.css">

i <head>-taggen.