problem med height:100% med <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

16 svar · 440 visningar · startad av Qonos 9 mars 2004

QonosMedlem sedan sep. 2000438 inlägg

Frågan9 mars 2004 11:48#1

Tjenare, sitter här och försöker få detta att fungera, men det vill inte som jag vill, någon som har ett förslag på hur jag skall få det att fungera?


<!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="en" lang="en">
<head>
	<title>Untitled</title>
</head>

<body>
<table>
	<tr>
		<td>
			<div style="background: silver; height: 100%">asd</div>
		</td>
		<td>asd<br />asd<br />asd<br /></td>
	</tr>
</table>
</body>

height:100%; vill inte fungera och jag tror att det beror på att jag använder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

har jag en annan DOCTYPE som fungerar det som det skall men då vill inte det andra fungera.. så med andra ord måste jag ha den jag har. Finns det något sätt att få height att fungera så den täcker hela den cellen i tabellen?

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 12:00#2

ja just det.. det blir rätt i mozilla men inte i IE

icaaqMedlem sedan okt. 20005 273 inlägg

9 mars 2004 12:05#3

Finns det någon anledning varför du ska en div?
Om inte så kan du ju sätta style på td:n istället?

mv icaaq

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 12:10#4

japp jag använder divar till att skapa ollika "borders" för att få en sådan där pixel-3d-känsla :)

PepeJeriaMedlem sedan feb. 2003774 inlägg

9 mars 2004 12:25#5

Qonos skrev:

japp jag använder divar till att skapa ollika "borders" för att få en sådan där pixel-3d-känsla :)

så då återstår frågan, varför en div? Du kan ha border på td:n också för att få en 3d-effekt

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 12:28#6

i den "skarpa" koden använder jag

						<td>
							<div id="usernameborder">
								<div id="username">
									MagnusMagnus_15
								</div>
							</div>
						</td>

där "usernameborder" ritar ut en svart border och "username" gör att det ser ut att gå uppåt, eller vad man skall säga

PepeJeriaMedlem sedan feb. 2003774 inlägg

9 mars 2004 12:53#7

Vad menar du med "det ser ut att gå uppåt" ? :)

LeonLMedlem sedan dec. 20025 871 inlägg

9 mars 2004 12:59#8

Lägg till detta mellan head-taggarna:

    <style type="text/css">
html, body {
  height: 100%;
  width: 100%;
}
    </style>

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 13:03#9

Lägg till detta mellan head-taggarna:
kod:
-------------------------------------------------------------------------------- <style type="text/css">
html, body {
height: 100%;
width: 100%;
}
</style>

hmm nope hjälpte inte :(

Vad menar du med "det ser ut att gå uppåt" ?

:D
som vilka <input type="submit"> knappar som helst :)

jarvkloMedlem sedan juli 20013 378 inlägg

9 mars 2004 13:05#10

Hmm...

Jag har inte någon källa eller något exempel tillgängligt, men fenomenet beror, om jag inte kommer ihåg helt fel nu, på att MSIE inte vill dra upp 100% i höjd på en div som ligger i en td sådär om man inte någonstans i en av dess "föräldertaggar" har en höjd som är satt till ett "icke-relativt" värde (dvs inte "auto" och inte "xx%").

testa att sätta

<table style="height:200px">

så ser du vad jag menar.

Vad man skall/kan göra åt det är svårt att gissa utan mer detaljer eftersom det förmodligen beror på hur resten av din sida ser ut.

Har du en länk?

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 13:10#11

jarvklo har skickat ett PM till dig

PepeJeriaMedlem sedan feb. 2003774 inlägg

9 mars 2004 13:18#12

Varför denna extra div för borden när du kan
<td style="border:1px solid #000;">

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 13:19#13

jo det är iofs sant att jag kan ha det så ;) , men det löser inte mitt problem :(

PepeJeriaMedlem sedan feb. 2003774 inlägg

9 mars 2004 13:25#14

Om du även sätter backgrundsfärgen på td:n så gör den väl det?

QonosMedlem sedan sep. 2000438 inlägg

9 mars 2004 13:28#15

nope eftersom jag skall ha ytterligare border på själva bakgrunden... visst kan jag göra så som sista utväg men då blir det inte som min photoshop skiss :) och det är så jag vill ha det :)

jarvkloMedlem sedan juli 20013 378 inlägg

9 mars 2004 14:17#16

Kollade din länk och såg att det inte var några konstigheter i resten av koden...

Det du *kan* göra är att fulkoda lite för att gå förbi buggen/problemet i MSIE.

Min första tanke var att göra såhär:

<!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="en" lang="en">
<head>
	<title>Untitled</title>
</head>

<body>
<table>
	<tr>
		<td [b]style="height:200px"[/b]>
			<div style="background: silver; height: 100%">asd</div>
		</td>
		<td>asd<br />asd<br />asd<br /></td>
	</tr>
</table>
</body>

Och den koden funkar också som "den ska" (dvs som du vill ;) ) i MSIE, men den skiter sig tyvärr i Mozilla när man fyller på med så mycket innehåll att cellen blir högre än 200px (bakgrunden "stannar" vid 200px höjd i Mozilla och växer alltså inte med innehållets höjd)

Urk och blä - tillbaka till skrivbordet då alltså...

Men sen kom jag på en fuling som faktiskt verkar funka: Jag lade till koden som ger en fast höjd på <td>-taggen i en villkorlig kommentar som ju då alltså ger MSIE det den måste ha, samtidigt som Mozilla får samma CSS som den fick från början (dvs den som fungerade).

Såhär blev koden då:

<!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="en" lang="en">
<head>
	<title>Untitled</title>
[b]<!--[if lte IE 6]>
  <style type="text/css">
  <!--
  #MSIEpatchad {height:200px}
  -->
  </style>
<![endif]-->  [/b]
</head>

<body>
<table>
	<tr>
		<td [b]id="MSIEpatchad"[/b]>
			<div style="background: silver; height: 100%;">asd</div>
		</td>
		<td>asd<br />asd<br />asd<br /></td>
	</tr>
</table>
</body>
</html>

Nu är ju då frågan om din design kan leva med den där MSIEpatchfulingkoden ?

QonosMedlem sedan sep. 2000438 inlägg

10 mars 2004 13:53#17

testa den fulkoden :) men jag fick det inte att fungera iaf, så jag gav upp och skrev om allt från grunden och byggde sidan på ett lite annorlunda sätt, fick fuska en del men det gick genom validatorn felfritt så :)