IE: Bild in eine Dimension zwingen

[7emper5i]

Hallo zusammen,

Mein Name heisst Philipp und ich beschäftige mich nun seit ca. 3 Jahren mit HTML/CSS/PHP und MySQL, samt aller damit zusammenhängenden Probleme..

Das größte Problem, wer hätts gedacht, ist für mich und den Rest der Welt der IE.

Da mir die im Laufe der Zeit gesammelte Lektüre keine vernünftige Antwort bietet, hoffe ich hier auf die zündende Idee oder den entsprechenden Schubbs in die richtige Richtung :)


Mein Problem:

Mehrere Graphiken sollen in eine Navigations-Leiste am rechten Rand gesetzt werden, diese Graphiken wechseln selbstständig durch, also immer eine pro Ansicht.

Dieser Bereich ist primär durch eine feste Breite limitiert. Der fireFox und alle anderen vernünftigen Browser kommen damit natürlich klar, der einzige Spacko ist der IE, nur leider kann ich dem User ja nicht aufdiktieren, welchen Browser er zu nutzen hat:

Im Firefox sieht das Ergebnis folgendermaßen aus:




Im IE (Graphikgröße ist analog zur ersten, d.h. dass das erste Bild auch rausragen würde..) folgendermaßen:




Meine Frage:

Wie bekomme ich das HTML entsprechend geschrieben, dass das Bild automatisch auf die zur Verfügung stehende Breite von beispielsweise 160px reduziert wird und sich die Höhe dynamisch dazu dann anpasst?

Derzeit sieht ein Beispiels-Codeblock folgendermaßen aus:

<a href="http://www.suzuki-club.eu" target="_blank"><img src="http://www.abload.de/img/jajauma30mgn.jpg" width="180" height="180">

Gruß
Philipp

 

[mustang]

entweder du bearbeitest das bild mit einem grafikprogramm und setzt das auf die breite 160px oder du schreibst im html code einfach width="160" und height="160".
wenn ich dein problem jetzt richtig verstanden habe...

 

[7emper5i]

Ich denke schon, dass du das Problem erkannt hast, nur ist die Antwort für mich relativ unbefriedigend, da es scheinbar keine Lösung gibt, welche dem IE wirklich die Dimension aufzwingt, die angegeben wird.

Denn mit width und height überragt das Bild trotzdem den Rahmen. :?

 

[threadi]

Auf Grund des bisher gezeigten Quellcode kann man nicht erkennen wo das Problem ist. Zeig einen Link zur Seite oder den gesamten Quellcode, dann sollte es besser klappen mit der Hilfe.

 

[7emper5i]

gern:

GSX-R1000.de - Portal : Neukonstruktion

Auf der linken Seite ist der betreffende Codeblock, welcher im IE nicht korrekt angezeigt wird.

Dieser ist im Quellcode folgendermaßen hinterlegt:

<div style="text-align: center;"><span style="font-size:12px; padding-top:1px; margin-bottom: 5px;"></span><br style="clear:both" />
        <p style="margin-right:auto; margin-left:auto">{ADS_10}</p>
        <br style="clear:both" />
    </div>

Das {ADS_10} entspricht einer Variable, welche im Admin-Panel der Software durch entsprechenden Code gefüllt werden kann.

Dieser Code entspricht dann beispielsweise:

<a href="http://www.suzuki-club.eu" target="_blank"><img src="http://www.abload.de/img/jajauma30mgn.jpg" width="180" height="180">

Ich hoffe, das macht das Problem transparenter

 

[threadi]

Also ich erkenne auch ohne einen IE hier zu haben sofort mehrere Probleme in deinem Quellcode:

- der Link um das Bild ist nicht beendet
- Du zentrierst innerhalb des div inline-Elemente mit "text-align: center;", setzt aber auch gleichzeitig "margin-right:auto; margin-left:auto" für das Blockelement <p>, welches für diese Art Zentrierung jedoch auch eine Breite bräuchte
- Der <span> ist sinnfrei und ohne Wirkung.

Mein Vorschlag: ersetze das was Du in deinem letzten Beitrag als code gezeigt hast komplett durch:

<a href="linkziel"><img src="bild.jpg" alt="" style="display: block;margin: 1px auto 0;width: 160px;" /></a>

Dadurch wird das Bild als Block-Element zentriert dargestellt und erhält eine feste Breite von 160px. Der Browser müsste dann selbst ermitteln, welche Höhe es proportional hat.

 

[7emper5i]

Danke sehr, ich werde den Code so ausprobieren und mich dann zurückmelden,

Gruß
Philipp

 

[7emper5i]

Vielen herzlichen Dank.

Der Code klappt hervorragend und alles ist in seine Schranken verwiesen worden.

Gruß
Philipp