✔ PNG und IE

Status
Nicht offen für weitere Antworten.
Hi,

offensichtlich hast du die dem Beispiel (http://www.twinhelix.com/css/iepngfix/iepngfix.zip) beiliegende Grafik blank.gif nicht in das Grafik-Verzeichnis hochgeladen und den Grafikpfad in der HTC-Datei angepasst:

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';
Zum Vergrößern anklicken....


Die Hintergrundgrafik sitebg.png für den Dokumentkörper besitzt doch nur einen weissen Hintergrund - von daher verstehe ich jetzt nicht, weshalb du den "htc-Hack" überhaupt auf das body-Element anwenden willst.

Ja, mit Hilfe dreier IDs lassen sich die Grafiken als Hintergrundbilder für die Links definieren:

Code: 
.topnavi a {
float: left;
width: 100px;
height: 40px;
text-decoration: none;
}

.topnavi a#home {
background: url(images/button_home.png);
}

.topnavi a#kontakt {
background: url(images/button_kontakt.png);
}

.topnavi a#imprint {
background: url(images/button_imprint.png);
}
 
Danke!

Ich habe jetzt die IDs eingebaut für die Topnavi!

Die Hintergrundgrafik im body und in .page hab ich jetzt zum jpg umformatiert. Somit klappt das jetzt auch in den zwei "Problemversionen" des IEs.

Mir ist jetzt aber auch aufgefallen, dass im IE5.5 und IE6 es Probleme mit der Positionierung des Menus gibt. In diesen beiden Versionen ist das Menu zu weit rechts wenn man genau hinschaut. Dadurch ist der rechte weiße Rand größer als gewollt. Ebenso verzieht es das Image überhalb des Banner um 1px nach links.
Ich habe daraufhin versucht über die Browserweiche kleiner als IE7 die Angaben bei padding-right zu vergrößern. Allerdings zeigen die Browser dadurch keine Änderung. Verstehe ich da etwas falsch und/oder mache ich etwas falsch, bitte?

/EDIT: Ruf mal bitte die Links Kontakt und Impressum im Firefox auf und scroll ganz nach unten. Dort verhaut es einiges. In anderen Browsern besteht das Problem nicht. Verstehst Du das?
 
Zuletzt bearbeitet:
Hi!

Das "Positionierungs"-Problem mit der rechten Spalte resultiert aus der XML-Deklaration, die vor der Doctype-Deklaration notiert ist, weshalb der IE in den Quirksmodus versetzt wird und das Boxmodell falsch interpretiert.

Die Verschiebung des Banners bekommst du folgendermaßen in den Griff:

Code: 
.main {
  width: 605px;
  float: left;
  /*margin: 0 0 0 1px;*/ /* auskommentiert = deaktiviert */
  padding-right: 1px;
  border-right: 1px dotted #777777;
}
.banner {
  height: 120px;
  margin: 0 5px 0 10px;
  background: url(images/banner.png) no-repeat;
}

Das Problem im Firefox dürfte daran liegen, dass du das DIV clear im Markup an der falschen Stelle notiert hast - versuch es stattdessen mal so:

Code: 
<div class="middle">
    <div class="main">...</div>
    <div class="right">...</div>
    <div class="clear"></div>
</div>
 
Das Problem mit der Darstellung bei Kontakt und Impressum im Firefox ist gelöst. Habe wie Du gesagt hast den Container clear umgesetzt. Danke!

Den Wert für margin-left zu ändern in der Class banner hilft zwar für den IE6 und IE5.5 allerdings ist jetzt das Problem im IE7 und Firefox, dass es 1px überhängt. Also entweder oder. Geht nicht auch beides? :)

Was mir immer noch ein Rätsel ist, ist wieso es im IE6 und IE5.5 das Menu nach rechts "verzieht". Wenn man genau hinschaut in diesen Versionen sieht man, dass im Gegensatz zum IE7 und Firefox das Menu weiter links, richtig, sitzt. Damit verbunden kommt zu einem breiteren weißen Rand neben dem Banner/Menu. Fällt Dir das auch auf?
Vielleicht hat das auch Aufwirkungen auf die 1px-Verschiebung der Bannergrafik?
 
Hi,

wie ich heute Morgen schon schrieb, ist der Grund für die Verschiebung des Menüs (.menu) die rotmarkierte Zeile im Quellcode:

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
wodurch der IE in den Quirksmodus gesetzt wird, und somit das Boxmodell falsch interpretiert. Wenn ich diese Zeile rausnehme, wird das Menü im IE richtig positioniert.

Wenn die empfohlene Korrektur des margin-left-Wertes für die Klasse .banner zu Fehldarstellungen im Firefox und IE7 führt, kann die Regel mittels dem "Conditional Comment" lediglich auf den IE5.5 und IE6 angewendet werden:

Code: 
<!--[if lt IE 7]>
<style type="text/css">
.banner {
margin: 0 5px 0 10px;
}
</style>
<![endif]-->
Sinnigerweise wird die Regel dann in der ie_pngfix.css aufgenommen.
 
Sinnigerweise wird die Regel dann in der ie_pngfix.css aufgenommen.
Zum Vergrößern anklicken....

Ja, soweit war ich auch schon. Aber das wird irgendwie nicht beachtet. Es ändert nichts im Gegensatz dazu wenn ich die Änderung direkt in dem "richtigen" CSS vornehme. Ich versteh das nicht.

Was die Positionierung des Menus betrifft, ändert auch das Entfernen der XML-Deklaration nichts im IE5.5 und IE6.
 
Hi!

Sorry, ich hab gestern Abend ganz vergessen zu erwähnen, dass in der ie_pngfix.css natürlich auch die Klasse .main mit der Korrektur des margin-left-Wertes aufgenommen werden muß - vergleiche hierzu nochmal meinen Beitrag von gestern Morgen.

Code: 
.main {
margin: 0 0 0 0;
}

.banner {
margin: 0 5px 0 10px;
}
Was die falsche Position des rechten Menüs betrifft, so kannst du es ja mal anstelle der padding-Angaben mit der margin-Eigenschaft probieren - also:

Code: 
.menu {
  width: 189px;  
  float: right;
  margin-top: 10px;
  margin-right: 3px;
  margin-bottom: 30px;
}
 
Morgen!

Das Menu ist jetzt richtig positioniert. Das Ändern von padding in margin hat was gebracht.

Allerdings haben die Änderungen bzgl. den Klassen main und banner in der ie_pngfix.css keine Auswirkungen. Die Versionen des IEs kleiner 7 scheinen das nicht zu beachten.
Auch wenn ich die margin-Angaben der Klasse topnavi ändere in dem zweiten CSS hat das keine Auswirkungen.
Ist doch merkwürdig, oder?
 
Ja, das ist tatsächlich seltsam, denn bei mir funktioniert es hervorragend.

Von daher kann ich jetzt auch nicht nachvollziehen, was da bei dir falsch läuft und wo man den Hebel ansetzen soll.

Letzte Möglichkeit, die mir noch einfällt: Probier es mal mit relativen Pfaden zu den CSS-Dateien - also:

Code: 
<link rel="stylesheet" href="templates/porto/style.css" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie_pngfix.css" />
<![endif]-->
 
Ich hab mal eben auf deinem Server einen Blick in die ie_pngfix.css geworfen und kann da die empfohlenen Regelerweiterungen überhaupt nicht entdecken, oder hast du sie da zwischenzeitlich wieder rausgenommen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück