Width und min-width werden ignoriert?

[Miriam]

Guten Tag,
ich habe das Problem, dass ich zuerst eine Darstelung via Grafik realisiert habe. Nun wollte ich es via Css machen und habe dafür das img in ein div verändert. Leider ist der Div nun überhaupt nichtmehr zu sehen, hat jemand eine Idee? Das Css sieht folgendermaßen aus:

  
  
#Randlinks {  
z-index:7;  
position:absolute;  
left:0px;  
float:left;  
width:1%;  
max-width:12px;  
background-image: -webkit-linear-gradient(linear, bottom, top, from(rgba(40,40,40,1)), to(rgba(40,40,40,0)));  
background-image: linear-gradient(to top, black, rgba(40,40,40,0));  
/*IE*/  
filter: progid:DXImageTransform.Microsoft.gradient(  
  startColorstr=#00000000, endColorstr=#FF000000  
);  
  
/* IE8 */  
-ms-filter: progid:DXImageTransform.Microsoft.gradient(  
  startColorstr=#00000000, endColorstr=#FF000000  
);  
}

[Gunnar Bittersmann]

@@Miriam:

nuqneH

ich habe das Problem, dass ich zuerst eine Darstelung via Grafik realisiert habe. Nun wollte ich es via Css machen und habe dafür das img in ein div verändert. Leider ist der Div nun überhaupt nichtmehr zu sehen

Welchen Inhalt hat es denn? Welche Höhe hat es?

Und wozu das div? Kann der Gradient nicht Hintergrund eines sowieso schon vorhandenen Elements sein?

background-image: -webkit-linear-gradient(linear, bottom, top, from(rgba(40,40,40,1)), to(rgba(40,40,40,0)));

Die Syntax ist falsch. Für ganz alte WebKits (die inzwischen ausgestorben sein sollten) hieße es -webkit-gradient(linear, …); für mittelalte -webkit-linear-gradient(bottom, rgba(40,40,40,1), rgba(40,40,40,0)). Der aktuelle Chrome versteht bereits die präfixfreie Variante.

background-image: linear-gradient(to top, black, rgba(40,40,40,0));

Warum ist hier eine andere Farbe angegeben?

Qapla'

[Miriam]

Danke euch. Die Höhe war tatsächlich das Problem. Das man immer solche Kleinigkeiten übersehen muss, die dann alles kaputt machen XD

Das Absolute hatte ich nur kurz drin, um zu testen, ob es dann evtl funktioniert. ^^"

Danke auch wegen dem Tipp mit dem Webkit, das bin ich gerade noch am Testen und muss mir erstmal nen Browser dafür besorgen, um zu sehen, wie es funktioniert.

[Der Martin]

Hallo,

Leider ist der Div nun überhaupt nichtmehr zu sehen, hat jemand eine Idee?

hat das div-Element denn einen Inhalt?

Das Css sieht folgendermaßen aus:

CSS ist ohne das HTML, auf das es aufbaut, nicht wirklich aussagekräftig, man kann nur mutmaßen.

#Randlinks {

z-index:7;
position:absolute;
left:0px;
float:left;
width:1%;
max-width:12px;
background-image: -webkit-linear-gradient(linear, bottom, top, from(rgba(40,40,40,1)), to(rgba(40,40,40,0)));
background-image: linear-gradient(to top, black, rgba(40,40,40,0));
/IE/
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#00000000, endColorstr=#FF000000
);

/* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#00000000, endColorstr=#FF000000
);
}

  
Es fällt auf, dass position:absolute und float:left einander widersprechen - anders gesagt, beides zusammen ergibt keinen Sinn. Darüber hinaus gibst du eine Breite an (1%, jedoch maximal 12px), aber keine Höhe. Die Höhe richtet sich also nach dem Inhalt, daher meine Frage, die ich oben schon gestellt habe: Hat das Element überhaupt einen Inhalt?  
  
So long,  
 Martin  

-- 
Besteht ein Personalrat aus nur einer Person, erübrigt sich die Trennung nach Geschlechtern.  
  (aus einer Info des deutschen Lehrerverbands Hessen)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(