✔ Problem mit pngfix im IE 6

Status
Nicht offen für weitere Antworten.
Biergamasda

Biergamasda

Erfahrenes Mitglied
Hi Leute, ich bins mal wieder :)

Ich hab mir im Internet ne Möglichkeit gesucht, das Problem mit den PNG's im IE6 zu lösen. Hab da ne .htc datei (iepngfix.htc) gefunden
Wenn ich diese einbaue, sieht die Seite jedoch wild durcheinandergeworfen aus, da die Hintergrundgrafiken nicht mehr korrekt angezeigt werden. Ich kann mir jedoch leider nicht erklären wieso, vieleicht kann mir da ja jemand weiterhelfen?

zum Vergleich:
http://www.jenig.at (ohne htc datei) - stylesheet dazu: http://jenig.at/layout.css
http://www.jenig.at/index2.php (mit htc datei) - stylesheed dazu: http://jenig.at/layout2.css

Vielen Dank schon im voraus

glg me
 
Zuletzt bearbeitet:
Hi,

mit dem "iepngfix.htc"-Hack lassen sich PNG-Hintergrundbilder nicht wiederholen, weshalb der Hintergrund nicht vollständig angezeigt wird.

Abhilfe schafft da die Alternative Cross-browser semi-transparent backgrounds:

Code: 
div#content {
        text-align: center;
        margin-left: 145px !important;
        margin-left: 142px;
        height: 528px;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bg_content.png');
}
div#content[id] {
        background-image:url(images/bg_content.png);
}
Oder du belässt in der layout2.ccs alles im Selektor div#content und fügst hinter dem Stylesheet folgenden "Conditional Comment" ein, um die Vorgängerversionen des IE7 mit ihrem individuellen Stylesheet zu bedienen:

Code: 
<link rel="stylesheet" href="layout2.css" />
<!--[if lt IE 7]>
<style type="text/css">
div#content {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bg_content.png');
}
</style>
<![endif]-->
sizingMethod=scale sorgt für die Wiederholung der PNG-Grafik.

Diese Zeile

Code: 
img, div { behavior: url(iepngfix.htc); }
wird somit in der layout2.css nicht mehr benötigt.
 
Ah, ok, wenn ich das jetzt richtig verstanden habe, muss ich das für jedes Bild machen, oder?

und schonmal danke, jetz weis ich endlich worums da geht *gg*

glg und Frohe Weihnachten noch nachträglich :rolleyes:
 
ok, gut, hab das jezt behoben :)

wie folgt gemacht, soferns jemanden interessiert:


index.php
HTML: 
<head>
<link rel="stylesheet" href="layout.css" />  
        <!--[if lt IE 7]>
            <style type="text/css">
                div#content {
                    background-image:none;
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bg_content.png');
                }
            </style>
        <![endif]-->      
    </head>
    <body>
        <div id="page">
            <div id="menubar">
                <div class="menupoint" style="background-image:url(images/menu/home.png);"><a href="./contents/home.php" target="content"></a></div>    
                <div class="menupoint" style="background-image:url(images/menu/jenig.png);"><a href="./contents/jenig.html" target="content"></a></div>
                <div class="menupoint" style="background-image:url(images/menu/unterkuenfte.png);"><a href="./contents/unterkuenfte.php" target="content"></a></div>                
                <div class="menupoint" style="background-image:url(images/menu/sommer.png);"><a href="./contents/sommer.html" target="content"></a></div>
                <div class="menupoint" style="background-image:url(images/menu/winter.png);"><a href="./contents/winter.html" target="content"></a></div>                                          
                <div class="menupoint" style="background-image:url(images/menu/ausflugsziele.png);"><a href="./contents/ausflugsziele.html" target="content"></a></div>
                <div class="menupoint" style="background-image:url(images/menu/veranstaltungen.png);"><a href="./contents/veranstaltungen.html" target="content"></a></div> 
                <div class="menupoint" style="background-image:url(images/menu/lage.png);"><a href="./contents/lage.html" target="content"></a> </div>
                <div class="menupoint" style="background-image:url(images/menu/links.png);"><a href="./contents/links.html" target="content"></a> </div>       
                   <div class="menupoint" style="background-image:url(images/menu/wirtschaft.png);"> <a href="./contents/wirtschaft.html" target="content"></a></div>       
                <div class="menupoint" style="background-image:url(images/menu/guestbook.png);"><a href="./contents/guestbook.php" target="content"></a></div>
                
                <div id="menufoto"></div>
                <div id="newsContainer">         
                    <div class="menupoint" style="background-image:url(images/menu/news.png);"><a href="./contents/news.php" target="content"></a></div>
                    <div id="news">
                        <?php
                            $news = $connection->getNewsNames();
                            foreach ($news as $n) {
                                echo "<a href='./contents/news.php?id=".$n['id']."' target='content'>".$n['name']."</a><br>";
                            }
                        ?>             
                    </div>                           
                </div>
                <div id="ktnLogo"></div>
            </div>
            <div id="head">
                <div id="nassfeldLogo"></div>
            </div>
            <div id="content">  
                <iframe allowtransparency="true" frameborder="0" name="content" id="contentFrame" src="./contents/home.php"></iframe>
            </div>            
            <div id="contentbottom"></div>
            <div class="clear"></div>
        </div>
    </body>

layout.css
CSS: 
@charset "utf-8";
/* CSS Document */

body {
	background-image: url(images/bg_body.jpg);
	font-family: Georgia, "Times New Roman", Times, serif;
}
div#page {
	margin: 5 auto;
	width: 777px;
	height: 636px;

}
div#menubar {
	position: relative;
	float: left;
	width: 145px;
	height: 100%;
	background-repeat: no-repeat;
	background-image: url(images/bg_menu.jpg);
	padding-top: 20px;
	
	margin-right: 0 !important; /* Für moderne Browser */
    margin-right: -3px; /* Für IE */
}
div#head {
	position: relative;
	margin-left: 145px !important;
	margin-left: 142px;
	/*width: 642px; */
	height: 136px;
	background-image: url(images/bg_header.jpg);
}
div#nassfeldlogo {
	float: right;
	margin-top: 5px;
	height: 60px;
	width: 200px;
	background-image: url(images/logos/Nassfeld.gif);
	margin-left: 0 !important; /* Für moderne Browser */
    margin-left: -3px; /* Für IE */
}
div.menupoint {
	height: 16px;
	background-repeat: no-repeat;
	background-position: right;
	margin-right: 2px;
}

div.menupoint a {
	display: block;
	width: 100%;
	height: 100%;
}
div#menufoto {
	margin: 10 auto;
	background-image: url(images/menu/foto.jpg);
	width: 133px;
	height: 109px;
}
div#content {
	background-image:url(images/bg_content.png);
	text-align: center;
	margin-left: 145px !important;
	margin-left: 142px;
	/*width: 642px;*/
	height: 528px;
}
div#contentbottom {
	background-image:url(images/bg_kartenrand.jpg);
	margin-left: 145px !important;
	margin-left: 142px;
	width: 642px;;
	height: 24px;
}
div#ktnLogo {
	position: absolute;
	bottom: 0;
	background-image:url(images/logos/kaernten1.jpg);
	margin: 10 auto;
	width: 122px;
	height: 51px;
}
div#newsContainer {
	width: 100%;
}
div#news {
	width: 100%;
	height: 270px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: center;
}

div#news a {
	color: #336699;
	text-decoration: none;
}
div#news a:hover {
	text-decoration: underline;
}

.clear {
	margin: 0;
	padding: 0;
	clear: both;
	visibility: hidden;
}
iframe#contentFrame {
	background-color: transparent;
	border: none;
	width: 612px;
	height: 100%;
	margin: 0 20px !important;
	margin:0 10px;
}

Vielen Dank nochmal

glg und nen guten Rutsch *hehe*

... Edit
Funktioniert doch nicht....

hatte auf die elemente div.menupoint den iepngfix.htc angewandt, und funktioniert vom prinzip her auch richtig, das problem is nur dass dann das "rechte" Element zu weit links anfängt und die links überdeckt...

Außerdem passen die Breiten der Elemente (insbesondere vom Content) nicht, vl kann mir da jemand ja noch helfen? :)

glg
 
Zuletzt bearbeitet:
Hi,

binde mal die PNG-Grafiken des Menüs auf folgende Weise ein - hier exemplarisch für den ersten Menüpunkt "Home":

Code: 
<div class="menupoint" id="home"><a href="./contents/home.php" target="content"></a></div>

layout.css:

Code: 
div.menupoint {
        height: 16px;
        margin-right: 2px;
        background-repeat: no-repeat;
        background-position: right;
        cursor:pointer; /* Für IE */
}

#home {
background-image:url(images/menu/home.png);
}
und für die älteren IEs:

Code: 
<!--[if lt IE 7]>
<style type="text/css">
div#content {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bg_content.png');
}

#home {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/menu/home.png');
}
</style>
<![endif]-->
Biergamasda hat gesagt.:
Außerdem passen die Breiten der Elemente (insbesondere vom Content) nicht, vl kann mir da jemand ja noch helfen?
Zum Vergrößern anklicken....
Darauf hatte ich dich schon in deinem anderen Thema Problem mit float div Layout und IE (6 und 7) hingewiesen:

Maik hat gesagt.:
Das rechnerische Restmaß für diese Breitenangabe beträgt anstelle von "642px" nur "632px" (777px - 145px = 632px).
Zum Vergrößern anklicken....
und diese Breite ist derzeit gegeben. Ansonsten, wenn 642 Pixel als Breite erwünscht sind, erhöhst du die Breite des Elternelements #page um 10 Pixel.

Für die Breitenangabe des iFrames gilt derzeit: 632px (content-Breite) - 2*20px (linker/rechter Außenabstand iFrame) = 592px.

Zudem solltest du hier noch bei der margin-Eigenschaft die fehlende Einheit angeben:

Code: 
div#page {
        margin: 5px auto;
        width: 777px;
        height: 636px;
}

div#menufoto {
        margin: 10px auto;
        background-image: url(images/menu/foto.jpg);
        width: 133px;
        height: 109px;
}
 
Oh mann, was würde ich nur machen wenn es dich nicht gäbe :) Danke vielmals, und tut mir leid dass ich das mit der Breite nicht gleich gesehn habe, war nicht meine Absicht :) Vielen Dank und guten Rutsch aus Kärnten *gg*
 
Keine Ursache, und immer wieder gerne :)

Ich wünsche dir auch einen guten Rutsch ins Neue Jahr :)

Man sieht sich :-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück