Probleme mit Firefox Css und Span

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

Autor dieses Themas

17:47, 28.1.2008

Hallo,

ich bin seit 3 Tagen an der Seite:
http://raubritta.lima-city.de/IRock/IRock0.05/extern/index.php
beschäfftigt. Bisher ging alles Reibungslos. Und wie man sehen sollte geht auch jetzt noch alles Perfekt beim IE.
Doch der so geschätzte FF macht leider Probleme. Ich habe schon alles mögliche ausprobiert aber leider keine Lösung gefunden. (gleiche Fehler bei Opera)

Ich hoffe jemand findet den Fehler in meinem Codegewirr:

die index.php datei:

<div class=\"content\">
      <span class=\"frei\">
      </span>
      <span class=\"navi\">
            <a href=\"index.php\" class=\"navi_startseite\"></a>
            <a href=\"registrieren.php\" class=\"navi_registrieren\"></a>
            <a href=\"chat.php\" class=\"navi_chat\"></a>
            <a href=\"forum.php\" class=\"navi_forum\"></a>
            <a href=\"screenshots.php\" class=\"navi_screenshots\"></a>
            <a href=\"impressum.php\" class=\"navi_impressum\"></a>
     </span>
     <span class=\"interface\">
            <font color=\"red\">
            <b>Willkommen bei IRock</b><br><br>
            IRock ist ein Browsergame bei dem man seine eigene Band managed.<br>
            Noch ist das Browsergame in der Konzept und Testphase.<br> 
            Es ist noch nicht Spielbar.<br>
     </span>
     <span class=\"login\">
            <form action=\"login.php\" method=\"post\">  
            Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=\"text\" name=\"Nickname\" size=\"19\"><br> 
            Passwort:&nbsp;<input type=\"password\" name=\"passwort\" size=\"19\"><br>
            <input type=\"submit\" value=\"Login\">
            </form> 
            </font>

     </span>
</div>

und nun meine index.css datei:

a.navi_startseite {
            background-image:url(bilder/startseitei.jpg);
            background-repeat:no-repeat;
            width:160px;
            height:54px;
 
          }
          a.navi_startseite:hover {
            background-image:url(bilder/startseitea.jpg);
            background-repeat:no-repeat;
        
          }

          a.navi_registrieren {
            background-image:url(bilder/registriereni.jpg);
            background-repeat:no-repeat;
            width:160px;
            height:54px;

          }
          a.navi_registrieren:hover {
            background-image:url(bilder/registrierena.jpg);
            background-repeat:no-repeat;
          }

          a.navi_chat {
            background-image:url(bilder/chati.jpg);
            background-repeat:no-repeat;
            width:160px;
            height:54px;
          }
          a.navi_chat:hover {
            background-image:url(bilder/chata.jpg);
            background-repeat:no-repeat;
          }

          a.navi_forum {
            background-image:url(bilder/forumi.jpg);
            background-repeat:no-repeat;
            width:160px;
            height:54px;
          }
          a.navi_forum:hover {
            background-image:url(bilder/foruma.jpg);
            background-repeat:no-repeat;
          }

          a.navi_screenshots {
            background-image:url(bilder/screenshotsi.jpg);
            background-repeat:no-repeat;
            width:160px;
            height:54px;
          }
          a.navi_screenshots:hover {
            background-image:url(bilder/screenshotsa.jpg);
            background-repeat:no-repeat;
          }

          a.navi_impressum {
            background-image:url(bilder/impressumi.jpg);
            background-repeat:no-repeat;
            width:160px;
            height:54px;
          }
          a.navi_impressum:hover {
            background-image:url(bilder/impressuma.jpg);
            background-repeat:no-repeat;
          }

.banner
{
height:328px;
width:1024px;
background-image:url(bilder/header2.jpg);
background-repeat:no-repeat;
background-position:center;
}



.content
{
height:300px;
width:1024px;
background-image:url(bilder/nav.jpg);
background-repeat:repeat-y;
background-position:center;

}

.navi
{
height:300px;
width:200px;
}

.frei
{
height:300px;
width:68px;
}


.interface
{
height:300px;
width:412px;

}

.login
{
height:300px;
width:212px;

}

Tut mir leid, dass ich soviel code posten muste. Aber ich kann den Fehler nur sehr schwer eingrenzen. Es geht ja schließlich weder das richtige Bild noch die abstände angezeigt...

Wäre echt nett, wenn ihr mich von meinen Qualen erlösen könntet die mich wegen diesem FF Fehler plagen...^^

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
tct

tct hat kostenlosen Webspace.

17:51, 28.1.2008
Warum nimmst du Span und nicht Div?
Bei Span kann man soweit ich weiß keine Größe und Position festlegen, da ist es kein Wunder, dass es nicht so aussieht, wie erwartet.
~~m**********r~~

17:54, 28.1.2008
1. Schein wohl ein klassisches Problem von \'Klassitis\' zu sein. D.h. du verwendest zu viele Klassen (warum verwendest du immer span-Elemente, wenn man die Divboxen ganz einfach floaten kann?). Es gibt für einzelne Elemente immer noch ID\'s.

2. Überarbeite nochmal dein Layout und mach es mit Divboxen. So einen Müll (entschuldige die Ausdrucksweise) habe ich schon lang nicht mehr gesehn...

3. Ich gebe dir folgende Tipps für dein überarbeitetes Layout: Du benötigst display float und eventuell noch clear.

Grüße, Moritz
Autor dieses Themas
raubritta

raubritta hat kostenlosen Webspace.

18:07, 28.1.2008
o.o

aalso:
ich habe das mit den Grafiken jetzt hinbekommen. Mir hat ein display:block; gefehlt.

Richtig bei Span kann man nicht die Größe Festlegen. Bei div wird aber immer eins unter dem anderen geschrieben. Also ein Umbruch. Genau das möchte ich ja verhindern :(

@moritzpeusers
2 argument: srry. Aber ich arbeite erst seit kurzen mit div. Davor habe ich meistens ein Tabellendesign gehabt, welches natürlich noch deutlichere Nachteile hatte.

3 argument: ok, ich werde danach suchen. Ich hoffe, ich werde fündig.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city