Fehlerhafte bzw. andere Darstellung bei Firefox.

Casperli · #1 (**permalink**) 12.07.2009, 20:03

Hallo

Ich bin an einer kleinen Webseite auf der ich kostenlose freewareprogramme anbieten möchte. Nun hab ich mich Heute um etwas abwechslung zu haben an die Indexseite gesetzt. Eigentlich lief alles gut bis ich die Seite hochgeladen habe und mit erschrecken festgestellt habe das der firefox einen Darstellungsfehler macht bzw. das ganze anders darstellt als der IE. Leider bin ich mit meinem Latein nun am Ende und hab auch nach Stundenlanger Fehlersuche keine Ahnung was ich noch versuchen soll. In der Hoffnung auf Hilfe bin ich auf dieses Forum gestossen. Ich muss noch erwähnen das ich ein anfänger bin und mir mein jetztiges können (wenn man das so nennen kann) mithilfe von Büchern angeeignet habe. Hier der Link zu meiner Seite www.downup.ch Im Internetexplorer wird es so dargestellt wie ich es haben möchte. Die topsecret Bilder sind nur Platzhalter an denen ich später Originale einsetzen möchte.
Hier noch der HTML Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style/styleindex.css" type="text/css" rel="stylesheet" />
</head>

<body>
       <div id="div1">

       <div id="logo" align="center"><img src="bilder/downup2.png" border="" height="251" width="241" alt="" /></div>
       <div id="enterlink" align="center"><a href="ausgabederdaten.htm" style="color: #DAA520"> ENTER</a></div>
       <div id="info"><h2>Die Downloadseite f&uuml;r Top-Freeware im Netz !</h2> </div>
       <div id="vorschau1"><img src="bilder/top-secret.gif" border="" height="100" width="188" alt="" /></div>
       <div id="vorschau2"><img src="bilder/top-secret.gif" border="" height="100" width="188" alt="" /></div>
       <div id="vorschau3"><img src="bilder/top-secret.gif" border="" height="100" width="188" alt="" /></div>

       </div>
</body>
</html>

und der Code der CSS Datei

Code:

body
{
   background-color: #000;
    padding: 0;
    margin: 0;

}

#div1 {
    width: 100%; height: 100%;
    text-align: center;

}

p
{
    color: #ffffff;
}
#enterlink
{

    font-size: 25px ;
    padding-top: 2%;

}

#logo {
 padding-top: 170px;
}

#vorschau1 {
    margin-top: 9%;
    width: 188px; height: 100px;
    float: left;
    margin-left: 19% ;


}

#vorschau2 {
    margin-top: 9%;
    width: 188px; height: 100px;
    float: right;
    margin-right: 19%



}

#vorschau3 {
    margin-top: 10%;
    width: 188px; height: 100px;



    }

    #info {
     color: #DAA520;
     margin-top: 40px;
    }

Wenn mir eventuell jemand einen Tip oder eine hilfestellung geben könnte wäre ich Euch unendlich dankbar, den im moment weis ich echt nicht was ich tun könnte um dieses maleur zu beheben.
Besten Dank im voraus

Casperli

EDIT: Jetzt stimmt nicht einmal mehr die Darstellung im IE ...irgendetwas hab ich geändert ?? Das dritte Bild das links unten klebt sollte eigentlich zwischen die anderen 2 Bilder. ich arbeite mit dem Editor Webcoton Scriptly und in der IE Vorschau des editors ist die Darstellung ok ?

Casperli · #2 (**permalink**) 12.07.2009, 22:14

jetzt hab ich den CSS Code verändert und es fast hinbekommen (nur die höhe der 3 Bilder stimmen noch nicht ganz überrein. allerding erscheint mir der CSS Code völlig unlogisch und falsch, ich verstehe nicht wesshalb er mir das ganze jetzt so darstellt.

Das rote dargestellte ist die geänderte Stelle.

Code:

body
{
   background-color: #000;
    padding: 0;
    margin: 0;

}

#div1 {
    width: 100%; height: 100%;
    text-align: center;

}

