Problem med Mozilla och tabeller
17 svar · 547 visningar · startad av Type
Ok.. Jag har inte koden här... postar kod imorgon.. Tänkte att det kanske fanns någon som visste direkt... Men jag skickar kod imorgon! Ev. finns det exempel på nyhemsida.straxunder.com
Titta då under tex spelningar.... Alla blir fel i övre delen på rutorna..
Tack på förhand!
nu kommer äntligen koden...
Hej!
Jag tänkte posta lite kod på hur jag har gjort... hoppas med detta att tråden får ett bra svar så vi kan avsluta den snart...
<table cellpadding="0" cellspacing="0" style="width:160px;height:290px;">
<tr>
<td style="width:16px;height:18"><img src="bilder/grund/smallbox/top_left.gif" alt=""/></td>
<td style="width:128px;height:18;background-image:url('bilder/grund/smallbox/top.gif');" align="center"><b>VÄLJ EN SPELNING</b></td>
<td style="width:16px;height:18"><img src="bilder/grund/smallbox/top_right.gif" alt=""/></td>
</tr>
<tr>
<td colspan="3" style="width:160px;height:100%;border:2px #E7E7E7 solid;padding:2px;background-image:url('bilder/grund/smallbox/back.png');" align="center" valign="top">
<!-- SPELNINGARNA // -->
HÄR LIGGER TEXTEN
<!-- // SPELNINGARNA -->
</td>
</tr>
<tr>
<td style="width:16px;height:18"><img src="bilder/grund/smallbox/bottom_left.gif" alt=""/></td>
<td style="width:128px;height:18;background-image:url('bilder/grund/smallbox/bottom.gif');" align="center"> </td>
<td style="width:16px;height:18"><img src="bilder/grund/smallbox/bottom_right.gif" alt=""/></td>
</tr>
</table>
Problemet är alltså att det blir mellanrum mellan cellrader i Mozilla och Mac bland annat... Vad beror dessa mellanrum på och hur får jag bort dem? Det ser bra ut i IE.
Tacksam för snabba svar...
MVH Erik
Eftersom ingen ger något svar antar jag att det inte går att lösa?
Problemet är att jag har (tror jag) fixat det förut... Är det jag som gjort något fel eller Mozilla som spökar?
/red:
Så här ser det ut i Mozilla:
På <img src="bilder/grund/menu_spelningar_on.gif" style="border:0;" alt=""/></a>
sätter du border:0
men på
<img src="bilder/grund/corner_top_left.gif" alt=""/>
har du inte med border:0
testa med att sätta in border:0 bara för att se vad som händer.
Ett tips.
Om du vill att alla img ska ha border:0 så skriv det inom head i en style tag så slipper du lägga till det på alla bilder.
Mvh
Jan-Olov
Flashes: Jag fick inte det o funka...
Det känns som att det är texten (I det här fallet "Välkommen!", se bild ovan) som ställer till problem. Jag tror att den texten kräver ett större utrymme än vad kantbilderna ger... Att det är därför det blir problem... Men jag vet inte vad man ska skriva för att ge texten mindre utrymme...
Vad tror ni om det?
Hmm...
Det som jag tycker verkar lite mysko är att i "hörnen" där du ställer in height till 18 pixlar, lägger du in bilder med <img> som är 19pixlar höga...
Det verkar vara det som är problemet i Mozilla iaf...
Sätt style="height:19px" både på "hörncellerna" och på <img>-taggarna i hörnen så får du se ;)
Ställ sedan också in både font-size och line-height i "VÄLJ EN SPELNING" så att typsnittet inte blir högre än t.ex. 18px om det behövs i din "skarpa" design ...
Du hade fått svar snabbare från mig om du hade paketerat med alla bilderna du kör med i hörnen i en bilaga till ditt inlägg...
Jag vet att jag tvekade att börja grotta med just den här tabellen eftersom det kändes byngligt att börja plocka bilderna var för sig från din webbplats (men det är nog iofs kanske bara jag som börjat bli lite lat på äldre dar ;) )
Nu går vi till botten med denna tråd.
Hej!
Tack jarvklo! Det va precis detta inlägg jag väntat på. Klockrent av någon med mycket kött på benen :D
Nu blev det tyvärr inte så bra som jag hoppades...
Det är fortfarande problem. Jag börjar tro att felet ligger i min css-fil. Där ser den relevanta koden ut så här:
body
{
font-family: Verdana,Tahoma,sans-serif;
font-size:10px;
color: #000000;
padding-top:0px;
margin:0px;
}
td
{
font-family: Verdana,Tahoma,sans-serif;
font-size:10px;
color: #000000;
padding:none;
margin:none;
border:none;
}
p
{
font: 10px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
}
Min tabell-kod ser ut så här:
<table cellpadding="0" cellspacing="0" width="280" height="438">
<tr>
<td width="21px" height="19px"><img src="bilder/grund/activebox/top_left.png" style="height:19px;"></td>
<td width="238px" height="19px" background="bilder/grund/activebox/top.png"><center><b><span style="line-height:16px;font-size:9px;">GÄSTBOKSINLÄGG _::_ TOTALT 1920</span></b></center></td>
<td width="21px" height="19px"><img src="bilder/grund/activebox/top_right.png" style="height:19px;"></td>
</tr>
<tr>
<td colspan="3" height="400" width="280" style="border:2px #BDDEF7 solid;background-image:url('bilder/grund/smallbox/back.png');" align="center" valign="top">
<iframe name="main" src="gastbok_posts.php" width="280" height="400" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" allowtransparency="true">
Du kan inte visa iframes
</iframe>
</td>
</tr>
<tr>
<td width="21px" height="19px"><img src="bilder/grund/activebox/bottom_left.png" style="height:19px;"></td>
<td width="238px" height="19px" background="bilder/grund/activebox/bottom.png"><center><b>JUST NU 14-21 _::_ <a href="#">FÖREG.</a>_ :: _<a href="#">NÄSTA</a></b></center></td>
<td width="21px" height="19px"><img src="bilder/grund/activebox/bottom_right.png" style="height:19px;"></td>
</tr>
</table>
Nu till problemet. När jag tittar på filen gastbok.php (nyhemsida.straxunder.com/gastbok.php) funkar det inte... men om jag tittar på filen test_gastbok.html (nyhemsida.straxunder.com/test_gastbok.html) funkar det som det ska...
Vad beror detta på?
Jag bifogar bilderna i nästa meddelande :D
/red
Det gick visst lite snabbt när jag la till koden... ändrade till png på två bilder....
här kommer bilderna jag använder...
Hmm...
Ja du...
Jag får inte riktigt grepp på vad som får den sidan "att ticka"...
Men den är lite motsägelsefullt kodad här och var å andra sidan...
Du anger t.ex. i <!DOCTYPE att du kör xhtml 1.0 Strict - men koden är mestadels xhtml 1.0 Transitional (med <iframe>, <center>, width-attribut m.fl...
Blir det bättre om du antingen rensar upp koden så att den validerar som Strict, eller byter <!DOCTYPE (och rensar upp koden lite så att den validerar som Transitional?
Nu har jag rensat upp koden så den validerar strict.
Problemet kvarstår...
Jag tror fortfarande att det handlar om att texten i övre delen på rutan tar upp för stor plats... Om man tittar längst ner på rutan så är det inte samma problem...
Gastbok.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>straxunder</title>
<link rel="stylesheet" href="stilmall.css" type="text/css"/>
<style type="text/css">
#mainLeftId{
left:130px;
top:120px;
}
#mainRightId{
left:440px;
}
#mainBluePictureId{
left:10px;
}
img{
border:0;
}
</style>
</head>
<body>
<!-- BAKGRUND // -->
<div id="backgroundId">
<img src="bilder/grund/background_gastbok.gif" alt=""/>
</div>
<!-- // BAKGRUND -->
<!-- BLUE PICTURE // -->
<div id="mainBluePictureId">
<img src="bilder/grund/bluepictures/patrik_right.gif" alt="PATRIK"/>
</div>
<!-- // BLUE PICTURE -->
<div id="mainLeftId">
<!-- SKRIV I GÄSTBOK // -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3" style="width:293px;height:31px;background:url('bilder/grund/gastbok/top.png');" valign="top">
<div style="margin-left:75px;margin-top:6px;"><b>SKRIV I GÄSTBOKEN:</b></div>
</td>
</tr>
<tr>
<td style="width:78px;"><img src="bilder/grund/gastbok/top_left.png" alt=""/></td>
<td style="width:170px;background-color:#FFFFFF"><input type="text" name="namn" class="inputText" /></td>
<td style="width:45px;"><img src="bilder/grund/gastbok/top_right.gif" alt=""/></td>
</tr>
<tr>
<td colspan="3" style="height:82px;background:url('bilder/grund/gastbok/middleback.png');" align="right">
<table cellspacing="0" cellpadding="0" style="width:180px;">
<tr>
<td valign="top" align="right"><img src="bilder/grund/gastbok/skriv.gif" alt=""/></td>
<td><textarea class="inputTextArea" rows="3" cols="40"></textarea></td>
<td><img src="bilder/grund/formular/submit_skicka.gif" style="cursor:hand;" alt=""/> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:78px;"><img src="bilder/grund/gastbok/bottom_left.png" alt=""/></td>
<td style="width:170px;background-color:#FFFFFF"><input type="text" name="epost" class="inputText" style="color:#0000FF" /></td>
<td style="width:45px;"><img src="bilder/grund/gastbok/bottom_right.png" alt=""/></td>
</tr>
<tr>
<td colspan="3"><img src="bilder/grund/gastbok/bottom.png" alt=""/></td>
</tr>
</table>
<!-- // SKRIV I GÄSTBOK -->
</div>
<div id="mainRightId">
<!-- ACTIVE-LAGER // -->
<table cellpadding="0" cellspacing="0" style="width:280px;height:438px;">
<tr>
<td style="width:21px;height:19px;"><img src="bilder/grund/activebox/top_left.png" style="height:19px;" alt=""/></td>
<td style="width:238px;height:19px;background:url('bilder/grund/activebox/top.png');"><b><span style="text-align:center;line-height:16px;font-size:9px;">GÄSTBOKSINLÄGG :: TOTALT 1920</span></b></td>
<td style="width:21px;height:19px;"><img src="bilder/grund/activebox/top_right.png" style="height:19px;" alt=""/></td>
</tr>
<tr>
<td colspan="3" style="width:280px;height:400px;border:2px #BDDEF7 solid;background-image:url('bilder/grund/smallbox/back.png');" align="center" valign="top">
iframen sedan...
</td>
</tr>
<tr>
<td style="width:21px;height:19px;"><img src="bilder/grund/activebox/bottom_left.gif" style="height:19px;" alt=""/></td>
<td style="width:238px;height:19px;background:url('bilder/grund/activebox/bottom.png');"><span style="text-align:center"><b>JUST NU 14-21 :: <a href="#">FÖREG.</a> :: <a href="#">NÄSTA</a></b></span></td>
<td style="width:21px;height:19px"><img src="bilder/grund/activebox/bottom_right.gif" style="height:19px;" alt=""/></td>
</tr>
</table>
<!-- // ACTIVE-LAGER -->
</div>
</body>
</html>
Jag vet vad som är fel och hur man får bort det men inte vad det beror på... Jag vet att ni som kan sitter där ute o jag skulle vara väldigt tacksam om ni förklarar varför det går ibland och inte annars...
om jag tar bort den första raden i gastbok.php så funkar det!
Det vill säga... radera raden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><
så funkar det perfekt! ... varför?
Du byter då "mod" i Mozilla och MSIE6 från "standards" till "quirks" - och då hanteras vissa mått annorlunda.
Om moder i webbläsare: http://www.hut.fi/u/hsivonen/doctype.html
Jarvklo: tack!
Det där verkade intressant.. men jag vet inte hur jag ska tillämpa det... hur ska jag få det att funka i båda? Jag testade med
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"\>" eftersom den verkade vara "grön". Alla webbläsare följde standarden... det visade sig va den jag använde! eller hur ska man använda informationen du gav mig?
/RED.
Om jag förstått sidan du länkade till rätt bör jag undvika att göra sidan som jag har gjort? Finns det något annat alternativ? För att få rutan rundad?
Om din kod funkar när du tar bort <!DOCTYPE så kan du dra slutsatsen att den alltså funkar om du ställer webbläsaren i "quirks mode".
Men att göra detta genom att helt utelämna <!DOCTYPE är ingen bra idé (att ha med en <!DOCTYPe har varit obligatoriskt sedan HTML4 kom i december 1997).
Så leta efter en <!DOCTYPE som är "röd" för alla webbläsare, dvs du tvingas i praktiken överge xhtml och köra HTML4 Transitional med en viss <!DOCTYPE eftersom du senare kommer at ha minst en <iframe> på din sida...
... om det nu är ett alternativ att "backa" till HTML4 ;)
Men förresten - det kanske inte behövs...
För om man summerar tabellcellernas bredder och din höjder, så stämmer inte siffrorna med den bredd och höjd du satt på tabellen när man kör i "standards" mode eftersom border ligger "utanför" width då...
Exempel:
width:200px; border: 2px solid black
ger en ruta som är 204px bred i "standards mode"...
Webbläsaren måste alltså kapa och justera någonstans för att alla mått skall stämma... Och all sådan "överspecificering" kan ställa till det om man har otur ;)
Prova att meka lite med detta och återkom om det inte löser sig ;)
Nu har jag gjort om det hela....
Om jag gör så här blir det inget problem i IE och Mozilla.. Inte som jag ser iaf.. Sen blir det lite enklare också! Jag hoppas det inte är några andra problem.. är det något ni ser som verkar dumt med den nya koden?
<table cellspacing="0" cellpadding="0" style="width:248px;">
<tr>
<td style="width:248px;height:20px;background:url('activebox/top.png');">TESTING</td>
</tr>
<tr>
<td style="width:248px;padding:5px;background:url('activebox/back.png');">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</td>
</tr>
<tr>
<td style="width:248px;height:21px;background:url('activebox/bottom.png');"> </td>
</tr>
</table>
Tack så mycket Jarvklo för din hjälp! Den har varit superb! :birp
Kul att mitt famlande kunde hjälpa till ;)
Jämfört med den gamla koden så tycker jag att du verkar ha gått från "råhack" till avskalad eftertanke.
Bra jobbat - Enkelt är vackert om du frågar mig! -och framför allt:
Huvudsaken att det funkar :birp