zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden UL als Navigation (inline). Firefox zentriert die Links nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.10.2008, 20:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2008
Beiträge: 8
meccs76 befindet sich auf einem aufstrebenden Ast
Standard UL als Navigation (inline). Firefox zentriert die Links nicht

Hallo,

estrmal möchte ich mich kurz vorstellen.

Ich bin neu hier im Forum und Anfänger in Sachen CSS. Derezeit beschäftige ich mich mit einem "Lernprojekt" um CSS anhand parktischer Arbeit erlernen zu können.

Die Website mit der ich mich derzeit beschäftige soll eine Plattform für zwei hier in Leipzig ansäßige Bands werden. Das sind Freunde von mir, die mir erlaubt haben, mich auf ihrem Webspace ein bissl auszutoben XD. (später landet das ganze natürlich auf einer richtigen Domain)

Jetzt zu meinem eigendlichen Problem.

Ich habe auf der >Site< als Menü eine ungeordnete Liste benutzt, und diese mit entsprechenden Hintergrundbildern für Menü und Links versehen um einen dezenten 3D Effekt in der Navigation zu erzielen.

Mein Problem ist nun, daß die Links im Firefox nicht mittig im Menü ausgerichtet werden und somit immer oben ein kleiner Rand im a:hover Modus bleibt. Das versaut zum einen den gewünschten Effekt und sieht zum andren richtig....bescheiden...aus. Als Hintergrundbild dient ein Bild, welches beide Zustände beinhaltet, aber im a:hover Modus um die Hälfte nach oben verschoben wird.

Das der IE das ganze korrekt anzeigt und der Firefox nicht, bedeutet ja meist, daß der IE es fälschlicherweise richtig anzeigt. Wäre da nicht die Tatsache, daß es auch auf allen andren Browsern richtig (oder eher so wie gewünscht) dargestrellt wird.
Getestet habe ich mit Opera, Netscape, IE und Firefox jeweils in allen Auflösungen von 800x600 bis 1280x1024.

Momentan habe ich selber gar keinen Ansatzpunkt. Ich habe mit line-height und Schriftgrößen rumexperimentiert. Auch ein paar margins und paddings hab ich schon in allen Variationen rumgeschubst. In der Liste, den Links usw..Auch vertikal zentrierte Schriftausrichtung in Links, Liste und Menue führt zu nichts (hat keine Auswirkung).

Was hab ich übersehen?
Ich poste hier mal meine gesamte CSS Datei, eben weil ich nicht genau weis, wo genau der Wurm drin ist.

Code:
* { margin: 0; padding: 0; }


body {

       background-color:#444444;
      }









#Hauptcontainer {position:relative;
                 margin:0mm auto ;
                 width:760px;
                 }





#Header {position:relative;
         height:150px;
         background-color:#545654;
         }
#Header h1 {position:relative;
            margin:0px 70px 0px 50px;
            font-size:50pt;
            font-family:Bickham Script Pro Regular;
            letter-spacing:20px;
            color:#FCFEFC;
            }






#MenueMain {position:relative;

        height:23px;
        background-color:#646664;
        background:url(../Grafiken/Navigation.gif) no-repeat 0 0;
        }
                         a  {background:url(../Grafiken/Navigation.gif) no-repeat 0 0;}

                         a:hover {
                                         color:black;
                                         font-weight:bold;
                                         font-size:15pt;
                                         text-decoration:none;
                                         background-position: 0px -25px;
                                 }

                         a:link  {       color:black;
                                         font-weight:bold;
                                         font-size:15pt;
                                         text-decoration:none;
                                 }
                         a:visited {     color:black;
                                         font-weight:bold;
                                         font-size:15pt;
                                         text-decoration:none;
                                   }









#MenueMain ul {
                 display:inline;
                 list-style-type:none;
                 margin:0;
                 padding:0;
              }
#MenueMain li {display:inline;
               list-style-type:none;
               }
#MenueMain ul li a {
                    margin:60px;
                    padding:0;
                   }







