ugrás a tartalomhoz

CSS - WIDTH firefox vs IE

babota · 2005. Már. 9. (Sze), 19.40
Utalást már számos helyen - pl. a CSS-dobozos WebLabor-cikk hozzászólásaiban - találtam az IE elemszélesség-problémájára, de konkrét megoldásról még nem olvastam.

Azt ugye jól vettem le, hogy a Firefox értelmezi helyesen a "width" értékét, ha margin/padding/border-rel meg van bolondítva a stílus?

De: a div-ek egymásba ágyazásán vagy táblázatos (td fix szélességet kap, benne a div 100%-osat) megoldáson kívül van-e valami olyan, amivel az IE-t is rá tudom bírni arra, hogy megfelelően értelmezze a szabványt?
‹ onkeypress FireFox-ban diszkrét JavaScripttel JavaScript Menü + láthatóság ›
 ■
1

strict mode

wiktor · 2005. Már. 9. (Sze), 20.17
IE6-os strict módban jól értelmezi.
http://www.quirksmode.org/css/box.html

Ha nem akarsz strict módot, és fontos az IE<6 is, akkor szerintem underscore hack http://wellstyled.com/css-underscore-hack.html vagy IE7 http://dean.edwards.name/IE7/

szerintem :)
2

doctype

babota · 2005. Már. 10. (Cs), 02.07
köszi a gyors választ.

viszont mint jó tanuló, tovább kérdeznék, miután megkezdtem az általad írt linkek feldolgozását

- mi is egész pontosan ez a doctype-dolog, és hogy lehet szigorúra állítani?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
így? és ha igen, mire lehet még állítani?

- ha jól látom, az underscore hack, meg - amit az quirksmode-linkben találtam - a Tantek-féle box model hack az IE butaságát használja ki (ez nem is annyira kérdés). Az utóbbi "/"-es megoldással már vmi kódban találkoztam régebben, akkor nem értettem...

- az IE7 valami js-cucc?

és melyik megoldás a legcélszerűbb - szerinted? :-)
3

inknoise box model hack

babota · 2005. Már. 10. (Cs), 12.00
íme egy tipp, amire az Inknoise honlapján leletem
http://www.inknoise.com/experimental/layoutomatic.php


#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}


ez a /-es megoldás mire alapoz?
4

ie

wiktor · 2005. Már. 10. (Cs), 23.22
annyira nem vagyok expert, hogy ezeket pontosan tudjam, de általában az a titok nyitja - nagyon prózai magyarázat - hogy bugosak a böngészők. főleg az ie, ugyebár, és valami miatt helytelenül a \ jelet épp figyelmen kívül hagyja, vagy épp értelmezi, mikor hogy... :)

hogy mit javasolnék? én mindenképpen a strict módod javasolnám, mert ezzel átlagos látogatottságú siteon simán a 80%-90%-át le tudod fedni az odatévedő böngészőknek. gyakorlatilag csak az 5.0 és az 5.5-ös ie-vel van szívás, de ezeknek a részesedése hála a jó égnek egyre csökken. ha ezekhez is szeretnél támogatást, akkor szerintem a legegyszerűbb, ha beizzítod az ie7-et (ami egy javascript alapú megoldás a jobb szabvány támogatás érdekében).

én olyan css hackről nem tudok, ami csak az 5-ös ie-kre működne. bár, de van valami nagyon randa expression-ös megoldás, de ezt nem javaslom, mert csak belekavarodik az ember...:)
5

[i]"ez a /-es megoldás mire

Balogh Tibor · 2005. Már. 14. (H), 15.34
"ez a /-es megoldás mire alapoz?"
Szerintem arra, hogy az IE width-nek értelmezi, más böngésző meg semminek. De minek ilyen hack-et használni, ha jól működik az IE szelektor is.

<!--[if IE]>
	<link type="text/css" rel="stylesheet" href="" />
	<style type="text/css">
	</style>
<![endif]-->
Vagy verziómegadással:

<!--[if IE6]>
	<link type="text/css" rel="stylesheet" href="" />	
<![endif]-->
6

sbmh

wiktor · 2005. Már. 15. (K), 00.29
http://www.dithered.com/css_filters/css_only/simplified_box_model.html

arra jó, hogy az ie5.x nem értelmezi. ezekkel a felteteles kommentekkel az a bajom, hogy egy ido utan nehezen kovetheto...
7

Mégis...

Balogh Tibor · 2005. Már. 28. (H), 02.22
Már hogyne értelmezné, csak elírtam:

<!--[if IE 5]>
    <link type="text/css" rel="stylesheet" href="" />    
<![endif]-->

vagy pl.

<!--[if IE 5.5]>
    <link type="text/css" rel="stylesheet" href="" />    
<![endif]-->