---
title: "Absbottom funkar inte"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/165088-absbottom-funkar-inte"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "miles"
published: "2007-10-02T13:33:32.000Z"
updated: "2007-10-02T20:38:30.000Z"
replies: 25
views: 1157
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/165088-absbottom-funkar-inte"
---

# Absbottom funkar inte

_Sida 1 av 2._

## #1 — miles, 2007-10-02T13:33Z

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

Permalänk: https://www.webforum.nu/p/165088

## #2 — Davlid, 2007-10-02T13:41Z

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

Permalänk: https://www.webforum.nu/p/2036072

## #3 — miles, 2007-10-02T13:54Z

Jo och då hamnar den ju fortfarande bara på "bottom" (= baseline) istället för "absbottom" i både IE och Firefox.

Permalänk: https://www.webforum.nu/p/2036074

## #4 — miles, 2007-10-02T14:12Z

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" />
```

Permalänk: https://www.webforum.nu/p/2036075

## #5 — Davlid, 2007-10-02T14:18Z

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.

Permalänk: https://www.webforum.nu/p/2036076

## #6 — miles, 2007-10-02T14:40Z

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?

Permalänk: https://www.webforum.nu/p/2036081

## #7 — miles, 2007-10-02T15:16Z

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](http://hem.bredband.net/b274967/test2.html) 
\# Med CSS = funkar icke: [test3](http://hem.bredband.net/b274967/test3.html)

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?*

Permalänk: https://www.webforum.nu/p/2036091

## #8 — miles, 2007-10-02T15:27Z

Men va f...n nu ser jag att det funkar på [test3](http://hem.bredband.net/b274967/test3.html):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\>

Permalänk: https://www.webforum.nu/p/2036092

## #9 — Danne V, 2007-10-02T15:30Z

Du använder xhtml transitional. Prova med strict istället.

Permalänk: https://www.webforum.nu/p/2036093

## #10 — miles, 2007-10-02T15:40Z

Blev ingen skillnad ...   :( 
[test3strict](http://hem.bredband.net/b274967/test3strict.html)

Sidan är alltså:
XHTML 1.0 Strict + iso-8859-1 ... och felet blir i IE6

Permalänk: https://www.webforum.nu/p/2036100

## #11 — Danne V, 2007-10-02T15:50Z

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;
}
```

Permalänk: https://www.webforum.nu/p/2036102

## #12 — miles, 2007-10-02T16:05Z

Ä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](http://hem.bredband.net/b274967/test3strict_textbottom.html)

Permalänk: https://www.webforum.nu/p/2036109

## #13 — Danne V, 2007-10-02T16:20Z

> **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](http://hem.bredband.net/b274967/test3strict_textbottom.html)

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.

Permalänk: https://www.webforum.nu/p/2036113

## #14 — miles, 2007-10-02T16:22Z

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.

Permalänk: https://www.webforum.nu/p/2036114

## #15 — tanten, 2007-10-02T16:46Z

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...**

Permalänk: https://www.webforum.nu/p/2036124

## #16 — tanten, 2007-10-02T16:47Z

Blev dubbelpostat sorry!

Permalänk: https://www.webforum.nu/p/2036125

## #17 — miles, 2007-10-02T16:58Z

> **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)

Permalänk: https://www.webforum.nu/p/2036129

## #18 — tanten, 2007-10-02T17:14Z

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.

Permalänk: https://www.webforum.nu/p/2036136

## #19 — miles, 2007-10-02T17:28Z

Jo börjar förstå att man inte är färdig bara för att sidan syns i webläsarn :)

Permalänk: https://www.webforum.nu/p/2036140

## #20 — zcorpan, 2007-10-02T17:35Z

> **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.

Permalänk: https://www.webforum.nu/p/2036141

---

Tråden på webben: https://www.webforum.nu/amne/html-css/165088-absbottom-funkar-inte  
Nästa sida: https://www.webforum.nu/amne/html-css/165088-absbottom-funkar-inte/page2.md
