✔ Probleme mit dem IE

Status
Nicht offen für weitere Antworten.
F

Freetoast

Grünschnabel
Hallo,

ich hab mit ein paar Freundinnen versucht ne CSS-Seite zu gestalten und im Grunde sind wir ganz zufrieden. jetzt haben wir die Seite mal im InternetExplorer angesehen und mussten feststellen dass es das Layout zerreist. Im FF oder opera läuft alles:

http://www.dendrocam.de

Wir haben hin und her probiert aber finden keine Lösung:

Offenbar wird der rote Hintergrund über den Kopf der Frau gelegt und der Kopf etwas nach unten geschoben. Darüber hinaus wird die ornamentale Grafik auf der linken Seite nicht angezeigt.

Ein weiteres Problem in allen Browsern ist, dass das Menü (also die anklickbare Fläche) bis zum oberen Ende des roten Streifens reicht.

Wann kann man gegen diese Sachen machen?

die style.css findet ihr als txt hier: http://www.dendrocam.de/css.txt
Das html könnt ihr ja im Browser anschauen.

Danke für alle Antworten!

Annette
 
Hi und herzlich Willkommen auf tutorials.de :)

Setz mal das folgende Stylesheet ein:

Code: 
                #wrapper {
                        width: 1024px;
                        margin: 10px;
                        margin-left: auto;
                        margin-right: auto;
                }

                #left {
                        float: left;
                        width: 122px;
                        height: 300px;
                        background: url(../img/img_left.gif) no-repeat right top;
                        margin-right:0 !important;
                        margin-right:-3px;
                }

                #right {
                        float: right;
                        width: 122px;
                        height: 300px;
                        background: url(../img/img_right.gif) no-repeat left top;
                        margin-left:0 !important;
                        margin-left:-3px;
                }

                #container {
                        margin-left: 122px !important;
                        margin-left: 119px;
                        margin-right: 122px !important;
                        margin-right: 119px;
                }

                #top {
                        height: 40px;
                        background: url(../img/img_top_right.gif) no-repeat right bottom;
                }

                #banner {
                        height: 135px;
                        margin-bottom: 10px;
                        background: url(../img/img_header_left.gif) no-repeat left bottom;
                        background-color: #932923;
                }

                #logo {
                        background: url(../img/img_header_right.gif) no-repeat right bottom;
                        height: 135px;
                        }

                #container2 {
                        overflow:auto;
                        background: url(../img/img_grey_strip.gif) repeat-y 0% 0;
                        }

                #content {
                        padding: 30px;
                        padding-left: 160px;
                        margin-right: 225px !important;
                        margin-right: 231px;
                        background-color: #e5e1de;
                }


                #sidebar-a {
                        float: right;
                        width: 185px;
                        padding: 15px;
                        padding-top: 45px;
                        background-color: #e5e1de;
                        display: inline;
                }


                #footer {
                        padding: 1px;
                        padding-left: 10px;
                        background-color: #932923;
                        top: 10px;
                        height: 40px;
                        clear:both;
                        position:relative;
                }


                .clearfix:after {
                        content: ".";
                        display: block;
                        height: 0;
                        clear: both;
                        visibility: hidden;
                }

                .clearfix {display: inline-block;}

                /* Hides from IE-mac \*/
                * html .clearfix {height: 1%;}
                .clearfix {display: block;}
                /* End hide from IE-mac */


                .textfield {
                        background-color: #fff;
                        padding-left: 15px;
                        padding-right: 15px;
                        padding-bottom:10px;
                }

                .newsitem {
                        margin-bottom: 20px;
                }

                .textfield p {
                        margin-left: 20px;
                }



                #sidebar-a h2, #sidebar-a h3 {
                        margin: 0.3em 0;
                }

                #sidebar-a h3, #sidebar-a p {
                        margin-left: 25px;
                }

                #sidebar-a p {
                        margin-top: 0.8em;
                }


                #gallery {
  padding:0;
  margin:0;
  list-style-type:none;
  overflow:hidden;
  width:320px;
  height:425px;
  border:1px solid #888;
  background:#fff url(../img/galleryback.jpg);
  }
#gallery li {
  float:left;
  }
