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

IE macht 2 Probleme - Bild überlagert Schrift und Listenformatierung ungleich FF

otschkok77

otschkok77

Neues Mitglied
Ich habe zwei Probleme mit der Seite für unseren Verein: Singing | singing in sing sing

Mit Firefox funktioniert alles prima aber der IE spinnt herum.

1. Im Internet Explorer wird die Überschrift abgeschnitten. Auch wenn ich das Bild per CSS weiter nach unten verschiebe bleibt die Überschrift unten abgeschnitten.
2. Im Internet Explorer in der Navigationsleiste rechts sind Categories und die darunter enthaltenen Links nicht auf einer Linie sondern versetzt.

Es wäre wirklich prima wenn ihr mir Hinweise oder einen Lösungsvorschlag geben könntet. Ich bin mit meinen Kenntnissen am Ende.
 
Moin,

im IE7 & 8 wird mir unterhalb der h1 das Leerfeld einer Grafik angezeigt,
HTML: 
<div id="header-image" class="container">
    <img src="http://ghostsinger.de/testblog/wp-content/themes/money-blog-eng/images/default-header.png" width="1068" height="300" alt="" />
   </div><!--#header-image-->
definiert in id="header-image".
Zum einen scheint mir deren Pfad inkorrekt zu sein (daher auch das rote Kreuzchen). Die angegebene Größe stimmt mit dem Leerfeld überein.
Zum anderen stellt sich mir die Frage, ist dies nun mit id="header-Image" oder mit class="container" definiert. Beides zusammen scheint mir nicht sinnvoll zu sein.
<div id="header-image" class="container"></div>
Zum Vergrößern anklicken....
Warum der FF die (nicht vorhandene) Grafik nicht anzeigt, ist mir ein Rätsel, im Firebug findet er sowohl den html- wie auch die css-Code.
 
Danke das du es dir angeschaut hast. Der Pfad ist korrigiert.

So wie es aussieht ist der Bereich mit id=header-image und class=container definiert. Ich habe aus <div id="header-image" class="container"> den container entfernt. Da hat sich nichts geändert. Nachdem ich header-image rausgenommen hatte ist das Bild nach unten rechts gewandert. Die Überschrift blieb im IE aber trotzdem abgeschnitten.

Schauts euch bitte mal an: Singing | singing in sing sing
Das ist die Version mit entferntem header-image.

Das ist der CSS Code:

Code: 
.container {
    padding: 0 60px;
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    }
    #header-image {
        padding: 0;
        overflow: hidden;
        }
        /* HEADER IMAGE
            full size - 1068x300
            8 column layout resized to 890x250 displayed at 648x250
            5 column layout resized to 534x150 displayed at 396x150
            3 column layout resized to 365x100 displayed at 228x100
         */
        #header-image img {
            padding: 0;
        }
    #content {
        width: 560px; /* 5 columns */
        float: left;
        margin: 0;
        padding: 20px;
        overflow: hidden;
    }
    #sidebar {
        width: 300px; /* 3 columns */
        float: right;
        margin: 0;
        padding: 20px;
        overflow: hidden;
    }

Kenne mich mit Css leider nicht gut aus. Fällt jemandem auf was ich ändern müsste?
 
Moin nochmal,

das Problem kommt bei mir nur im IE7, der 8er ist in dieser Beziehung unauffällig. Das Problem ist offenbar, dass besagte Grafik per css im div nach unten positioniert wurde. Der Bereich, der über das div herausragt, wird im 7er abgeschnitten. Ich vermute, der 7er geht damit anders um als die meisten (moderneren) Browser.
Ich bin jetzt nicht zu Hause und habe daher kein Firebug mehr. Wenn ich mich recht erinnere, wird die entsprechende Zeile per "position:absolute" positioniert. Absolut wird in den meisten Fällen als "absolut überflüssig" bezeichnet. Ich sehe mit meinen beschränkten Möglichkeiten mehrere Varianten:
- position:absolute entfernen und mit "css-Bordmitteln" positionieren
wenn absolute beibehalten werden soll:
- die Grafik im div generell etwas höher positionieren
- die Grafik im div mit einem alternativen Stylesheet nur für den IE7 etwas höher positionieren
- vll hilft das hier
- jemand anders hat eine bessere Idee

