Negative Margin-Werte, Probleme im IE
img {
border: 6px solid #E5E6E9;
margin-left: -6px;
}
In Safari sieht das auch ganz prima aus. Leider aber nicht in unserem Lieblingsbrowser, dem Internet Explorer. Dort wird alles, was nach links übersteht, einfach abgeschnitten:Erster Lösungsansatz bei einem solchen Problem: Man muss dem überstehenden Element “Layout” geben. In diesem speziellen Fall ist dies allerdings bereits der Fall, da es sich um ein img Element handelt. Will man zum Beispiel einem div oder einem h1 Element “Layout” geben, ist die einfachste Lösung, eine Breitenangabe (width) für das Element festzulegen. (Weitere Möglichkeiten findet ihr hier). Damit das ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position:relative nötig. In meinem Fall also:
img {
border: 6px solid #E5E6E9;
margin-left: -6px;
position: relative;
}
Für ein Element, dass nicht von Hause aus “Layout” hat:#herausragend {
margin-left: -10px;
width: 100px;
position: relative;
}