Probleme mit CSS-Stylesheets

[Wathergate]

Hallo,

vielleicht kann mir jemand bei meinem Problem helfen.
Ich versuch gerade für eine Website das Layout zu erstellen. Jetzt hapert es aber an 2 Dingen:

1. Wenn ich im Firefox über die Links fahre dann erscheint immer am rechten Rand noch so ne graue Box. Ich hab keine Ahnung woher die kommt und weshalb die angezeigt wird. Hab schon etliche Einstellungen an den Styles durchprobiert ohne Erfolg.

2. Wenn man mit dem IE bei der rechten Linkliste über die Links fährt dann schlägt da der rote Strich durch. Normalerweise dürfte er das aber nicht, da die Links und Listenelemente alle einen höheren z-index haben. Kann mir jemand erklären wieso das dennoch durchkommt?

Als Anschauungsbeispiel hab ich hier mal nen Link. www.wathergate.de/lsc/test3.php In dem Quelltext findet ihr alle CSS Formatierungen.

P.S.: Ich weis dass die Sheets nicht besonders gut Semantisch  aufgebaut sind. Das dürfte die 2 Probleme aber nicht Lösen.

Wär super wenn jemand auf meine Fragen eine Antwort wüsste....

[MudGuard]

Hi,

1. Wenn ich im Firefox über die Links fahre dann erscheint immer am rechten Rand noch so ne graue Box. Ich hab keine Ahnung woher die kommt und weshalb die angezeigt wird. Hab schon etliche Einstellungen an den Styles durchprobiert ohne Erfolg.

Die Box hat eine width von 120px (vorgegeben durch die li-Elemente, die eine width von 120px haben.
Die Links haben eine width von 120px plus 2*4px padding.

Dank des default-Werts "visible" von overflow ragen die a-Elemente also über die li-Elemente raus.

cu,
Andreas

[Wathergate]

Hi,

Die Box hat eine width von 120px (vorgegeben durch die li-Elemente, die eine width von 120px haben.
Die Links haben eine width von 120px plus 2*4px padding.

Dank des default-Werts "visible" von overflow ragen die a-Elemente also über die li-Elemente raus.

cu,
Andreas

Vielen Dank Andreas, dein Rat g´hat geholfen. Hatte nicht an die 2x4px padding gedacht.

Jetzt steht nur noch mein anderes Problem an, vielleicht weis ja da auch jemand Hilfe.

Wathergate

[Engin]

Hi Wathergate,

2. Wenn man mit dem IE bei der rechten Linkliste über die Links fährt dann schlägt da der rote Strich durch. Normalerweise dürfte er das aber nicht, da die Links und Listenelemente alle einen höheren z-index haben. Kann mir jemand erklären wieso das dennoch durchkommt?

Ja, deine linke Navigation

  
#left {  
z-index:7;  
}

hat einen höheren z-index als das

#main {  
z-index:1;  
}

nur, die rechte Navi ist etwas unübersichtlich, und steckt im

#addon {  
z-index:5;  
}

gib doch der

  
#navigation {  
}

auch einen z-index.

Grüße,
Engin
 GYRO

[Wathergate]

Hi,

gib doch der

#navigation {
}

>   
> auch einen z-index.  
  
Hab ich grad versucht und das geht dann auch nich. Hab sogar alle Navigation, A, LI, UL Elemente mit einem z-index versehen und die rote Linie kommt trotzdem durch :( Daran kann es also anscheinend nicht liegen.  
  
Wathergate

[Sven Rautenberg]

Moin!

Hab ich grad versucht und das geht dann auch nich. Hab sogar alle Navigation, A, LI, UL Elemente mit einem z-index versehen und die rote Linie kommt trotzdem durch :( Daran kann es also anscheinend nicht liegen.

Der z-index hilft dir nur, wenn du Elemente mit position anders als "static" positionierst, also "absolute", "relative" oder "fixed".

Ohne so eine Positionierung ist der z-index sinnlos.

- Sven Rautenberg

[Bobby]

Hi,

erstens hast du 2x die ID "navigation" verwendet. Das ist nicht zulässig. Ändere dies auf class="navigation".

Als 2. würde ich um sicher zugehen das die richtigen Elemente im IE angesprochen werden immer die gesamte Strukturkette im CSS angeben.
z.B.
.navigation UL LI A {
   font: bold 1em sans-serif;
   color: #336666;
   text-decoration: none;
   display:block;
   padding: 3px 4px;
   width: 120px;
   height: 25px;
   }

Grüße Bobby