#gallery li a {
  display:block;
  height:30px;
  width:330px;
  float:left;
  text-decoration:none;
  border-bottom:1px solid #fff;
  cursor:default;
  }
#gallery li a img {
  width:330px;
  height:30px;
  border:0;
  }
#gallery li a:hover {
  background:#eee;
  height:239px;
  }
#gallery li a:hover img {
  height:239px;
  }



                h1 {
                        font-family: Helvetica, Verdana, Arial, sans-serif;
                        color: #932923;
                        letter-spacing: -1px;
                        text-align: left;
                        font-weight: normal;
                        font-size: 1.4em;
                        line-height: 2em;
                }

                h2 {
                        font-family: Helvetica, Verdana, Arial, sans-serif;
                        color: #932923;
                        letter-spacing: -1px;
                        text-align: left;
                        font-weight: normal;
                        font-size: 1em;
                }

                h3 {
                        font-family: Helvetica, Verdana, Arial, sans-serif;
                        color: #4b4b4b;
                        letter-spacing: -1px;
                        text-align: left;
                        font-weight: bold;
                        font-size: 0.6em;
                }

                h4 {
                        font-family: Helvetica, Verdana, Arial, sans-serif;
                        color: #000;
                        letter-spacing: 0px;
                        text-align: left;
                        font-weight: bold;
                        font-size: 0.6em;
                }

                p {
                        line-height: 1.8em;
                        text-align: left;
                        font-size: 0.6em;
                        color: #4b4b4b;
                        font-family: Verdana, "Lucida Grande", Arial, sans-serif;
                }

                ul#menu {
                        background: #932923 top left repeat-x;
                        font-size: 0.8em;
                        font-family: "Lucida Grande", Verdana, sans-serif;
                        font-weight: bold;
                        list-style-type: none;
                        margin: 0;
                        padding-left: 138px;
                }

                ul#menu li {
                        display: block;
                        float: left;
                        margin: 0 0 0 3px;
                        padding: 0 0 0 0;
                }

                ul#menu li a {
                        color: #e5e1de;
                        text-decoration: none;
                        display: block;
                        float: left;
                        line-height: 200%;
                        margin: 110px 5px 0px;
                }

                ul#menu li a:hover {
                        color: #333;
                }

                ul#menu li a.current{
                        color: #FFF;
                        background: #FFF top left repeat-x;
                }
und ruf im DIV #container die Klasse .clearfix auf:

Code: 
<div id="container" class="clearfix"> ... </div>

Somit wird das Layout im IE nicht mehr zerrissen, und in allen Browsern erstrecken sich die Links nicht über die komplette Bannerhöhe.

Warum der IE das "Logo"-Hintergrundbild nicht vollständig anzeigt, konnte ich bislang leider noch nicht herausfinden.
 
Maik hat gesagt.:
Warum der IE das "Logo"-Hintergrundbild nicht vollständig anzeigt, konnte ich bislang leider noch nicht herausfinden.
Zum Vergrößern anklicken....
Setze das UL-Menü in den LOGO-Block ein und mach den Menü-Hintergrund transparent.

Dem BANNER-Block also folgende Struktur geben:
HTML: 
    <div id="banner">
        <div id="logo">
            <ul id="menu">
                <li><a href="#">aaaa</a></li>
                <li><a href="#">bbbbbbbbbb</a></li>
                <li><a href="#">bbbbbb</a></li>
                <li><a href="#">bbbbbb</a></li>
                <li><a href="#">bbbbbb</a></li>
                <li><a href="#">bbbbbb</a></li>
                <li><a href="#">bbb</a></li>
            </ul>
        </div>
    </div>
und anschließend in der CSS-Datei den Hintergrund löschen:
Code: 
ul#menu {
/*    background: #932923 top left repeat-x;*/
    font-size: 0.8em;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding-left: 138px;
}
Außerdem:
  • Der Link zu den Stylesheets gehört eigentlich in den Header.
  • Im DIV-Block <div class="newsitem"> unterhalb des ID-Blockes "sidebar-a" wird das p-Tag nicht abgeschlossen.
  • Wenn schon XHTML: Leere Elemente (IMG, BR usw.) müssen mit dem Slash-Zeichen abgeschlossen werden
Dann klappt's auch im IE 5.5 ... 7.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück