css: IE mag nicht

[ThaHammer]

Hi

habe in meinem Quelltext ein Div, darin ein fieldset mit Legend. So innerhalb des Fieldset gibt es nur 3 Bilder. Diese Bilder haben padding: 10px. In jedem Browser außer dem IE natürlich geht das auch. Nur der IE ignoriert das padding und schiebt die Bidler zusammen.

http://maman-bebe.de hier ist es die Startseite. Wenn ich das ganze in einer extra Seite ohne den Shop mache, geht es.

 

[Manjo]

Hi,

kann ich nicht nachvollziehen. Mit welchem IE? Win? Mac? Vers?

Ausserdem hast Du beim mittleren Bild vspace="10" eingebaut! Beim FF werden die 3 Bilder übrigens nicht nebeneinander dargestellt. Das letzte rückt in eine neue Zeile!

Gruss,
Manjo

 

[sECuRE]

Hi,

kleiner Tipp vorneweg: Es heißt "CDs" nicht "CD`s", "CD´s", "CD's" oder sonst was... Bei den AGB hast du es wenigstens richtig . Mich persönlich stört die Laufschrift oben, aber nun gut... Links im Menü würde ich statt GROSSSCHRIFT lieber fette Schrift benutzen.

Zu dem Problem: Ja, der IE behandelt padding nicht zuverlässig, benutze lieber die Eigenschaft margin, falls möglich.

cu

 

[ThaHammer]

OK, ich habe das vspace mittlerweile eingebaut, weil der IE das auch macht.
Ich weiß im Firefox rutscht ein Bild jetzt runter, muss ich noch ändern.
Die Laufzeile oben war ein Wunsch des Betreibers, nicht meine Idee. Dafür habe ich ein php Script im Adminbereich gebastelt, mit dem der Kunde den Text selbst ändern kann. Vorher musste ich das ständig im HTML ändern, war echt lästig!
Ja, das mit den CDs usw, schlechte Angewohnheit von mir. Hast recht gehört so nicht.

Aber jetzt mal zum eigentlichen Problem: Warum ignoriert der IE das Padding?

Ich habe das Div (partner), in dem liegt das Fieldset.

.partner {
  width: 480px
}

.partner img {
  padding: 10px;
}

Das ist das betreffende css dazu.

Habs nochmal zurück gestellt, so wie es vorher war.

<div class="partner"> 
    <p></p> 
    <fieldset> 
    <legend>Unsere Partnerseiten</legend> 
    <a href="http://www.toplist-kinder.de" target="_blank"><img src="../../Bilder/logo-klein.jpg" alt="Toplist-Kinder - Ihr Kinder Verzeichnis" width="134" border="0"></a><a href="http://www.oeko-top100.de/?site=1105561552" target="_blank"><img src="../../Bilder/oekotop100_banner.gif" alt="…KO-Top100.de - Die besten Internetseiten zum Thema …kologie" hspace="5" vspace="0" border="0"></a><a href="http://www.Zauberblicke.com" target="_blank"><img src="../../Bilder/zauberblicke_logo_kl.jpg" alt="" width="150" height="31" border="0"></a> 
    </fieldset> 
  </div>

Nur das hspace ist neu.

 

[Manjo]

Hallo,

IE4 (Mac+Win) und IE5 (Win) haben oft Probleme bei padding innerhalb eingebundener Elemente (<img> ist so ein Element). Mit <div> geht's problemlos:

.partner {
  	width: 480px
}
.partner div {
	float:left;
  	padding: 10px;
}

<div class="partner">
  <p>&nbsp;</p>
  <fieldset>
  <legend>Unsere Partnerseiten</legend>
  <div><a href="http://www.toplist-kinder.de" target="_blank"><img src="../../Bilder/logo-klein.jpg" alt="Toplist-Kinder - Ihr Kinder Verzeichnis" width="134" border="0"></a></div><div><a href="http://www.oeko-top100.de/?site=1105561552" target="_blank"><img src="../../Bilder/oekotop100_banner.gif" alt="KO-Top100.de - Die besten Internetseiten zum Thema kologie" border="0"></a></div><div><a href="http://www.Zauberblicke.com" target="_blank"><img src="../../Bilder/zauberblicke_logo_kl.jpg" alt="" width="150" height="31" border="0"></a></div>
  </fieldset>
</div>

Wenn Du schon eine Absatzmarke als Abstandshalter verwendest, dann solltest Du sie auch füllen, denn auch das führt bei verschiedenen Browsern zu unterschiedlichen Ergebnissen, wenn so ein Tag leer ist.

Gruss,
Manjo

 

[ThaHammer]

Idee ist gut, nur jetzt kleben die 3 Bilder untereinander. Habs wieder umgestellt, bis ich ne bessere Lösung gefunden habe. Danke Dir.

 

[Manjo]

nein, tun sie nicht. Beachte:
.partner div {
|float:left;
padding: 10px;
}

 

[ThaHammer]

nein, tun sie nicht. Beachte:
.partner div {
|float:left;
padding: 10px;
}

Nun hatte ich kurz drin, aber leider waren alle drei Bilder untereinander.
Ist der Strich Absicht da? Wenn ja klär mich auf was der macht.

Eigentlich kanns mir ja Wurst sein, es funktioniert mit dem VSpace ja auch.

 

[Manjo]

Ups... nee die Pipe gehört da natürlich nicht hin. Danebengegriffen... immer diese gemeine Springtastatur!

Ich habe noch eine Variante... veraltet, aber bewährt:

.partner {
  	width: 480px
}
.partner td {
	vertical-align:top;
}

...

<div class="partner">
  <p>&nbsp;</p>
  <fieldset>
  <legend>Unsere Partnerseiten</legend>
  <table border="0" cellspacing="5" cellpadding="0">
    <tr>
      <td><a href="http://www.toplist-kinder.de" target="_blank"><img src="../../Bilder/logo-klein.jpg" alt="Toplist-Kinder - Ihr Kinder Verzeichnis" width="134" border="0"></a></td>
      <td><a href="http://www.oeko-top100.de/?site=1105561552" target="_blank"><img src="../../Bilder/oekotop100_banner.gif" alt="KO-Top100.de - Die besten Internetseiten zum Thema kologie" border="0"></a></td>
      <td><a href="http://www.Zauberblicke.com" target="_blank"><img src="../../Bilder/zauberblicke_logo_kl.jpg" alt="" width="150" height="31" border="0"></a></td>
    </tr>
  </table>
  </fieldset>
</div>

 

[ThaHammer]

Ich will eigentlich von den Tabellen weg, das hatte ich vorher immer.
Na ich werde mal etwas weitersuchen, es muss doch ne Lösung geben.