#Menue {position:relative;
        height:23px;
        background-color:#646664;
        background:url(../Grafiken/Navigation.gif) no-repeat 0 0;

        }

                         a  {background:url(../Grafiken/Navigation.gif) no-repeat 0 0;}

                         a:hover {
                                         color:black;
                                         font-weight:bold;
                                         font-size:15pt;
                                         text-decoration:none;
                                         background-position: 0px -25px;
                                 }




                         a:link  {       color:black;
                                         font-weight:bold;
                                         font-size:15pt;
                                         text-decoration:none;
                                 }
                         a:visited {     color:black;
                                         font-weight:bold;
                                         font-size:15pt;
                                         text-decoration:none;
                                   }


#Menue ul {display:inline;
           list-style-type:none;
           }
#Menue li {display:inline;
           list-style-image:none;
           }
#Menue ul li a {
                margin:30px;
                padding:0;
                }






#Content  {position:relative;
           border-style:solid;
           border-width:1px;
           background-color:#FFFFFF;
           border-color:#FFFFFF;
           }
#Content p {margin:10px 100px 100px 100px;
            padding:20px 20px 20px 20px;
            line-height:150%;
            background-color:#F9F9F9;
            color:#616161;
           }
#Content h1 {margin:50px 100px 40px 100px;
             color:#8D8765
            }
#Content h2 {margin:20px 100px 30px 100px;
             font-size:12pt;
             color:#444444;
            }




#Mond {position:absolute;                            /*Grafiken*/
       margin-top:-35mm;
       margin-left:155mm;


       }
PS: Mir ist klar, daß man einige Sachen zusammenfassen könnte, dies werde ich später auch noch tun. Momentan hilft mir diese Schreibweise aber sehr beim lernen und die Übersicht zu behalten. Hat es eigendlich negative Auswirkungen es ausführlöich zu schreiben?

Geändert von meccs76 (25.10.2008 um 21:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.10.2008, 21:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Mein Problem ist nun, daß die Links im Firefox nicht mittig im Menü ausgerichtet werden und somit immer oben ein kleiner Rand im a:hover Modus bleibt.
Das kann ich nicht nachvollziehen. Ich sehe keinen Unterschied beim Hover-Effekt.
Von welchen IE- und FF-Versionen sprichst du?
Hast du mal einen Vergleichs-Screenshot?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.10.2008, 21:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2008
Beiträge: 8
meccs76 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Das kann ich nicht nachvollziehen. Ich sehe keinen Unterschied beim Hover-Effekt.
Von welchen IE- und FF-Versionen sprichst du?
Hast du mal einen Vergleichs-Screenshot?
Na dann bin ich jetzt völlig irritiert. XD
Heist das, daß du überall den 1mm Rand nach oben im Menü hast? Oder wird es überall "richtig" dargestellt?

Opera:




Firefox:

Mit Zitat antworten
  #4 (permalink)  
Alt 25.10.2008, 21:41
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Den Rand sieht man wohl nur im FireFox 3....
Ich habe Ihn im FireFox nähmlich ebenso nicht....
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 25.10.2008, 21:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2008
Beiträge: 8
meccs76 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von eXHTML Beitrag anzeigen
Den Rand sieht man wohl nur im FireFox 3....
Ich habe Ihn im FireFox nähmlich ebenso nicht....
Und gibt es eine Möglichkeit diesen weg zu bekommen?

Ist zwar nur ne Kleinigkeit, aber ich möchte die Site für so viele Browser wie möglich optimieren, und irgendwie stöhrt mich das XD.

Edit: ist für mich ein Zeichen, daß ich dennoch irgendwas falsch gemacht habe.

Geändert von meccs76 (25.10.2008 um 21:49 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.10.2008, 21:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich sehe nirgends so eine Linie.
Liegt vermutlich daran, dass ich in meinem FF 3.03 eine andere Default-Schrift eingestellt habe.
Grundsätzlich: Wenn du Kontrolle über die Dimensionen von Elementen haben willst (und das willst du, wenn du so mit Hintergrundbildern arbeitest): Nimm Float, um deine Menüpunkte nebeneinander zu stellen.

Weder mm noch pt sind geeignet für Bildschirmdarstellung. Nimm px und für Schriftgrößen am besten immer Prozent oder em, damit auch IE-Benutzer die Schrift ihren Bedürfnissen entsprechend skalieren können.

Die Angaben, die du für deine Links machst, gelten für alle Links der Seite, nicht nur für die Navigation. Willst du das wirklich?

Geändert von fricca (25.10.2008 um 21:48 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 25.10.2008, 22:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2008
Beiträge: 8
meccs76 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Ich sehe nirgends so eine Linie.
Liegt vermutlich daran, dass ich in meinem FF 3.03 eine andere Default-Schrift eingestellt habe.
Grundsätzlich: Wenn du Kontrolle über die Dimensionen von Elementen haben willst (und das willst du, wenn du so mit Hintergrundbildern arbeitest): Nimm Float, um deine Menüpunkte nebeneinander zu stellen.

Weder mm noch pt sind geeignet für Bildschirmdarstellung. Nimm px und für Schriftgrößen am besten immer Prozent oder em, damit auch IE-Benutzer die Schrift ihren Bedürfnissen entsprechend skalieren können.

Die Angaben, die du für deine Links machst, gelten für alle Links der Seite, nicht nur für die Navigation. Willst du das wirklich?
Oha, scheinbar ist das Problem größer als ich dachte. Denn, wenn die Schriftart per default einen Einfluss auf diese Darstellung hat, dann sollte ich diesen "Wackelkandidaten" von vorn herrein ja ausschließen, oder? Also am besten definieren, ich werd mich mal dran machen und das testen. Würdest du mir sagen, welche Schriftart per default bei dir eingestellt ist? Würde mir bei der Fehlersuche sehr helfen.

Zitat:
Die Angaben, die du für deine Links machst, gelten für alle Links der Seite, nicht nur für die Navigation. Willst du das wirklich?
Nein, das möchte ich nazürlich nicht. Aber ich habe die Angaben doch innerhalb des Containers gemacht. Ist das so falsch?
Mit Zitat antworten
  #8 (permalink)  
Alt 25.10.2008, 22:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von meccs76 Beitrag anzeigen
Würdest du mir sagen, welche Schriftart per default bei dir eingestellt ist?
Das spielt keine Rolle. Du kannst so die Darstellung nicht kontrollieren. Siehe oben.
Es ist immer der Benutzer, der das letzte Wort über die Schriftart (und Größe!) hat.



Zitat:
Nein, das möchte ich nazürlich nicht. Aber ich habe die Angaben doch innerhalb des Containers gemacht. Ist das so falsch?
Du hast die Angaben für die Links im Stylesheet eingerückt, sonst nichts.
Informier dich über den Nachfahrenselektor.
Mit Zitat antworten
  #9 (permalink)  
Alt 25.10.2008, 22:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2008
Beiträge: 8
meccs76 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Das spielt keine Rolle. Du kannst so die Darstellung nicht kontrollieren. Siehe oben.
Es ist immer der Benutzer, der das letzte Wort über die Schriftart (und Größe!) hat.



Du hast die Angaben für die Links im Stylesheet eingerückt, sonst nichts.
Informier dich über den Nachfahrenselektor.

Ach, ich Kloppi XD

aber

#Menue a {...}

#Menue a:link, a:visited {...}

#Menue a:hover {..}

sollte Abhilfe schaffen, oder?

Danke für den Tip.

Würdest du mir das mit Float nochmal für Dummies erklären bitte?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.10.2008, 22:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von meccs76 Beitrag anzeigen

#Menue a:link,
a:visited {...}
Fällt dir jetzt was auf?

Zitat:
Würdest du mir das mit Float nochmal für Dummies erklären bitte?
Nein, einen Roman zu schreiben habe ich keine Zeit und keine Lust.
Grundlagen zu Float im Allgemeinen findest du unter FAQ Punkt 2. Zu Navigationen im Speziellen in Heikos FAQ-Beitrag.
Ansonsten brauchst du ein Buch, wenn du CSS lernen willst. Dieses Forum kann dir nicht die Grundlagen erklären.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
problem mit links im firefox steve-x CSS 7 05.01.2009 21:07
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera eRoZion CSS 17 16.09.2005 09:30
Probleme mit 3 spalten luk CSS 3 08.06.2005 14:39
Navigation Links Hover child CSS 3 25.02.2005 21:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:30 Uhr.