» »

Čuden margin v IEju

Čuden margin v IEju

Ziga Dolhar ::

V html sem vstavil nek kontejnerski objekt, vanj pa dva objekta, ki imata nastavljen float: left in margin-left: 10px;.

V Firefoxu dela vse bp; v IEju pa se pojavi težava, da izriše levi margin "levega elementa" (prvega div-a) dvojno: torej, če je nastavljen na 1px, ga izriše še enkrat širšega od desnega elementa, če 10px pa kar 20px.

Tech-demo

V čem bi lahko bila težava? (In rešitev, ki po možnosti ni določanje padding-left nosilnemu objektu).
https://dolhar.si/

Netrunner ::

h.. če bi dal kodo bi ti lahko še kaj pomagal ....tako pa ...

kakorkoli moraš vedet da IE in mozzila razumeta drugače pojem margin in padding .... in okoli tega iz mojih izkušenj imam vedno sranje ... ma vse se da rešit :)
Doing nothing is very hard to do... you never know when you're finished.

Ziga Dolhar ::

Saj je koda, celo polinkal sem jo :-).

Pa vseeno:

<div style="width: 500px; background-color: red; clear: both; ">
	<div style="width: 200px; background: yellow; margin-left: 0px; float: left; ">Bla</div>
	<div style="width: 200px; background: yellow; margin-left: 0px;float: left;  ">Bu</div>
	<div style="clear: both; ">&nbsp;</div>
</div>

<div style="width: 500px; background: red; clear: both; ">
	<div style="width: 200px; background: yellow; margin-left: 1px; float: left; ">Bla</div>
	<div style="width: 200px; background: yellow; margin-left: 1px; float: left; ">Bu</div>
	<div style="clear: both; ">&nbsp;</div>
</div>

<div style="width: 500px; background: red; clear: both; ">
	<div style="width: 200px; background: yellow; margin-left: 10px; float: left; ">Bla</div>
	<div style="width: 200px; background: yellow; margin-left: 10px; float: left; ">Bu</div>
	<div style="clear: both; ">&nbsp;</div>
</div>
https://dolhar.si/

Netrunner ::

heh sem spregledal link ....

s CSSjem delam vsaki dan in sem naletel že na kup podobnih problemov ... samo zdej mi prav ne pade na pamet kaj je tukaj narobe ... zanimiv problem ... zdej na delu se nimam časa zjnim ubadat ... doma bom vrgel še eno očke kaj je narobe .... pa ti sporočim
Doing nothing is very hard to do... you never know when you're finished.

veteran ::

v IEju pa se pojavi težava, da izriše levi margin "levega elementa" (prvega div-a) dvojno

Verjetno je double float margin bug, star hrošč (mi je že nagajal;).

Tole preglej:
http://www.positioniseverything.net/explorer/doubled-margin.html

SeTAr ::

take probleme ponavadi rešim tako, da 2x napišem isti rule, s tem da dam najprej tistega od firefoxa in še ! important zraven:
margin-left:10px !important;
margin-left:5px;

root987 ::

To je ena izmed možnosti...

Lahko pa narediš IEju lasten CSS in potem tega serviraš sam IEju z "conditional comments", ki jih pozna samo IE.

Ti dam kar iz mojega sourca primer:
<!--[if lte IE 6]>
<link rel='stylesheet' type='text/css' href='css/iehack.css'>
<![endif]-->

iehack (zaenkrat):

ul {
height:30px;
}
Preostali dizajn pa IE dopolnjuje z "skupnim" cssom.

Prednost pred !important? Predvsem večja preglednost, IMHO.

P.S. if lte IE 6 -> less or equal (lahko bi dal samo [if IE] ampak bodo morda v IE7 kaj čarali - forward compability)
"Myths which are believed in tend to become true."
--- George Orwell

Zgodovina sprememb…

  • spremenil: root987 ()

root987 ::

"Myths which are believed in tend to become true."
--- George Orwell

Ziga Dolhar ::

Zgornjo težavo sem rešil z display: inline (hvala, veteran!). Serviranje različnih dokumentov se mi ne zdi priročno.

Tudi sicer želim take težave vedno rešit z dodatno deklaracijo ali selektorjem in čim manj ostalega smetenja.
https://dolhar.si/


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1298342549 (1686) sunniegoldie
»

HTML in CSS težava pri razporeditvi DIV elementov

Oddelek: Izdelava spletišč
14956 (776) MisterR
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519718 (7517) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62421 (2368) amaze646
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
133040 (2906) Road Runner

Več podobnih tem