Har ett par bilder jag behöver lägg ner på textrad i absbottom-läge ... det blir bra i Firefox men i IE hamnar bilderna på bottom bara = inte längst ner på t.ex. ett "p" utan längst ner på ett "o".
Någon som är insatt? :q
Absbottom funkar inte
25 svar · 1 148 visningar · startad av miles
Har du testat med css och vertical-align:text-bottom?
Typ
<p>Min text <img src="hej.gif" style="vertical-align:text-bottom;"> och mer text</p>
/d
Jo och då hamnar den ju fortfarande bara på "bottom" (= baseline) istället för "absbottom" i både IE och Firefox.
Hittade nog en lösning ... när man specade sidan som "utf-8" hamnar bilden på absbottom men när den är "iso-8859-1" så gör den det bara i Firefox.
Vad är det som skiljer?
Spelar det någon roll?
Vad är att rekommendera för en svensk sajt som har engelsk text inkluderad?
... är lite nybörjare.
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Hm, den lägger sig rätt i min Firefox 2.0.7, 2.0.5 och IE7 när jag kikar på http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align . Vilken Firefox använder du, och vilken IE? Det kan ju vara så att tidigare versioner inte klarar det lika bra, har tyvärr inte koll på det.
Jag kör IE6 och FF2.0.7 ...
Men det var inte så enkelt, provade att ändra charset till utf-8 på den sidan som strular men inget hände!??
... kan det ha att göra med att texten har en CSS-kod i grunden på den sidan det fipplar?
Jo det har att göra med CSS ... :( o det blev ingen skillnad med att köra utf-8
Båda sidorna nedan kör med "charset=iso-8859-1", men lägger jag in CSS för texten så halkar bilden upp på baseline istället för absbottom (i IE6):
# Utan CSS = funkar: test2
# Med CSS = funkar icke: test3
Så min fråga blir då:
Hur kan jag få bilder att på textrad lägga sig absbottom på IE6-sida med CSS-styrd text?
Men va f...n nu ser jag att det funkar på test3:s nedre rad men inte den övre!??
Varför???
Kod ser ut enligt nedan:
<span class="textstyle_left">Kontakta Xxx Xxxxx <img src="images/phoneicon-smlr.gif" width="16" height="17" align="absbottom" />
0xx-xxx xxx / <a href="mailto:Xxx.Xxxxx@xxxx.se"><img src="images/mail_smallr.gif" alt="mailsml" width="14" height="14" border="0" align="absbottom" /> Xxx Xxxxx</a> <br />
eller Xxx Xxxxx <img src="images/phoneicon-smlr.gif" width="16" height="17" align="absbottom" />
0xx-xxx xxx / <a href="mailto:Xxxx.Xxxxx@xxxx.se"><img src="images/mail_smallr.gif" alt="mailsml" width="14" height="14" border="0" align="absbottom" /> Xxx Xxxxx</a></span>
Du använder xhtml transitional. Prova med strict istället.
Blev ingen skillnad ... :(
test3strict
Sidan är alltså:
XHTML 1.0 Strict + iso-8859-1 ... och felet blir i IE6
Förresten, vad är det där "absbottom"? Är det nåt IE-grejs?
Varför inte CSS och vertical-align:text-bottom? Typ:
.textstyle_left img {
vertical-align: text-bottom;
}
Är nybörjare så svaret är att det var det jag hittade först :)
Men provar jag med att byta align="absbottom" till:
style="vertical-align:text-bottom;"
... så blir det ändå ingen skillnad:
test3strict_textbottom
miles skrev:
Är nybörjare så svaret är att det var det jag hittade först :)
Men provar jag med att byta align="absbottom" till:
style="vertical-align:text-bottom;"
... så blir det ändå ingen skillnad:
test3strict_textbottom
Nej, "text-bottom" tror jag syftar på textradens baslinje som ju är samma som botten på t.ex. "o" - inte på "p".
Testa detta istället då, det ska väl funka i de flesta läsare. Är du inte nöjd med 50%, så öka värdet:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.textstyle_left img {
vertical-align:-50%;
}
-->
</style>
</head>
<body>
<p class="textstyle_left">Kontakta Xxx Xxxxx <img src="images/phoneicon-smlr.gif" width="16" height="17" align="absbottom" />0xx-xxx xxx / <a href="mailto:Xxx.Xxxxx@xxxx.se"><img src="images/mail_smallr.gif" alt="mailsml" width="14" height="14" border="0" align="absbottom" /> Xxx Xxxxx</a> <br />
eller Xxx Xxxxx <img src="images/phoneicon-smlr.gif" width="16" height="17" align="absbottom" />0xx-xxx xxx / <a href="mailto:Xxxx.Xxxxx@xxxx.se"><img src="images/mail_smallr.gif" alt="mailsml" width="14" height="14" border="0" align="absbottom" /> Xxx Xxxx</a>
</p>
</body>
</html>
Men en annan sak: På bilden med kuvertet så är det ju en massa vitt under själva kuvertet. Klipp av bilden.
YES!!! Där satt den! Stort tack Danne!!! :birp (y)
Anledningen till att jag har lagt vitt under kuvertet är för att få upp den i lagom höjd jämfört med telefonen.
Jag tror att du triggar webläsarna in i quirqs mode med din kod då du försöker med fler otillåtna element. Så webläsarna tolkar lite hur som haver.
Först så är align inne i html-koden inte tillåten.
Så tror jag du tänker lite "fel".
I och med att du har en <br /> inne i koden så blir det bara den raden efter den som är absolut längst ner i denna span. Förmodligendärför det fungerade där i ett av dina tester.
<span> kan man inte heller ha direkt i body, så för att få det rätt så bör du lägga in den i någonting, även på en testsida för att se resultatet.
Jag har inget förslag att ge... hinner inte tänka ut något nu.
Men i princip fungerar vertical-align inte så bra utanför tabeller, men vill du ha det så är det nog lättare att sätta det på texten i stf bilden.
Jag kikade på din stricta variant...
Blev dubbelpostat sorry!
tanten skrev:
Jag tror att du triggar webläsarna in i quirqs mode med din kod då du försöker med fler otillåtna element. Så webläsarna tolkar lite hur som haver.
Ok ... misstänker jag har lite fulkodning här och där => tack för informationen! (y)
Nu kikade jag på den som var strict, ser att DanneV:s är transitional, och då är lite mer tillåtet, men kolla i validatorn efter hand som du kodar. Många gånger kan man göra struntfel som gör att sidan ser annorlunda ut än vad man vill att den ska göra.
Jo börjar förstå att man inte är färdig bara för att sidan syns i webläsarn :)
tanten skrev:
Jag tror att du triggar webläsarna in i quirqs mode med din kod då du försöker med fler otillåtna element. Så webläsarna tolkar lite hur som haver.
Nej, vilka element man använder påverkar inte renderingsläget.