Sorry, aber mehr Ideen habe ich leider nicht.

Grüße
low
 
Das waren viele Ideen. Danke das du dir Gedanken machst!

Diese klingen sehr gut aber ich habe leider keine Ahnung wie ich das umsetzen könnte:

- position:absolute entfernen und mit "css-Bordmitteln" positionieren
wenn absolute beibehalten werden soll:
- die Grafik im div generell etwas höher positionieren
Zum Vergrößern anklicken....
 
Ein wenig was wirst Du schon machen müssen. Mach Dich mit der Materie vertraut, sowohl html und css, es wird jeden Tag etwas leichter werden.
Für den Anfang und das aktuelle Vorhaben: selfhtml: Abstand und selfhtml: Positionierung

Edit: oops, ist mir gerade aufgefallen:
HTML: 
<!DOCTYPE html>
Wenn Du hier einen vernünftigen Doctype reinsetzt, funzt es vll auch so. Sorry, dass ich da nicht früher drauf geachtet habe. :?
Klick mich, hier geht´s zum Doctype
 
Kein Problem, brauchst dich nicht entschuldigen. Bin froh das du mir versuchst zu helfen.

Ich habe jetzt heraus gefunden wenn ich bei tagline "position: absolute;" entferne wird die Schrift nicht mehr abgeschnitten. Dafür rutscht die Tagline eine Zeile nach unten.

Der Fehler muss irgendwie damit zusammen hängen.

themes.css
Code: 
.container {
    background: #fff;
}
    #header .container {
        padding-top: 80px;
        padding-bottom: 40px;
    }
        #title {
            position: relative;
            height: 80px;
        }
            #logo,
            #tagline {
                position: absolute;
                bottom: 0;
            }
            #logo {
                left: 0;
                font-size: 72px;
                line-height: 72px;
                letter-spacing: 0;
                            }
            #tagline {
                font-size: 18px;
                right: 0;
                line-height: 36px;
            }
            #header-image.container {
                padding: 0;
                
            }

Jemand eine Idee?
 
Zuletzt bearbeitet:
Hab leider keinen IE hier um mir das anzusehen, aber oft ist die Lösung schon ein

Code: 
height: 1%;

oder

Code: 
zoom: 1;

welche den IE dazu bringen bestimmten Elementen doch die nötige Form zu geben (Stichwort HasLayout).
 
Nochmals danke für eure Hinweise. Ich weiss leider nicht wo ich das einfügen muss. Kann mir das vielleicht jemand sagen?

Ich würde auch dafür bezahlen wenn jemand das Design für beide browser in Ordnung bringt.

Hätte ich das bloss nicht angenommen aber was macht man nicht alles ehrenamtlich :|
 
Das müsstest Du wie gesagt in deinen CSS-Code einfügen, und zwar an die Stellen die aus Sicht des IEs problematisch sind. Meist sind das <li>'s ohne Maßangaben.

Wenn Du dir das von jemanden machen lassen willst, frag in der Jobbörse.
 
Jetzt besteht nur noch das Problem mit der Überschrift (Blogtitel) die im IE 7 abgeschnitten wird. Wenn da noch jemand eine Idee hat bitte posten. Das mit dem Doctype hat nicht geholfen. @Threadi, Ich muss mich bei dir vielmals bedanken. Das height: 1%; hat das Problem mit den eingerückten Kategorien gelöst. Hier habe ich es eingefügt.
Code: 
#sidebar ul, 			#sidebar li { 				height: 1%; 				padding: 0; 				margin: 0; 				list-style: none; 			}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben