Brainiac fyrir 18 árum Fjöldi lestra: 392

Fucked up listar

Jæja. Ég var að gera kommentin á síðunni minni fallegri og var rosa ánægður með útkomuna. Þangað til að ég kíkti á hana í IE. Og ég varð enn ósáttari með útkomuna í Opera.

Alla vega hér er helsti kóðinn:

HTML:

	<ol class="comms">
		
<li class=" alt"id="comment-3">
		<h3><a href='http://djofullinn.bloggar.is' rel='external nofollow'>Fusi</a></h3>
		<h4><a href="#comment-3" title="">November 6th, 2006 at 0:19</a></h4>
						
			<p>pepperoni = paprikka????? úff djöfulsins villimenn eru þetta á ítalíu,<br />
kvennfólkið er sammt greinilega betur uppalið þarna enn á íslandi :D<br />
gott að heyra að þú ert eitthvað að skemmta þér þarna, kveðjur úr rigningunni og volæðinu. :)
</p>
	</li>
	
		
<li id="comment-4">
		<h3><a href='http://www.ingvarl.bloggar.is' rel='external nofollow'>Ingvar</a></h3>
		<h4><a href="#comment-4" title="">November 6th, 2006 at 1:34</a></h4>
						
			<p>You old fart. Djöfull er samt góð menning þarna úti, að konurnar taki til og svona.
			</p>
</li>
</ol>

Og CSS:

 /* Comments */
#Main ol.comms,
#MainLarge ol.comms { 
    padding: 0;
    margin: 0 10px;
    list-style-position: inside;
}
#Main ol.comms li,
#MainLarge ol.comms li {
    font-size: 6em; /* 72px Stækka letrið fyrir listanúmerið */
    color: #CCC;
    margin: 0.2em 0 0;  /* Bil á milli commenta */
    padding: 0;
    clear: both;
    background-image: none;
    position: relative; /* svo að H3 og H4 geti orðið absolute og miði við li */
    min-height: 1.5em; /* 95px */
}
* html #Main ol.comms li,
* html #MainLarge ol.comms li { /* Þar sem yndislegi IE skilur ekki min-height */
    height: 1.5em; /* 95px */
}
ol.comms li h3 {
    font-size: 0.25em; /* 16px Laga letrið aftur*/
    color: #000;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100px;
    border-right: 3px solid #999;
    border-bottom: 0;
    padding-top: 20px;
    z-index: 2; /* Svo að h3 fari yfir h4 */
}
ol.comms li h4 {
	font-size: 0.1388em; /* 10 */
	font-weight: normal;
    border-right: 3px solid #999;
    position: absolute;
    top: 42px;
    left: 0;
    width: 100px;
    padding-top: 20px;
    z-index: 1;
}
ol.comms li h4 a {color: #000;} ol.comms li h4 a:hover {color: #999;}
ol.comms li p {
    font-size: 0.1666667em;
 /*   overflow: auto;-6*/
    margin: 0px 10px 10px 100px; /* Margin-left er til að gefa h3 og h4 pláss */
    padding-left: 15px;
    border-left: 3px solid #999;
}
ol.comms li pre {
    overflow: auto;
}
#Main ol.comms li h3,
#MainLarge ol.comms li h3 { border-bottom: 0; }
#Main ol.comms li h4,
#MainLarge ol.comms li h4 { border-bottom: 0; }

Þetta er sem sagt byggt upp eins og númeraður listi með h3 þar sem nafið fer, h4 fyrir annað og p fyrir textann. h3 og h4 eru position: absolute og fara til vinstri og p flæðir hægra megin með 100px margin.

Eða þannig er það í follkomnum heimi. Ég er með nokkrar spurnigar:
1. Af hverju lætur Firefox textann byrja fyrir neðan listanúmerið, ekki efst í li-inu?
2. Af hverju telur IE bara upp í 1 (beside it's obvious stupidity)?
3. Af hverju kemur listanúmerið neðst í IE?
4. Af hverju sést það ekki í Opera?
5. Af hverju koma h3, h4 og p með því sem virðist vera text-indent í Opera?
6. Af hverju kemur ekki bil á milli li í Opera?

Ég bjóst svo sem við IE að klúðra þessu en þar sem Opera ræður við Acid2 test þá hélt ég að þetta yrði smámál en greinilega ekki.. Alla vega: Hjálp!

hagur fyrir 18 árum

Úff … þú ert kominn á ystu nöf þarna varðandi flækjustig, þar sem að browser support á einmitt svona OL æfingum hef ég heyrt (og upplifað) að sé mjög misjafn.

En ég get sagt þér að talningaböggurinn í IE er vegna min-height (Já … min-height :S).

Prufaðu að fjarlægja min-height úr

#Main ol.comms li, #MainLarge o.comms li

og settu frekar inn þennan selector til að fá fram sömu virkni í “öllu” nema IE (hann styður ekki attribute-selectora):

#Main ol[class="comms"], #MainLarge ol[class="comms"] { min-height: 1.5em; /* 95px */ }

Þá er ég nokkuð viss um að IE læri aftur að telja rétt ;)

Ef þú nærð að laga restina af vandamálunum, ÁN þess að breyta HTML-inu/setja inn auka div o.þ.h þá áttu skilinn Thule :)

Fyrra álit

Brainiac fyrir 18 árum

Mér finnst þetta ekkert það flókið.. bara basic css notað á skrítnum stöðum.. Ef þetta er hægt með div af hverju þá ekki ol?

