PDA

Pogčedajte punu verziju : IE problem : image goes over list


misk0
15. 03. 2007., 11:05
Problem: Koliko god zadavao marginu za <li> element, IE nece da ga pomjera i 'zavuce' ga ispod slike. Googlao sam malo, ali nista korisno.
FF uredno prikazuje.

Pomotjjjjjj

LiquidBrain
15. 03. 2007., 11:53
Meni se vishe svidja kako izgleda u IE-u :)

misk0
15. 03. 2007., 14:25
Ovo je ql, zar stvarno ne postoji rjesenje? Znaci definitivno, ako je image float: left, list se 'naslanja' i kraj price' :)
Jedino rjesenje - tabele??

Dragan Babić
15. 03. 2007., 14:39
IE i Fx (zapravo IE i Gecko) prave "mesta" za bullete kod listi na različite načine, jedan koristi padding a drugi margine. Probaj paddingom da napraviš mesta za bullet.

Mada ti preporučujem da kad god ti treba custom bullet da daš list-style:none; anuliraš padding i margine na list itemima, i onda na list item daš samo levi padding i staviš bullet kao background image. To je bulletproof rešenje i svuda radi.

misk0
15. 03. 2007., 14:54
IE i Fx (zapravo IE i Gecko) prave "mesta" za bullete kod listi na različite načine, jedan koristi padding a drugi margine. Probaj paddingom da napraviš mesta za bullet.

Mada ti preporučujem da kad god ti treba custom bullet da daš list-style:none; anuliraš padding i margine na list itemima, i onda na list item daš samo levi padding i staviš bullet kao background image. To je bulletproof rešenje i svuda radi.
Hvala Dragane, ali ne radi ni tako....
IE (u ovom bulet-proof rjesenju) pojede margine i paddinge i nasloni text na sliku??


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<STYLE type="text/css">
li {
background: transparent url('list_item.gif') top left no-repeat;
margin: 0;
padding-left: 20px;
}
</STYLE>
</head>
<body>
<div style="width: 100%;">
<div style="width: 600px; text-align:left; margin-left: auto; margin-right:auto; background-color: #DDDDDD;">
<img src="greska-ff.jpg" style="float: left;">
<ul style="list-style: none; margin:0; padding:0;">
<li>opzione 1Note. This document does not specify the exact mechanism of each numbering
system (e.g., how roman numerals are calculated). A future W3C Note may provide further
clarifications.Note. This document does not specify the exact mechanism of each numbering
system (e.g., how roman numerals are calculated). A future W3C Note may provide further
clarifications.</li>
<li>opzione 2</li>
</ul>
</div>
</div>
</body>
</html>

Dragan Babić
15. 03. 2007., 15:11
Opet hasLayout, dodaj zoom:1; na list item.

dee
15. 03. 2007., 15:12
sto ne stavis na cijeli UL lijevu marginu 20px?

<ul style="list-style: none; margin:0;margin-left:20px; padding:0;">

radi u IE

Dragan Babić
15. 03. 2007., 15:20
Nije kunst hakovati i praviti workarounde za IE, već ga treba naterati kad god je to moguće da tumači stvari pravilno. Dakle zoom:1 je pravo rešenje u ovom slučaju.

dee
15. 03. 2007., 15:23
nije da pilim, jos manje da ti se suprotstavljam, samo ne kontam, sto je margina na UL hack?

misk0
15. 03. 2007., 15:25
sto ne stavis na cijeli UL lijevu marginu 20px?

<ul style="list-style: none; margin:0;margin-left:20px; padding:0;">

radi u IE

meni ne :( ..... IE7.
Mozda u 6ici?

Jesi siguran da si editovao isti fajl?

Dragan Babić
15. 03. 2007., 15:28
Ja sam se možda malo nejasno izrazio, prethodni post se nije odnosio samo na ovaj slučaj, govorio sam uopšteno.

Dok ovaj tvoj predlog zaista na prvi pogled nije hack, ali nije ni dobro rešenje jer iskorišćava IEovo odstupanje od standarda po kome se renderuju elementi na stranici, tako da kada pogledaš na kraju i jeste u neku ruku hack. :)

Kada mu triggeruješ hasLayout počne da se ponaša kao normalan browser.

dee
15. 03. 2007., 15:39
u pravu si :)

tnx

misk0
15. 03. 2007., 15:42
Da, hvala Dragane, radi napokon

misk0
15. 03. 2007., 16:42
J
Kada mu triggeruješ hasLayout počne da se ponaša kao normalan browser.

Da, ali zoom je IE only property i nije CSS2 kompatibilan tako da recimo CSS vraca to kao 'nepostojecu vrijednost'.

Meni je drago da to radi, ali ne vidim ovo kao 'regularan nacin' vec isto kao 'hack' :)

Dragan Babić
15. 03. 2007., 17:52
Zato tu osobinu primeniš na željene elemente kroz kondicionalni komentar da ga vidi samo IE. Inače i hasLayout je IE specific, tako da mu samo na taj način i možeš doskočiti. :)

BrainDamage
15. 03. 2007., 19:48
Da, ali zoom je IE only property i nije CSS2 kompatibilan tako da recimo CSS vraca to kao 'nepostojecu vrijednost'.

Meni je drago da to radi, ali ne vidim ovo kao 'regularan nacin' vec isto kao 'hack' :)

Pa, možeš da ga zoveš i "žnj", ako radi posao - to je to :)

ivanhoe
18. 03. 2007., 15:03
cisto ako nekom zatreba, upravo sam imao slican problem: meni napravljen od unordered liste, pri cemu je na linkove unutar <li> elemenata stavljena negativna margina i IE naravno odbija da to prikaze (odseca deo koji ide u minus). Trikovi sa zoom:1 ili height:1% nisu pomogli..

Posle malo experimentisanja sam provalio da je resenje da se stavi position:relative na link koji ima negativnu marginu... eto cisto ako nekom nekad zatreba, da zna...:)