webForumDet fria alternativet

Klassiker: bilder bredvid varandra & IE

HTML & CSS

8 svar · 593 visningar · startad av hltm

Medlem sedan nov. 2004438 inlägg
Frågan#1

Sitter med följande:
#content-pics {
display:block;
float:left;
clear:none;
width:477px;
height:163px;
margin:0;
padding:0;
}
#content-pics img {
display:block;
float:left;
clear:none;
border:0px;
margin:0px;
padding:0px;
}

I content-pics placerar jag sedan två bilder, en med 163px bredd & en med 314px bredd. De ligger snällt o fint bredvid varandra i FF & Opera men inte i IE 6??
#content-pics i sig ligger inuti #main-content;

#main-content {
width:477px;
margin:0;
padding:0;
float:left;
clear:none;
}

- Förslag på lösning? Provade först med att bara låta bilderna ligga som block i #main-content, sedan både som inline & nu som block i #content-pics men ingen skillnad?

Medlem sedan nov. 20051 596 inlägg
#2

Hej,

Det du egentligen bara behöver är
#content img {
float:left;
border:0px;
margin:0px;
padding:0px;
}
för att få dit bilderna som du vill.
<div id="content"><img ..... /><img ... /></div>

Medlem sedan juli 20013 378 inlägg
#3

Hmm...

Vad händer om du ökar på bredden på #content-pics och #main-content med några pixlar eller så ? (brukar kunna vara knepigt det där med pixelperfekta bredder i just MSIE har jag för mig ;) )

Medlem sedan nov. 2004438 inlägg
#4

>> tanten
Jo, det trodde jag också och hade d så från början men det funkade inte.
Jag har lagt till den andra diven dels för att testa, dels för att mera innehåll ska genereras ut efteråt (dock inte nu).

>> Jarvklo
Om jag "fejkt"-minskar en av bildernas bredd m ca 8px så funkar det finfint, men blir fula marginaler mellan bilderna.

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

Medlem sedan nov. 20041 189 inlägg
#5

IE har en float-bug på 3px som försvinner om du sätter "display:inline" på bilden.
http://www.positioniseverything.net/explorer/threepxtest.html

Du kan även skriva
* html #content img {
margin: 0 -3px;
}

Medlem sedan nov. 2004438 inlägg
#6

Stort tack för svaren & framförallt echoSwe som jag just nu mest vill ge en stor kram för att 3px-hacket fungerade alldeles utmärkt; timmar av hårslitande & misströstande är slut! :e

Medlem sedan nov. 20041 189 inlägg
#7

Hehe :D
*kramar tillbaka*

Medlem sedan jan. 20066 inlägg
#8

Vet att detta redan är löst osv och att det kanske är dumt att återuppliva tråden men jag tänkte bara tacka echoSwe för att ngnstans här i tråden skrivit "display: inline". Det Var nämligen precis det jag hade glömt skriva med i min kod (annan situation dock).. jaja tack iaf, har suttit och felsökt i evighter nu.

Medlem sedan nov. 20041 189 inlägg
#9

Varsågod Cibbe :) Roligt att hjälpa. Och välkommen till webforum!

256 ms totalt · 3 externa anrop · v20260731065814-full.f363f448
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)