• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

overflow:hidden funktioniert nicht in IE

T

Tinchen

Neues Mitglied
Hmmm ich hab da ein kleines Problem mit overflow:hidden im Internet Explorer.
Hier die Seite --> Nelly's Stallgewieher
Eigentlich beabsichtige ich mit overflow:hidden dass die oberen Ecken des Logos abgeschnitten werden. FF stellt es auch richtig dar.
Was ich bisher an Infos dazu gefunden habe ist, dass der entsprechende Container position:relative zusätzlich zum overflow:hidden haben muss....aber das ist ja bei mir der Fall...welchen Fix muss ich noch einbauen?

#logo ist das div welches das Bild enthält und über das div #rahmen nicht hinausragen soll:

meine CSS:
Code: 
html, body{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: url(../images/background2.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 99%;
    margin: 0;
}
     
#rahmen{
    border: solid #000000 1px;
    width: 1000px;
    margin: auto !important;
    margin-bottom: 10px !important;
    margin-top: 5px !important;
    background-color: #FFFFFF;
    -webkit-box-shadow: 5px 5px 15px #0D030C;
    -moz-box-shadow: 5px 5px 15px #0D030C;
    box-shadow: 5px 5px 15px #0D030C;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    behavior: url(/PIE.htc); 
    overflow:hidden;
}
     
#logo{
    border-bottom: solid #000000 1px;
    height: 232px;
    width: 1000px;
    float: left;
    margin: 0px auto;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
    behavior: url(/PIE.htc); 
}
     
#navigation{
    float: left;
    width: 130px;
    margin: 0px 0px 30px 0px;    
    display: inline;
    padding-top: 30px;
    padding-left: 20px;
    padding-bottom: 80px;
    behavior: url(/PIE.htc); 
}
     
#inhalt{
    background-color: #FFFFFF;
    width: 760px;
    padding: 20px;
    float: left;
}
     
#pagebrake{
    height: 20px;
    clear: both;
}
          
#footer{
    background-color: #aa55ff;
    position: absolute;
    bottom: 12px;
    text-align: right;
    height: 15px;
    width: 1000px;
}
     
.fb-like{
     position: relative;
     top: 40px;
     left: 8px;
}

.sticker{
    position: relative;
    top: 70px;
    left: 3px;
    behavior: url(/PIE.htc); 
}
     
A.navnormal{
    color: #000000;
    font-size: 10px;
    text-decoration: none;
}
     
.center{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: center;
    line-height: 1.5;
}
     
.left{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: left;
    line-height: 1.5;
}
     
.justify{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: justify;
    line-height: 1.5;
}
     
h1 {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
}
     
h2 {
    color: #000000;
    font-size: 13px;
}

h3{
    color: #000000;
    font-size: 12px;
}

*+html, * html{
    width:1%;
}
 
Verwende das Logo nicht als source sondern als background-image. Dann reicht der border-radius und du benötigst kein overflow:hidden mehr. Unterhalb der Version 9 versteht der IE allerdings kein CSS3. Wenn dein Bild auch in älteren Versionen runde Ecken haben soll, dann musst du es im Photoshop entsprechend bearbeiten und als .png abspeichern.
 
PIE.htc hab ich eingebunden und auch das Logo jetzt als Hintergrundbild eingerichtet.
Soweit funktioniert auch die Interpretation von CSS3 im IE.

Aus mir unerfindlichen Gründen wird aber jetzt die Seite nicht mehr zentriert angezeigt sonder ist an den linken Rand geheftet. Ich könnte mich nicht erinnern irgendetwas geändert zu haben, was dies bewirkt haben könnte.

Was ich auch nicht gelöst bekomme, ist, dass im Internet Explorer der Facebook Button und die Logos statt unter der Navigation rechts davon dargestellt wird. Ich meine aber, das Problem besteht nur in IE7. Im IE8 hab ich es richtig dargestellt gesehen.

Bei meiner Suche nach einer Lösung für dieses Problem bin ich darauf gestoßen, dass dieser Fix:

Code: 
*+html, * html{
    width:1%;
}

das Problem beheben sollte. Scheint aber leider nicht zu funktionieren :neutral:
Könnte mir jemand bzgl dieser beiden Probleme nochmal auf die Sprünge helfen, bitte?
Danke! :oops:
 
Noch ein Zusatz. Habe gerade nochmal überprüfen lassen...

IE7 -> alles verschoben sowie links ausgerichtet statt zentriert
IE8 -> alles korrekt
IE9 -> alles korrekt
 
Ich habe auf meinem Mac hier keinen IE, um das zu überprüfen, aber ein paar grundsätzliche Dinge:

- Falls overflow hidden auf einem Element nicht funktioniert, setz es mal testweise auf den body

- Um IE7 Probleme zu beheben, könntest du a) ein extra Stylesheet über Conditional Comments in den Head einbinden, oder b) den vor dir bereits zitierten 'Star Plus Hack verwenden'. Alle in einem mit *+html #divname {} Container aufgeführten Anweisungen werden nur vom IE7 interpretiert und von neueren Versionen ignoriert.

Star-HTML-Hack & Star-plus-HTML-Hack - CSS-Hacks zur Browserunterscheidung - Stern-HTML und Stern-plus-HTML für IE6 und IE7
 
Zuletzt bearbeitet:
Ich hätte noch einen Gedanken dazu. Lass bei #rahmen mal das !important hinter margin weg. Du solltest generell auf !important verzichten, weil der IE in manchen Versionen je nach Kombination im CSS damit ein Problem hatte.

Wenn auch das nicht hilft, könnte die Ursache auch der HTML5-Doctype zusammen mit CSS PIE sein. Schau dich dazu mal um.
 
Mann mann, IE7 braucht echt kein Mensch :evil:

Danke für Eure Tipps! Habs jetzt endlich hinbekommen. Ich hab eine komplette layout.css nur für IE7 geschrieben.
Das Problem, dass sich der Facebook-Button rechts neben die Navigation verschoben hatte, war ein float/clear-Problem.

So siehts jetzt letztlich aus:

Zusätzlich zu meiner "normalen" layout.css:
Code: 
*+html{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: url(../images/background2.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 99%;
    margin: 0px auto;
}

*+html .clearfix{
    clear: both;
}

.*+html .fb-like{
     position: relative;
     top: 40px;
     left: 8px;
}

*+html .sticker{
    position: relative;
    top: 70px;
    left: 3px;
    behavior: url(/PIE.htc); 
}
*+html .float{
    float: left;
}

*+html  #rahmen{
    border: solid #000000 1px;
    width: 1000px;
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 10px !important;
    margin-top: 5px !important;
    background-color: #FFFFFF;
    -webkit-box-shadow: 5px 5px 15px #0D030C;
    -moz-box-shadow: 5px 5px 15px #0D030C;
    box-shadow: 5px 5px 15px #0D030C;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    behavior: url(/PIE.htc); 
}


Code: 
<!DOCTYPE html>
<html>
<head>
    

    <link rel="stylesheet" type="text/css" href="layout.css">
    [COLOR=#ff0000]<link rel="stylesheet" type="text/css" href="layout7.css">[/COLOR]


</head>

<body>
<div id="rahmen">

    <div id="logo"> 
    </div>


<div id="navigation">

[COLOR=#ff0000]<div class="clearfix"></div>[/COLOR]
<div class="fb-like" data-href="http://www.nellys-stallgewieher.de" data-send="false" data-width="450" data-layout="button_count" data-show-faces="false" data-font="arial">
</div>
<div class="sticker">

</div>

</div>

[COLOR=#ff0000]<div class="float"></div>[/COLOR]
<div id="inhalt">

<div class="center" style="font-size:20px;">
</div>

<div class="center">
</div>

</div>

<div id="pagebrake">
</div>
<div id="footer">
</div>

</div>
</body>
</html>
 
Wenn du die Anweisungen für den IE7 direkt an das Ende deiner normalen layout.css kopierst, brauchst du die zweite Datei nicht einzubinden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben