✔ Fehlerhafte Dartstellung bei transparenten PNG´s im IE

[Exumaster]

Hallo Ihr,

das Problem was ich habe betrifft mal wieder den IE. Das Problem besteht daraus das unter der Navi, Striche zum Content gehen müssten. Was sie aber nicht tun. Ändere ich die Höhe, ändert sich auch die Höhe der Grafik, was sie aber nicht soll. Es soll ja letztendlich genauso aussehen wie im FF. Ich arbeite mit transparenten PNG´s und einer .htc Datei das diese PNG´s auch im IE richtig angezeigt werden. Desweiteren ist eine Browserweiche vorhanden, um alle CSS Sachen die zum IE gehören einzustellen. Das mit der htc Datei ist von dieser Seite. www.peterkroener.de was auch sehr gut klappt.

greetz Exulizer
MEINE HOMEPAGE

 

[Maik]

Hi,

versuch es mal auf diese Weise:

HTML:

<div class="main">
      <div class="header"></div>
      <div class="navi">
          <div class="leftedge"></div>
          <div class="home">Home</div>
          <div class="info">Info</div>
          <div class="videos">Videotutorials</div>
          <div class="links">Links</div>
          <div class="contact">Kontakt</div>
      </div>
      <div class="content">Content</div>
      <div class="footer">Copyright 2006 by Sven Harzer</div>
</div>

layout.css:

div.navi{
width: 810px;
height: 48px;
color: #000;
background-color: transparent;
background-image:url(../img/navi_bg.png);
background-position:bottom;
background-repeat:no-repeat;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 29px;
position:relative;
margin-top:-33px;
}

div.content{
width: 790px;
height: 482px;
color: #000;
background-color: transparent;
background-image:url(../img/contentbg.png);
background-repeat:no-repeat;
text-align: left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/*margin-top: 10px;*/ /*auskommentiert = deaktiviert */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

ie.css

div.header {
width:810px;
height: 92px;
background:none;
background-position:bottom;
background-repeat:no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='img/header.png');
}

div.navi {
width:810px;
height: 49px;
background:none;
background-position:bottom;
background-repeat:no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='img/navi_bg.png');
}

div.content { 
width:790px;
height: 502px;
margin: 0px;
/*margin-top:15px;*/ /*auskommentiert = deaktiviert */
background:none; 
background-position:bottom;
background-repeat:no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='img/contentbg.png'); 
}

div.footer {
width: 810px;
height: 58px;
margin-bottom: 8px;
background:none;
background-position:top;
background-repeat:no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='img/footer.png');
}

Das Attribut sizingMethod=scale wird nicht benötigt, da die Grafiken nicht wiederholt werden sollen.

 

[Exumaster]

Danke das war der richtige Weg, ich musste noch einige Sachen abändern. Jetzt passte es auch im IE.

greetz