[HTML4Ever]

Hallo,

ich habe den folgenden Konstrukt, um runde Ecken zu erzeugen:
CSS

.top-left {
	background-image: url('rc/tl.png');
	height: 15px;
	font-size: 2px;
	margin-right: 15px;
}

.top-right {
float: right;
margin-top: -15px;
background-image: url('rc/tr.png'); 
height: 15px; 
width: 15px;
font-size: 2px;
}

.inside {
border-left: 1px solid white;
border-right: 1px solid white;
background: #8DC38D;
padding-left: 10px;
padding-right: 10px;
}

.bottom-left {
background-image: url('rc/bl.png');
background-repeat: no-repeat;
height: 15px;
font-size: 15px;
margin-right: 15px;
}

.bottom-right {
background-image: url('rc/br.png');
background-position: 100% 0;
background-repeat: no-repeat;
height: 15px;
font-size: 2px;
margin-top: -15px;
}

Und das HTML:

<div class="top-left"></div>
<div class="top-right"></div>
<div class="inside">

<!-- what you want inside -->
<h4>abc</h4>
<p>def</p>
<ul><li>ghi</li></ul>
<!-- and so on -->

</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>

Ist natürlich nicht auf meinem Mist gewachsen, sondern von einem Tutorial kopiert.

Jetzt habe ich das Problem, dass im IE7 die rechte untere Ecke 3 Pixel nach unten verschoben ist.

Sie Screenshot:




Dazu noch eine zweite Frage:
Wie im Screenshot zu sehen, ist die Farbe der Ecken etwas anders, als die vom Div, das den Content enthält. Im Firefox ist die Farbe identisch. Kann man da was ändern oder muß man statt PNGs lieber Gifs nehmen?

[netbenni]

Was die zweite Frage betrifft: Ja, lieber gifs.

Das gleiche Problem hatte ich auch mal.
Der Internet Explorer hat da irgendwelche Probleme mit (überflüssigen)Gammainformationen in den PNGs und zeigt sie deshalb nicht mit der korrekten Farbtiefe. Was verwendest du für ein Grafikprogramm (Photoshop etc.)?

[HTML4Ever]

Ich hatte die PNGs mit Paint .Net erstellt. Hab's jetzt auf Gif's umgestellt, sind halt etwas größer, aber damit kann ich leben.

Das mit den 3 Pixeln konnte ich auch lösen. Der IE7 war im quirx Modus. Im Strict Modus paßt alles.