Rahmen mit Padding um Bild

Status
Nicht offen für weitere Antworten.
C

Chosi

Mitglied
Hi zusammen,

ich habe noch ein kleines CSS Problem. Und zwar möchte ich folgenden Rahmen um ein Bild erstellen: Erst einen 3px breiten Streifen und darum nocheinmal einen 1px breiten weiteren Rahmen.
Meine Überlegung war also folgende:

background-color: white
padding: 3px
border: 1px solid linegreen;

HTML: 
<img src="media/images/cocktail1.jpg" width="180" height="144" border="0" alt="Cocktail" style="display: block; padding: 3px; border: solid 1px limegreen; background-color: white;">

Das Ganze klappt unter Firefox auch wunderbar, der IE weigern sich aber dummerweise und stellt den via padding erstellten weißen Rahmen nicht dar.

Ist das Ganze doch irgendwie möglich, ohne ein weiteres Div darumzubauen (Das wäre kein Problem) Denn wenn ich die Löung mit dem Div anwende, bekomme ich ein anderes Problem mit dem paragraph in dem das Bild dargestellt werden soll.
 

Anhänge

  • div_problem.jpg
    div_problem.jpg
    41,8 KB · Aufrufe: 35
Der Grund hierfür ist entweder eine fehlende Doctype-Deklaration, oder es wird dieser Dokumenttyp verwendet:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Wenn ich Deinen Code-Schnippsel in eine Testseite mit dem Doctype

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!-- oder -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

einsetze, funktioniert das Stylesheet auch im IE ;)
 
Guten Morgen,
auch wieder was gelernt. Aber warum funktionieren einige Dinge ohne Doctype und einige nicht? Wonach richtet sich da der IE?

Viele Grüße und noch einen schönen Tag
 
Das Stichwort lautet Quirksmodus.

Wenn der IE 6 in diesen versetzt wird, verhält er sich wie seine 5er-Vorgängerversionen und interpretiert u.a. das Boxmodell falsch.
 
Hi,

darauf, dass es am Quirksmode liegen könnte bin ich noch garnicht gekommen, da ich folgenden DOCTYPE verwende:

HTML: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>CSS test</title>
  </head>
  <body>

  <img src="media/images/cocktail1.jpg" width="180" height="144" border="0" alt="Cocktail" style="display: block; padding: 3px; border: solid 1px limegreen; background-color: white;">

  </body>
</html>
 
Mh, das ist natürlich Mist :mad: ...

Also muss ich das Ganze doch anders lösen, oder hat noch jemand eine Idee, das Ganze ohne div zu realisieren?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück