Varför påverkas textens storlek av om den ligger i en span eller en div?

15 svar · 679 visningar · startad av aasah 11 jan. 2007

aasahMedlem sedan mars 20034 471 inlägg

Frågan11 jan. 2007 10:35#1

På denna sida är Hint1 betydligt större än övriga "hintar". Men varför? :q Det enda som skiljer är att Hint1 ligger i en span och övriga i en div.

<form><h2>ACROSS</h2>
<p><input type="checkbox" id="getClue1" onClick="toggleCheck(1)"> B 3-8: Key 1<br>
<span class="hint" id="hintBox1">Hint 1</span></p>
<p><input type="checkbox" id="getClue2" onClick="toggleCheck(2)"> B 4-8: Key 2<br>
<div class="hint" id="hintBox2">Hint 2</div></p>
<p><input type="checkbox" id="getClue3" onClick="toggleCheck(4)"> D 1-5: Key 3<br>
<div class="hint" id="hintBox3">Hint 3</div></p>

<h2>DOWN</h2>
<p><input type="checkbox" id="getClue4" onClick="toggleCheck(3)"> 4A-D5 (Turns): Key 4<br>
<div class="hint" id="hintBox4">Hint 4</div></p>
<p><input type="checkbox" id="getClue5" onClick="toggleCheck(5)"> 6 B-F: Key 5<br>
<div class="hint" id="hintBox5">Hint 5</div></p>
<input type="button" class="buttonColorG" id="getAll"
                  onclick="showAllHints()" value="Show all hints">&nbsp;&nbsp;&nbsp;
<input type="button" class="buttonColorG" id="hideAll"
                  onclick="hideAllHints()" value="Hide all hints"></form>

#cwClues {
  font-family: 'Times New Roman', sans-serif;
  font-size: 12px;
}

#cwClues .hint {
  color:#336699;
  /*font-weight: italic; <--- ?? Hur skriver man? */
  padding:5px;
  margin:0
}

Och hur skriver man i CSS för att få kursiv stil? (Det är inte font-weight väl?)

voigtann1Medlem sedan juni 20019 519 inlägg

11 jan. 2007 10:38#2

italic:

font-style:italic;

om du vill alltid har en bestämd storlek så kan du lika bra lägga in den i body taggen.

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 10:42#3

voigtann1 skrev:

om du vill alltid har en bestämd storlek så kan du lika bra lägga in den i body taggen.

Det har jag. Dessutom ligger det en storlek i den omslutande diven. Varför får inte någon av dem genomslag för alla taggar i cwClues-diven? :q

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 10:47#4

Märkligt... om jag sätter font-size till 12px i hint också, så blir alla hints lika stora, men mindre än Key texten som också är 12 px??? Va?

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2007 10:53#5

Du importerar normal.css?v=1, vilket säkerligen är vad som orsakar förvirringen.

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 10:58#6

Peter S skrev:

Du importerar normal.css?v=1, vilket säkerligen är vad som orsakar förvirringen.

Vardå någonstans? Jag ser:

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

i den länkade filen ovan??? :q :q :q

Klassen hint finns inte ens i normal, så det har jag svårt att tro...

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2007 10:58#7

I den filen finns en @import url().

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 11:04#8

Peter S skrev:

I den filen finns en @import url().

Åh, du menar att CSS-filen inkluderar den? Ja... men varför blir det ett problem? Vad är det som krockar? Varken span eller div är satt i normal.css. table, td, tr och noline är satta, men de sätter varken storlek eller font?

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2007 11:07#9

Det har jag inte undersökt närmare. Men testa att ta bort den raden; skulle det visa sig att problemet löses vet du iaf vad som felar.

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2007 11:11#10

Jag ser nu att du bl.a. har font-size: 16px; för body.

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 11:16#11

Peter S skrev:

Det har jag inte undersökt närmare. Men testa att ta bort den raden; skulle det visa sig att problemet löses vet du iaf vad som felar.

Hmm... Jo plötsligt får allt samma storlek. Men i gengäld försvinner ju 90% av formateringen. Det är jag inte hjälpt av. Dessutom: Varken span eller div är satt i normal.css. table, td, tr och noline är satta, men de sätter varken storlek eller font?

Jag vet inte om problemet möjligen kompliceras av att jag vill ha en annan font och size på korsordssidorna - en som tar mindre plats. Här är nämligen platsen ett problem.

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 11:19#12

Peter S skrev:

Jag ser nu att du bl.a. har font-size: 16px; för body.

Jo, men jag sätter ju om font-sizen för diven cwClues. Och Klassen Hint har samma som den. Vari ligger problemet då?

cayaMedlem sedan aug. 20051 448 inlägg

11 jan. 2007 11:20#13

poängterar lite petigt ;) - du kan ha p inom div men inte tvärtom...
span är alltså rätt väg

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2007 11:22#14

Samtliga "Hint" har för mig samma storlek nu. Detta gäller den senaste versionen av IE, Op och FF.

aasahMedlem sedan mars 20034 471 inlägg

11 jan. 2007 11:32#15

Tack, Caya! Fixat. :e

Peter S skrev:

Samtliga "Hint" har för mig samma storlek nu. Detta gäller den senaste versionen av IE, Op och FF.

De är numera alla spans, och dessutom har jag låst storleken till 12 px. Det jag inte fattar är varför de är mindre än Key-raderna som också är 12 px? Hur går det till?

CSS:n nu:

/* intCW clue delen av css */
#cwClues {
  font-family: 'Times New Roman', sans-serif;
  font-size: 12px;
}

#cwClues .hint {
  font-family: 'Times New Roman', sans-serif;
  font-size: 12px;
  color:#336699;
  font-style:italic;
  padding:5px;
  margin:0
}

Peter SMedlem sedan dec. 20025 483 inlägg

11 jan. 2007 11:35#16

aasah skrev:

De är numera alla spans, och dessutom har jag låst storleken till 12 px.

Mitt inlägg gällde även innan ändringarna var gjorda.

aasah skrev:

Det jag inte fattar är varför de är mindre än Key-raderna som också är 12 px? Hur går det till?

Du sätter font-size: 16px; för alla P i normal.css?v=1.