✔ Fuzzy Shadows von A List Apart

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
hab mal die Fuzzy Shadows von A List Apart nachgebaut, nur funktionieren die nicht.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/shadow.css">
<!--[if gte ie 5.5000]>
<link
  rel="stylesheet"
  type="text/css"
  href="ie.css"
/>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/ie.css">

</head>
<body bgcolor="#FFFF00">
<div class="alpha-shadow">
  <div>
    <img src="bilder/test.jpg" alt="just a test" />
  </div>
</div>
</body>
</html>
HTML: 
.alpha-shadow {
  float: left;
  background: url(bilder/shadow1.gif) »
  no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.alpha-shadow div {
  background: url(bilder/shadow2.png) »
  no-repeat left top !important;
  background: url(bilder/shadow2.gif) »
  no-repeat left top;
  padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
  background-color: #ffffff;

  padding: 0px;
}
HTML: 
.alpha-shadow div {
  filter:progid:DXImageTransform.Microsoft»
.AlphaImageLoader(src='bilder/shadow2.png', »
  sizingMethod='crop');
  background: none;
}

Das einzigste was ich verändert habe ist der Rand um das Bild. Hatt aber davor auch schon nicht funktioniert.

Gruß
 
Zuletzt bearbeitet:
Nimm mal das » aus dem CSS-Code raus. Es signalisiert nämlich im Original-Artikel lediglich den Zeilenumbruch innerhalb der Codezeile ;)

Code: 
.alpha-shadow {
  float: left;
  background: url(bilder/shadow1.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.alpha-shadow div {
  background: url(bilder/shadow2.png) no-repeat left top !important;
  background: url(bilder/shadow2.gif) no-repeat left top;
  padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
  background-color: #ffffff;

  padding: 0px;
}
Code: 
.alpha-shadow div {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/shadow2.png', sizingMethod='crop');
  background: none;
}
 
Dann überprüfe mal die Grafik-URI in den CSS-Dateien.

Zudem soll die ie.css mit dem Conditional Comment in das Dokument geladen werden, du rufst sie aber zweimal auf.
 
Ok, die Hitze ist schuld :) .
Nur wenn ich mir das ganze dann mit dem Webseiten Filter für IE unter FF ansehe dann ist der Schatten verschoben.

Gruß
 
Was in der ie.css notiert ist, wird vom Firefox nicht gelesen bzw. ausgeführt, da er den Conditional Comment ignoriert.

Die letzten Unterschiede, die ich in "deiner" shadow.css im Selektor .alpha-shadow img feststellen kann, sind die fehlende Rahmenformatierung und der auf 0 gesetzte Innenabstand.

Vielleicht hilft dir das weiter?
 
Also die herrausgenommene Rahmenformatierung hatt darauf keine Auswirkung. Habe ich ausprobiert.
Um auszuprobieren wies im IE aussieht habe ich mir eine Erweiterung für den FF installiert (IE Tabbing). Und er stellt den Schatten ja schon da nur halt eben so ca. 3 Pixel nach unten verschoben.
 
Die Lücke resultiert aus den Zeilenumbrüchen (=white spaces) im HTML-Code zwischen <div>...</div> und dem img-Element.

Erweitere daher mal den Selektor .alpha-shadow img mit der display:block-Eigenschaft.
 
Du hast das Semikolon vergessen:

Code: 
.alpha-shadow img {

  display:block;

  background-color: #ffffff;

  padding: 0px;

}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück