definition list IE6 vertical space problem

[segen]

Dakle ovako......
ovde imam naprvaljeno nešto sa <dl>-ovimai sada mi se dešava da u IE6 mi razbuca sve naokolo te mi radi ogroman razmak između dva reda.

Pretpostavljam da bi moga biti IE6 float model problem no igrajući se malo sa postavkama nisam dobio željeni rezultat. Također sam probao ubacit neki hack, konkretno html>body{} za sve IE ali onda mi raznese sve i u IE7. Možda mogu staviti CC za IE6 al neznam šta napisat u taj css, nisam to nikad radia pa.....
100% su mi u pitanju margine i width te height, al nikako nisan uspia dobit da mi bude u redu i naštimavajući te dimezije. Jednostavno neznam više šta da gledam.
#cont mi drži cijeli sadržaj <dl>-ova.
Čitao sam nešto o ovome međitim ne spominju se <dl> nego <ul> i <ol>. Našao sam nešto i tu i proba al nisam dobio željeni rezultat.

Svaka pomoć dobrodošla.

[nemogirl]

probaj stavit margine i padding na 0 pa kreni od tuda.
svaki browser za odredjeni tag element ima po defaultu definirane drugacije margine i padding.

hack za IE6 pocni sa
*html

a za IE7
*:first-child+html

za IE5.5 nisam sigurna ali mozda vrijedi isti kao i za IE6

[nemogirl]

p.s.
slicing a ne sliceing!!

[segen]

nemogirl wrote:

p.s. slicing a ne sliceing!!

rješeno

[segen]

nemogirl wrote:

probaj stavit margine i padding na 0 pa kreni od tuda.

a tek onda kupusa, onda mi u IE6 koliko toliko bude ok mada mi i dalje raznese dole koji red.

nemogirl wrote:

hack za IE6 pocni sa *html

ne dešava se ništa za sada, vidit ću dalje.

[segen]

evo stavia san CC za IE6 i sad je koliko toliko ok, no i dalje mi razvali doli dva tri reda.

Ah nemam pojma više.....

[maratz]

nisam gledao kod, ali IE 6 se obicno buni ako uz float: left; ne piše i display: inline;

Ako ne pomaže, upejstaj ovdje samo dio koji se tiče tog problema... markup i CSS naravno

[segen]

imam trenutno problem šta mi CC koji sam stavio uopće ne reagira na bilo kakve izmejne. Ja izbrišem kompletni css, update-am, i ništa. Primjetio sam da usprkos CC-u IE6 uvijek vuče main.css za ostale browsere. Tako da nisam uspio kokretno ništa poduzet po pitanju mog problema za sada. Vljada će proradit.

[maratz]

Ovaj fix sto sam ti javio, mozes stavit i u glavni css.

ie6.css (ili kako ga vec nazvao) zapravo sluzi za override. pa treba ici poslije main.css kako bi se primjenili ruleovi koji su dosli kasnije.

[segen]

da skužio sam! Hvala.
iden probat pa ću javit rezultat.

[segen]

maratz wrote:

Ovaj fix sto sam ti javio, mozes stavit i u glavni css.

stavio u glavni css i nema promjena.

maratz wrote:

ie6.css (ili kako ga vec nazvao) zapravo sluzi za override. pa treba ici poslije main.css kako bi se primjenili ruleovi koji su dosli kasnije.

ie.css, stavio nakon učitavanja glavnog css-a i nema efekta, ili ja radim nešto krivo, jednostavno nema override-a. Ljudi moji šta se to meni događa.
Imali DOCTYPE kakve veze sa ovim, ili šta ja znam, šta još može utjecat na izvršavanje CC-a? Kako treba izgledat taj ie.css, komplet prekopiran original sa izmejnama za IE ili samo sa onim dijelovima koji se tiči IE-a? Probao oba načina i nikakvog efekta!? Jao meni.

btw. testiram na Multiple IE's.

CC:

Code:

<link href="http://www.markoprljic.iz.hr/main.css" rel="stylesheet" type="text/css" media="screen" /> <!--[if lte IE 6]><link href="http://www.markoprljic.iz.hr/ie.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

CSS:

Code:

.preview {list-style:none; width:110px; height:84px; margin:0 21px 100px 0; float:left; display:inline;} .preview dd a {text-decoration:none; border-bottom: 1px dashed #999999;} .preview dd a:hover {text-decoration:none; border-bottom: 1px dashed #22b1e1;} .preview dt {height:27px; } .preview dd {padding:0; margin:0;} .preview dd.visit {padding:0; margin:20px 0 0 0;}

HTML:

Code:

<dl class="preview">   <dt><img src="images/web.jpg" alt="web" /></dt>    <dd><a href="#" onmouseover="Tip('<img src=\'images/large/mile_preview.jpg\' width=\'600\' height=\'400\'>', BGCOLOR, '#FFFFFF', BORDERCOLOR, '#CCCCCC',DELAY, 10,FADEIN,200,FADEOUT,100)"><img src="images/web/mile.jpg" alt="img" /></a> </dd>    <dd class="visit"><a href="http://www.mile-suveniri.com" target="_blank">Visit online</a></dd> </dl>

[maratz]

Aha... ovako dakle.

napravi markup ovakav:

Code:

<ul id="lista">    <li class="first-in-row"><dl>       <dt><img src="images/web.jpg" alt="web" /></dt>       <dd><a href="#"><img src="images/web/mile.jpg" alt="img" /></a>        </dd>       <dd class="visit"><a href="http://www.mile-suveniri.com" target="_blank">Visit online</a></dd>    </dl></li>    <li><dl>       <dt><img src="images/web.jpg" alt="web" /></dt>       <dd> <a href="#"><img src="images/web/nxgas_new.jpg" alt="img"/></a></dd>       <dd class="visit"><a href="http://www.nxgas.com/html_cro/" target="_blank">Visit online</a></dd>    </dl></li>    <li><dl>       <dt><img src="images/web.jpg" alt="web" /></dt>       <dd> <a href="#"><img src="images/web/banini_new.jpg" alt="img"  /></a></dd>       <dd class="visit"><a href="http://www.banini.hr" target="_blank">Visit online</a></dd>    </dl></li>        <li><dl>       <dt><img src="images/temp.jpg" alt="img" /></dt>       <dd> <a href="#"><img src="images/temp/nx_concept_2_preview.jpg" alt="img"/></a></dd>    </dl></li>    <li><dl>       <dt><img src="images/shirt.jpg" alt="img" /></dt>       <dd> <a href="#"><img src="images/shirts/ent.jpg" alt="img" /></a></dd>        <dd class="visit"><a href="http://www.chao.com.hr/radovi/29/" target="_blank">Visit online</a></dd>    </dl></li>    <li class="first-in-row"><dl>       <dt><img src="images/shirt.jpg" alt="img" /></dt>       <dd> <a href="#"><img src="images/shirts/whooosh.jpg" alt="img" /></a></dd>        <dd class="visit"><a href="http://www.chao.com.hr/radovi/28/" target="_blank">Visit online</a></dd>    </dl></li>    <li><dl>       <dt><img src="images/media.jpg" alt="img" /></dt>       <dd> <a href="#"><img src="images/media/silabus_old.jpg" alt="img" /></a></dd>    </dl></li> </ul>

A CSS bi onda bio nesto kao:

Code:

#lista       { float: left; clear: both; width: 655px; } /* (110px + 21px) x 5 */ #lista li   { list-style: none; float: left; display: inline; width: 110px; margin: 0 21px 100px 0; } #lista li.first-in-row   { clear: both; } /* Samo u IE6 fajlu stavis ovo */ #lista li.first-in-row   { display: inline-block; } #lista li dl   { float: left; width: 100%; }

Conditional Comments ne rade na Multi-iE na istom strou, odnosno sve verzije IE-a se
javljaju kao ona koja je default instalirana, znaci ako je default IE 7, onda standalone IE 6
isto kaze da je IE 7.

Rijesenje je privremeno staviti uvjet "ako je IE 7" i testirati u IE 6 ili jos bolje instalirati
Virtualnu mašinu.

[segen]

Hvala maratz na tvom trudu i objašnjenju. Svakako velika pomoć, idem probat pa ću javit.

[segen]

Još jedno pitanje.

Zašto sve ovo stavljat u <ul>? Jel tako mora ili? Mislim da sam negdi vidia na netu ovakav primjer bez <ul> i radia je sve ok, pa me zanima jel to nužno sad u mom slučaju ili?

[maratz]

jer je ispravno.

[segen]

hehe, hvala, odsada onda radim uvijek tako.

[mamica]

@maratz: a jel možeš malo detaljnije objasniti ispravnost svog markupa? Ili nabaciti link? Naime, nije mi jasno zašto bi ugnježđivanje dva tipa liste <ul><dl> u ovom kontekstu bilo primjerenije od same <dl>. Ili to ima veze s "on having layout" problemom (link u prvom postu)?

[maratz]

Definition lista nije list-item, a u ovom bi slučaju trebala bi biti, jer je svaki rad dio liste
radova. Iako tehnički je lista, ovdje služi za kontekstualno povezivanje trojki
naziv-slika-link za pojedini rad. Neka ne buni DL element, on je tu zato da
poveže DT i odgovarajuće DD-ove.

Dakle strukturalna shema:

Lista radova (ul)
-- Rad (li)
---- Naslov rada (dt)
------ Slika rada (dd)
------ Link (dd)
-- Rad (li)
---- Naslov rada (dt)
------ Slika rada (dd)
------ Link (dd)
-- Rad (li)
---- Naslov rada (dt)
------ Slika rada (dd)
------ Link (dd)

Last edited by maratz on 03.04.2008 23:30; edited 1 time in total

[segen]

to znači da sam mogao napraviti sve i bez <dl>-ova, samo sa <ul> i <li> samo bi onda za svaki rad imao jednu <ul>, šta ne? Al dobro, išao sam se malo poigrat ovako, dobro je ispalo.

Btw. maratz, testirao sam onaj kod od tebe, ima nekih poboljšanja, konkretno mi prikazuje svugdi isto samo opet malo razneseno, sad bi se samo treba pozabavit uštimavanjem. Idem na put sutra, pa kad se vratim.

Big tnx maratz!

[maratz]

segen wrote:

to znači da sam mogao napraviti sve i bez <dl>-ova, samo sa <ul> i <li> samo bi onda za svaki rad imao jednu <ul>, šta ne? Al dobro, išao sam se malo poigrat ovako, dobro je ispalo.

Tehnički da, ali onda ne bi imao kontekstualno povezane naziv rada, sliku i link.

[segen]

Da. I get it now.

[mamica]

Me too - fala Marac