Meirihlutinn af þessu er bara að taka burtu gamlar skilgreiningar.

En, nei, þetta virkaði ekki, það er sennilega eitthvað annars staðar. Og af hverju í andskotanum á min-height (eitthvað sem er of flókið fyrir greygið) að hafa áhrif á hvernig IE telur? Stupid..

Og það hryggir mig að segja að síðan kemur (að því er ég best sé) nákvæmlega eins út í IE6 og IE7, þvílík framför..

Fyrra álit

halldor89 fyrir 18 árum

Mér hefur frekar þótt síður líta verr út í IE7 ef eitthvað er. T.d. hafa sumir drop down listar sem jafnvel hafa verið hannaðir fyrir IE fokkast upp.

“If it isn't documented, it doesn't exist”

Fyrra álit

hagur fyrir 18 árum

Ég held að það sé nú bara útaf því að menn hafa verið að smíða hlutina þannig að þeir virki í IE 6 og það er oft á tíðum kolröng aðferð. Í IE 7 er svo búið að laga kannski meirihlutann af rendering böggunum sem veldur því að hlutirnir sem virkuðu voða “rétt” í IE 6 fara í steik í 7.

Allir böggar sem ég hef lent í hingað til með IE 7 hafa einmitt verið þess eðlis, þ.e maður fjarlægir bara IE 6 fiffin sem maður neyddist til að gera og þá verða hlutirnir réttir í IE 7.

Þá er gott að nota conditional comments til að láta IE 6 fiffin eingöngu hafa áhrif á IE 6 …

Fyrra álit

hagur fyrir 18 árum

Skrítið, ég prufaði þetta sjálfur og þá fékk ég IE (version 7 reyndar) til að telja rétt.

Já, ég veit að þetta á að vera mjög einfalt, en staðreyndin er sú að öll element eru ekki túlkuð eins, jafnvel þó maður reyni að núlla út alla default hegðun með CSS (margin, padding, display) o.þ.h, og ég man eftir að hafa lesið einhverstaðar hversu erfitt þetta getur verið einmitt með ordered lista.

Án þess að ég sé eitthvað að verja IE, þá hefur vissulega orðið framför í útgáfu 7. Búið að laga helling af pirrandi hlutum, en margir böggar ennþá til staðar og eflaust búið að bæta einhverjum nýjum við líka eins og gengur og gerist.

Það er víst ekki hægt að skella skuldinni alfarið á IE, því þetta kemur jú hálf-beyglað út í Opera líka og hann er víst með besta CSS stuðninginn enn sem komið er.

Fyrra álit

Brainiac fyrir 18 árum

Veistu, ég er ekki frá því að þú skuldir mér eins og einn Thule: http://www.mrgunnar.com/temp/list.htm

1. Af hverju lætur Firefox textann byrja fyrir neðan listanúmerið, ekki efst í li-inu?
-Sama ástæða og texti birtist fyrir neðan þegar þú ert með stóra mynd inni í <p>. Mín lausn var að setja margin-top: -20px á ol li p en það færði bara allt li-ið upp, þá þurfti að setja padding-top: 15px; á ol li. Problem solved fyrir Firefox. Textinn kemur enn neðst í IE og Opera en ég nenni ekki að pæla í því þar sem þetta sleppur svona.

2. Af hverju telur IE bara upp í 1 (beside its obvious stupidity)?
-Það var ekki min-height sem olli þessu heldur height, ég tók það út og sætti mig við niðurstöðuna.

3. Af hverju kemur listanúmerið neðst í IE?
-Man ekki en er búinn að leysa það.

4. Af hverju sést það ekki í Opera?
-Þetta sýnist mér vera bug sem kemur þegar þú setur position: relative; á li, ég reportaði þetta og var annars sama, þetta er ásættanlegt

5. Af hverju koma h3, h4 og p með því sem virðist vera text-indent í Opera?
-Ekki hugmynd en það er ekki lengur

6. Af hverju kemur ekki bil á milli li í Opera?
-Sjá svar við 5.

Í heildina kemur þetta ágætlega út í öllum þremur en best í Firefox

Síðan og CSSið

Fyrra álit

halldor89 fyrir 18 árum

Á þetta s.s. að vera svona:
http://www.nfvi.is/halldor__skjol/fx.png
í firefox og
http://www.nfvi.is/halldor__skjol/opera.png
í opera?

“If it isn't documented, it doesn't exist”

Fyrra álit

Brainiac fyrir 18 árum

já nokkurn veginn, á eftir að gera þetta fallegra en þetta var “proof of concept”

Fyrra álit

halldor89 fyrir 18 árum

Já, ok…

“If it isn't documented, it doesn't exist”

Fyrra álit

Rusty fyrir 18 árum

Prófaðu að setja float: left; og clear: both; hér og þar. Vinnur kraftaverk.

Fyrra álit

[Notanda eytt] fyrir 18 árum

Ef þú prófar að fara inn á w3schools.com og fletta upp hinum og þessum breytum, þá sérðu að t.d. min-height er ekki stutt í IE, sem suckar.

Giska á að það sé hægt að skítamixa í kringum þetta en þetta er amk það sem mér dettur fyrst í hug

Fyrra álit

Brainiac fyrir 18 árum

Ég veit, þess vegna setti ég
* html #Main ol.comms li,
* html #MainLarge ol.comms li { /* Þar sem yndislegi IE skilur ekki min-height */
height: 1.5em; /* 95px */
} inn því IE túlkar height eins og min-height á að vera

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Almennt

Fucked up listar

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi