bild 1px hög

Varför blir det så att när jag skriver såhär

<img src="_gfx/shadow_right.png" height="100%" width="5" alt="skugga" />

så blir bilden bara 1 pixel hög? Ska den inte bli längre? Har även provat med css. Det gick inte heller. :l

När du anger höjden i procent, beräknas den efter tillgängligt utrymme, inte efter bildens storlek. Om den t.ex. ligger i en tabellcell med höjden 20 px kommer höjden 100 % att ge en bild som är 20 px hög.

Källa

Det beror på var du placerar bilden. Bilden täcker ju 100% av det som den ligger i. Den här bilden blir t.ex 200 px hög:

<div style="height: 200px;">
 <img src="bild.gif" style="height: 100%; width: 5px;" alt="skugga" />
</div>

/r Bättre sent än aldrig. ;)

Det vet jag mycket väl men om jag lägger den i en tabell som jag inte satt något fast värde på så blir den 1px hög. Ex:

<table border="0">
  <tr>
    <td>Lite text<br />lite mer text</td>
    <td><img src="_gfx/shadow_right.png" height="100%" width="5" alt="skugga" /></td>
  </tr>
</table>

Detta resulterar i att båda cellerna blir två text-rader höga men däremot så blir bilden bara 1px hög.

Så här kanske det funkar?

<table border="0" style="height: 100%">
  <tr>
    <td style="vertical-align: top">Lite text<br />lite mer text</td>
    <td><img src="_gfx/shadow_right.png" height="100%" width="5" alt="skugga" /></td>
  </tr>
</table>

Ja det gör det men då blir skuggan över hela skärmen. Jag vill bara ha det i samma höjd som den första cellens innehåll.

Det här verkar dock funka bra:

<table border="0">
  <tr>
    <td>Lite text<br />lite mer text</td>
    <td style="height: 100%"><img src="_gfx/shadow_right.png" height="100%" width="5" alt="skugga" /></td>
  </tr>
</table>

Fungerar inte heller för mig. :l I IE men inte i Opera och meningen är att det ska fungera för det mesta.

Nexus86, Sebbes förslag fungerar alldeles utmärkt i Mozilla, Opera och IE, kanske något annat som är tokigt?

Ingen aning men det fungerar inte för mig i Opera 7. :l Kan det ha någonting att göra med att jag använder colspan och rowspan?

Halva koden (den väsentliga delen):

	<table border="0" cellspacing="0" cellpadding="10" width="180">
		<tr>
			<td bgcolor="#FFFFFF" class="border" valign="top" rowspan="2" colspan="2">
				{MENU_ITEMS}
			</td>
			<td width="5" height="6" style="margin: 0; padding: 0">
				<img src="_gfx/shadow_top-right.png" height="6" width="5" alt="" />
			</td>
		</tr>
		<tr>
			<td width="5" style="margin: 0; padding: 0; height: 100%">
				<img src="_gfx/shadow_right.png" width="5" height="100%" alt="" />
			</td>
		</tr>

R// Lite redigeringar

Kan inte vara det heller. Följande kod fungerar inte heller. :l

<table border="0" cellspacing="0" cellpadding="10" width="180">
	<tr>
		<td bgcolor="#FFFFFF" class="border" valign="top">
			{MENU_ITEMS}
		</td>
		<td width="5" style="margin: 0; padding: 0; height: 100%">
			<img src="_gfx/shadow_top-right.png" height="6" width="5" alt="" /><br />
			<img src="_gfx/shadow_right.png" width="5" height="100%" alt="" />
		</td>
	</tr>

Vilken Opera version 7 menar du? Funkar det i IE och Mozilla? Första version 7 som släpptes var rätt buggig. Senaste skarpa version är 7.11, och 7.20 släpps när som helst.

Opera 7.0 Build 2637

I IE ser det helt sjukt ut och det lyckas jag inte fixa heller så det har jag gett upp på och gjort en funktion som filtrerar bort skuggan hos och Mozilla har jag inte så det kan jag inte testa men meningen är ju att jag ska hitta en allroundlösning.

Exempel på http://hardwarehacks.mine.nu/exempel.php

Opera 7.11 och IE 6 SP1 så ser det likadant ut, i Mozilla får jag en skuggeffekt. Men du kanske borde tänka om upplägget på din tabell... Eller skippa dem helt och använda dig av positionerade div:s (4 st, 2 för skuggorna)

Med positionerade div's måste jag ju ha fast storlek på div'arna och det går inte med tanke på att jag ska göra en stor också med helt olika längder beroende på vad man väljer i sidan.

Orsaken att du inte får någon skugga (eller iaf så mycket skugga som jag får) i Opera är nog att du valt Identify as MSIE 6.0. Prova ta File > Quick Preferences (alt. F12) -> Identify as Opera (alt. Ctrl+Alt+O)