IE problem : image goes over list

misk0 · 15. 03. 2007.

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.

Meni se vishe svidja kako izgleda u IE-u

misk0 · 15. 03. 2007.

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.

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.

Citat:

Originalno napisao Dragan Babić

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

Kôd:

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

Opet hasLayout, dodaj zoom:1; na list item.

dee · 15. 03. 2007.

sto ne stavis na cijeli UL lijevu marginu 20px?

Kôd:

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

radi u IE

Dragan Babić · 15. 03. 2007.

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.

nije da pilim, jos manje da ti se suprotstavljam, samo ne kontam, sto je margina na UL hack?

misk0 · 15. 03. 2007.

Citat:

Originalno napisao dee

sto ne stavis na cijeli UL lijevu marginu 20px?

Kôd:

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

15. 03. 2007.	#1
misk0 majstor Wrote a book Datum učlanjenja: 30.01.2006 Lokacija: Lugano - Switzerland Poruke: 1.251 Hvala: 219 106 "Hvala" u 67 poruka	IE problem : image goes over list 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 Priloženi thumbnailovi

15. 03. 2007.	#2
LiquidBrain Milan Cvejic Wrote a book Datum učlanjenja: 05.09.2006 Lokacija: Beograd Poruke: 1.241 Hvala: 32 73 "Hvala" u 56 poruka	Meni se vishe svidja kako izgleda u IE-u __________________ http://weevify.com

15. 03. 2007.	#4
Dragan Babić Designer guy Wrote a book Datum učlanjenja: 06.06.2005 Lokacija: Novi Sad Poruke: 1.373 Hvala: 55 42 "Hvala" u 22 poruka	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. __________________ Plakatt — objavi, razglasi i saznaj za događaje DnevnikEklektika.com \| Sprawsm

15. 03. 2007.	#6
Dragan Babić Designer guy Wrote a book Datum učlanjenja: 06.06.2005 Lokacija: Novi Sad Poruke: 1.373 Hvala: 55 42 "Hvala" u 22 poruka	Opet hasLayout, dodaj zoom:1; na list item. __________________ Plakatt — objavi, razglasi i saznaj za događaje DnevnikEklektika.com \| Sprawsm

15. 03. 2007.	#7
dee Domagoj Horvat Expert Datum učlanjenja: 24.07.2006 Lokacija: Zagreb Poruke: 502 Hvala: 22 10 "Hvala" u 8 poruka	sto ne stavis na cijeli UL lijevu marginu 20px? Kôd: <ul style="list-style: none; margin:0;margin-left:20px; padding:0;"> radi u IE __________________ postoje ludosti bez kojih je nemoguce ljudsko dostojanstvo

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
Check-List & Sistematizacija	kai	e-Business	4	21. 12. 2009. 22:14
MySQL Countries list	cvele	Code snippets	7	06. 08. 2008. 22:05
mailing list	misko_	Komunikacije	2	22. 12. 2007. 18:14
PayPal list of countries	bluesman	e-Business	27	20. 01. 2007. 15:49
list-style-image i IE	hana	(X)HTML, JavaScript, DHTML, XML, CSS	4	22. 06. 2005. 16:00