p
{
    color: #ffffff;
}
#enterlink
{

    font-size: 25px ;
    padding-top: 2%;

}

#logo {
 padding-top: 170px;
}

#vorschau1 {
    margin-top: 9%;
    width: 188px; height: 100px;
    float: left;
    margin-left: 19% ;


}

#vorschau2 {
    margin-top: 9%;
    width: 188px; height: 100px;
    float: right;
    margin-right: 19%



}

#vorschau3 {
    margin-top: 9%;
    width: 188px; height: 100px;

    margin-left: 43.5%;





    }

    #info {
     color: #DAA520;
     margin-top: 40px;
    }

Naja ich denke ich sollte mit dem rest nun klar kommen auch wenn ich es nicht verstehe. muss das ganze mal noch in älteren Browsern überprüfen. Danke Euch.

Casperli

aboleo · #3 (**permalink**) 12.07.2009, 22:40

Ein - aus meiner Sicht - falsches Markup versuchen mittels CSS auszugleichen, ist Perlen vor die Saeue...

Ein umschliessender Container, ein darin befindlicher img-Tag fuer dein Logo vllt. besser durch eine H1 mit image-replacement, dein a-Tag, deine H2 und drei Bilder, je nach dem was dir lieber ist, entweder direkt in eine ungeordnete Liste oder als normale Bilder, duerften hier vollkommen ausreichend sein.

Die Zentrierung ueber den Body, dem wrapper eine Breite und das allseitsbekannte margin:0 auto mitgeben, dein Ankerelement noch als Blockelement auszeichnen und eben bei deinen Bildern schauen wie du es brauchst, entweder die Listenelemente floaten oder eben so stehen lassen. Die Klassen und Ids die du hier verwendet hast kannst du teilweise uebernehmen und schon duerfte es in jedem Browser gleich aussehen.

So mal eben schnell was aus den Fingern gesaugt ohne es wirklich getestet zu haben, darauf duerfte sich aber aufbauen lassen:

HTML-Code:

<!DOCTYPE html>
<htmllang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Titel</title>

        <style>
        *    { padding: 0; margin: 0; }
        body { background-color: #000; text-align: center; }
        h1 {
            color: #daa520;
            background: url();
            width:; height:;
        }
        
        h1 a { display: block; padding-top: 170px; }
        h2 { color: #DAA520; margin-top: 40px; }
        p { color: #fff; }
        ul {margin-top: 10%}
        
        #page-wrap { width: 565px; margin: 0 auto; }
        #enterlink { font-size: 25px ; padding-top: 2%; display: block; }
        .vorschau {
            width: 188px; height: 100px;
            display: inline;
        }
        .vorschau img { float: left; }
        </style>
    <body>
        <div id="page-wrap">
            <h1><a id="enterlink" href="ausgabederdaten.htm" style="">Enter</a></h1>
            <h2 id="info">Die Downloadseite f&uuml;r Top-Freeware im Netz !</h2>
            <ul>
                <li class="vorschau"><img src="bilder/top-secret.gif" border="" height="100" width="188" alt="">
                <li class="vorschau"><img src="bilder/top-secret.gif" border="" height="100" width="188" alt="">
                <li class="vorschau"><img src="bilder/top-secret.gif" border="" height="100" width="188" alt="">  
            </ul>
            
        </div>
        <!-- endPage-Wrap -->

Casperli · #4 (**permalink**) 12.07.2009, 23:55

Hallo

Besten Dank für Deine Hilfe. Ich werde das morgen gleich einmal versuchen. Es ist immer wieder interessant zu sehen wie man solch probleme lösen kann bzw. was es alles für Lösungswege dafür gibt.

Obwohl es mittlerweile bei mir auch korrekt dargestellt wird so erscheint mir meine Lösung eher als ein gebastel

Bin gespannt ob ich Deine Lösung sauber umsetzen kann. Werde mich bei allfälligen Fragen nocheinmal melden.

Danke nocheinmal

Gruss Casperli

aboleo · #5 (**permalink**) 13.07.2009, 09:02

Um dein Problem wirklich loesen zu koennen, solltest du dir folgende Fragen stellen:

Sind vorschaltseiten sinnvoll?
Hab ich schon mal bei einer anderen Seite, die halbwegs professionell aussieht, sowas schon mal gesehen.

Dein Logo und den Slogen, hast du im Regelfall, sowieso schon auf deiner Seite.
Werbebanner, ich vermute mal, dass dies aus den unteren drei Bildern gemacht werden soll, kann man auch direkt auf der Seite einschweissen.

Casperli · #6 (**permalink**) 13.07.2009, 09:56

Hallo aboleo

Werbebanner will ich keine, ich verabscheue Werbung auf Internetseiten

Die 3 Bilder wären eher gedacht Vorschau für die 3 Topprogramme bzw. die 3 Programme mit den meisten Downloads. Allerdings ist die Frage ob Vorschauseiten sinnvol sind durchaus berechtigt.....ich weis es nicht. Dieses Thema muss ich mit meinem Kumpel mal durchsprechen mit dem ich die Seite in angriff nehme (Er ist hauptsächlich für php zuständig , Verwaltung upload der programme, admininterface ect. ich mach nur das drumherum)

Das problem mit den Vorschaubildern ist nun gelöst und funktioniert (zumindest auf den neusten browsernversionen) Ich hab mir wie Du mir geraten hast die 3 Bilder einfach in eine untergeordnete liste gesetzt. in der css Datei mittels text-align: center; zentriert und musste danach nur noch den Abstand der Bilder zueinander und den gewünschten Abstand zum nächsten oberen definieren. Und auch das Logo steht nun nicht mehr seperat in einem <div> wie Du mir geraten hast.

HTML CODE

Code:

<body>
       <div id="div1">

       <img id="logo" src="bilder/downup2.png" height="251" width="241" alt="" />
       <div id="enterlink"><a href="ausgabederdaten.htm" style="color: #DAA520"> ENTER</a></div>
       <div id="info"><h2>Die Downloadseite f&uuml;r Top-Freeware im Netz !</h2> </div>
       <img id="vorschau1" src="bilder/thunderbird.jpg" height="100" width="188" alt="" />
       <img id="vorschau2" src="bilder/firefox.jpg" height="100" width="188" alt="" />
       <img id="vorschau3" src="bilder/gimp.jpg" height="100" width="188" alt="" />

       </div>
</body>
</html>

CSS CODE

Code:

body
{
   background-color: #000;
    padding: 0;
    margin: 0;

}

#div1 {
    width: 100%; height: 100%;
    text-align: center;
}

p
{
    color: #ffffff;
}
#enterlink
{
    font-size: 25px ;
    padding-top: 2%;
}

#logo {
 padding-top: 140px;
}

#vorschau1
 {
    margin-top: 4%;
}

#vorschau2
 {
    margin-top: 4%;
    margin-left: 80px;
    margin-right: 80px;
}

#vorschau3
 {
    margin-top: 4%;

 }

    #info {
     color: #DAA520;
     margin-top: 40px;
    }

In diesem Sinne nocheinmal ein dickes Dankeschön für Deine Hilfestellungen.

Gruss Casperli

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Menü, CSS, Darstellung im IE und im Firefox, die 2.000.000ste :(	yeti1966	CSS	5	14.07.2009 11:44
Falsche Darstellung im Firefox	nzerox	CSS	3	29.06.2009 14:03
Falsche Darstellung in Firefox	surfinsaxman	CSS	5	07.02.2008 14:03
2 Probleme mit Firefox bzw. IE	joec8l	CSS	5	16.08.2005 23:54
Probleme der Darstellung mit Firefox + Test mit NS/Opera	wasty	Site- und Layoutcheck	3	10.01.2005 10:12