CSS: % in mozilla und png-Gamma in IE - Seite 2

Seite 2 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_in_mozilla_und_png-gamma_in_ie_66629/page_2 - zur Vollversion wechseln!

watchout schrieb am 10.02.2003 um 22:16

Zitat von that
Date: 2000-11-20 21:37:11 PST

Aber es gibt natürlich noch immer genug Bugs...

http://www.mozilla.org/docs/web-dev...s/REC-CSS1.html

das ugly-thing daran is, dass der eine bug da drinnen - nämlich, dass die "height" nicht korrekt berechnet wird ( und ein paar andere) immer noch existieren... und das eine volle version danach...

watchout schrieb am 10.02.2003 um 22:52

Zitat von atrox
// edit: und wennst im selben style auch noch height:100%; einstellst, hast keine unschönen ränder.

na toll, wenn ich 100% mach is im opera zu hoch (unterer border nicht sichtbar) und im ns gehts
und wenn ich 22px (höhe 24 - 2*1px border) einstell dann is im ns zu niedrig, dafür gehts im opera... son dreck...

atrox schrieb am 10.02.2003 um 23:04

die üblichen lösungswege für diese art von css problemen sind:
a) mehrere divs ineinander schachteln und die fehlerhaft interpretierten attribute (zb padding) meiden, (so daß der browser gar nicht die möglichkeit hat, deine margin,border,padding und width-angaben anders zu verstehen als du es willst. (das sind ja die großen unterschiede zwischen den browsern)
b) genau das gegenteil: auf das div herum verzichten, und alle styles direkt auf das innerste Tag anwenden (in deinem fall das <A ) (geht nur, wenn du ohne padding auskommst)

watchout schrieb am 10.02.2003 um 23:16

Zitat von atrox
die üblichen lösungswege für diese art von css problemen sind:
a) mehrere divs ineinander schachteln und die fehlerhaft interpretierten attribute (zb padding) meiden, (so daß der browser gar nicht die möglichkeit hat, deine margin,border,padding und width-angaben anders zu verstehen als du es willst. (das sind ja die großen unterschiede zwischen den browsern)
b) genau das gegenteil: auf das div herum verzichten, und alle styles direkt auf das innerste Tag anwenden (in deinem fall das <A ) (geht nur, wenn du ohne padding auskommst)

tja, auf das ganz äussere div möcht ich nicht verzichten, sonst sind die vorteile vom css beim teufel und ich kanns gleich mit tables machen, ich hatte es shonmal nur mit <a> , da hat aber der ie aufgemuckt... ja es könnte der margin gewesen sein... weil genau der war das problem... gute idee ich werd mal schaun was ich zambring...

watchout schrieb am 11.02.2003 um 01:04

thx@atrox - das hats gebracht
so, meine lösung fürs protokoll:

Code:

[SIZE=1]/* -- CSS -- */
.menu {
	position:absolute;
	left:0px;
	top:154px;
	width:100%;}
.menu a {
	height:24px;
	padding-left:3px;
	background-color:#666666;
	border-top:solid 1px #939393;
	border-bottom:solid 1px #939393;
	background-image:url(btn_rasta.png);
	background-repeat:repeat-y;
	vertical-align:middle;
	line-height:22px;
	display:block;}
.menu div {
	height:9px;
	width:100%;
	overflow:hidden;}

/* -- HTML -- */
<div class="menu">
	<a href="http://validator.w3.org/check/referer">validate!</a>
	<div></div>
	<a href="www.xx.com">forum</a>
	<div></div>
	<a href="www.xx.com">downloads</a>
	<div></div>
	<a href="www.xx.com">links</a>
</div>[/SIZE]

ich hab ein bissal "gespart" :cool:

wichtig bei den leeren div's is das overflow:hidden , weil man andernfalls nie sicher einen bestimmten wert für die höhe angeben kann
auch eben das display:block is essentiell...

getestet mit ie6, opera7.01,Mozilla 1.3a (build: 2002121215)
wobei mozilla die ganzen links um 1-2px zu hoch macht... :rolleyes:

bleibt noch das gamma-problem...

atrox schrieb am 11.02.2003 um 03:43

so ists schön da haben auch die nachfolgenden generationen etwas davon.

watchout schrieb am 11.02.2003 um 21:38

http://www.libpng.org/pub/png/color...gs-gamma22.html

ie rockz... :rolleyes:

oh great:
MSIE 5.0 is an interesting case. Initially it appeared to match the non-gamma-correcting results of NN 4.x, but the two gamma 1/2.2 cases belie that appearance. It is doing something to the PNG colors, but clearly not the same thing as to the HTML and CSS colors. (Best guess: it gamma-corrects only the PNGs, but it assumes a display gamma of something other than 2.2--perhaps 2.0?)

perhaps also in ie6?

atrox schrieb am 11.02.2003 um 22:02

gibt es irgenwelche besonderen gründe warum gif nicht möglich ist ? es sieht so aus, als würde dich der sieg über diesen browser-bug noch sehr viel zeit und nerven kosten.

watchout schrieb am 11.02.2003 um 22:28

jo, das hab ich mir auch grad gedacht...
grund war ursprünglich, dass ich den coolen alpha-channel von den png's verwenden wollte... wie unhöflich von mir zu erwarten, dass der ie den richtig interpretieren kann :rolleyes:

ok, lösung: gif
(ausweichen auf das alte und vergammelte, jedoch bewährte format...)

thx für die umfangreiche hilfe atrox

atrox schrieb am 11.02.2003 um 22:31

die unterstützung für alpha-kanäle ist unter ie so schlecht (alles was nicht 100% durchsichtig ist, ist nicht durchsichtig), dass das gamma-problem nebensächlich wird.

watchout schrieb am 11.02.2003 um 22:38

Zitat von atrox
die unterstützung für alpha-kanäle ist unter ie so schlecht (alles was nicht 100% durchsichtig ist, ist nicht durchsichtig), dass das gamma-problem nebensächlich wird.

ja, das hab ich schon herausgefunden... wie gesagt "ursprünglich" (zum zeitpunkt des "leider nicht"-posts hab ich das zwar shcon gewusst, und die pics waren eh schon ohne alpha, aber irgendwie is das nicht durchgedrungen... naja wär trotzdem praktisch gewesen, hätte ich das prob lösen können... (filesize...)

watchout schrieb am 11.02.2003 um 23:57

nachtrag:
ich hab's geschafft dem netscape beizubringen die elemente in der richtigen höhe darzustellen! dazu lasse ich die "height"-definitionen weg und mache stattdessen "line-height"-definitionen, deren wert die höhe minus des borders ist - das funktioniert natürlich nicht bei %-angaben!