Internet-Explorer Probleme mit "border"

[David]

Hallo,

ich muss (leider) eine Website IE-Kompatibel halten, und dabei gelingt mir eines nicht: Auf http://daviddauer.de/private/sk/ seht ihr links so eine Navigationsleiste. In FireFox, Safari etc wird die schön mit einem 1px rand umrahmt. Nur im IE klappt das nicht und ich hab absolut keine ahnung warum. (Dass das mouseover-funktioniert ist nicht so wild, aber vielleicht weiß jemand auch warum!?)

Danke für jeden Tipp schonmal

David

[Ashura]

Hallo David.

Nur im IE klappt das nicht und ich hab absolut keine ahnung warum. (Dass das mouseover-funktioniert ist nicht so wild, aber vielleicht weiß jemand auch warum!?)

Ich vermute einfach mal, dass der IE ein Problem mit der Vererbung von

#navigation li {  
 border-top: 1px solid #9EACBA;  
 padding: 10px 0px 10px 15px;  
}

hat. Verpasse die border-top mal einem #navigationSelect li.

Gruß, Ashura

[David]

Hallo Ashura,

Ich vermute einfach mal, dass der IE ein Problem mit der Vererbung von

#navigation li {

border-top: 1px solid #9EACBA;
padding: 10px 0px 10px 15px;
}

>   
> hat. Verpasse die `border-top`{:.language-css} mal einem `#navigationSelect li`{:.language-css}.  
  
Hilft anscheinend nichts... Irgendwie wird manchmal einfach nur die Hälfte der Borders angezeigt (wenn man oft genug f5 drückt ;-)), sehr komisch

[itseme]

Hallo Ashura,

Ich vermute einfach mal, dass der IE ein Problem mit der Vererbung von

#navigation li {

border-top: 1px solid #9EACBA;
padding: 10px 0px 10px 15px;
}

> >   
> > hat. Verpasse die `border-top`{:.language-css} mal einem `#navigationSelect li`{:.language-css}.  
>   
> Hilft anscheinend nichts... Irgendwie wird manchmal einfach nur die Hälfte der Borders angezeigt (wenn man oft genug f5 drückt ;-)), sehr komisch  
  
Daran liegt es auch nicht. Hab mir deinen Quelltext gerade ins HomeSite geholt. Moment also :)

[itseme]

Hoi,

wie wäre es wenn du deinen Listenpunkten auch die Klasse bzw. ID zuweist in der die Listenelemente dann formartiert werden.

Die neuen Browser, Opera7/8, Firefox... können sich die Werte aus den darüberliegenden DIV's "stehlen", bzw. übernehmen sie die Styles wenn für sie selbst nichts definiert wurde und eben das ist bei dir der Fall.

<ul>
     <li >usw...

änderst du einfach in

<ul id="navigation">
     <li >usw...

dann gehts.

Der IE ist eben doof. DU hast die ID im DIV darüber defiert, der IE versteht aber nicht das sie auch für alle ELEMENTE innerhalb gelten sollen.

Und dabei wolltest du mich offensichtlich garnicht *G

Grüße - IT

[David]

Hey,

mann so doof der IE. Vielen Dank!

David

[itseme]

Hey,

mann so doof der IE. Vielen Dank!

David

Gehts denn so??

Bei mir wars damit dann IE, Opera und FF konform...

An CSS darf sowas nicht scheitern =)

[David]

Gehts denn so??

oh, ja klar, das Dankeschön sollte ne indirekte Bestätigung sein ;-)

Bei mir wars damit dann IE, Opera und FF konform...

An CSS darf sowas nicht scheitern =)

Gruß
David

[itseme]

Oh... hab ich nicht gesehen :) No Prob.! :)

[Ashura]

Hallo David.

Hilft anscheinend nichts... Irgendwie wird manchmal einfach nur die Hälfte der Borders angezeigt (wenn man oft genug f5 drückt ;-)), sehr komisch

Das Problem mit der border kannst du hierdurch beheben:

#navigation ul {  
 list-style: none;  
 border: 1px solid #9EACBA;  
 /*border-top-width: 0;  
 border-left-width: 0;*/  
 margin: 0;  
 padding: 0;  
 margin: -1px 0px 0px 0px;  
}

Der IE hat ein Problem mit der border-width, die kannst du also rausschmeißen.

Den Hovereffekt kann der IE nicht umsetzen, da du ihn auf ein anderes Element (li) als auf Links (a) angewendet hast. Nur dort erkennt er dies auch an. Experimentiere ein wenig mit width und height für das a-Element, damit das es so groß wird, wie das li-Element, und somit für den IE den gleichen Effekt bewirkt, wenn du nun darauf :hover anwendest.

Gruß, Ashura

[David]

Hallo,

Das Problem mit der border kannst du hierdurch beheben:

#navigation ul {

list-style: none;
border: 1px solid #9EACBA;
/border-top-width: 0;
border-left-width: 0;/
margin: 0;
padding: 0;
margin: -1px 0px 0px 0px;
}

>   
> Der IE hat ein Problem mit der border-width, die kannst du also rausschmeißen.  
>   
  
Nur sieht das dann in anderen Browsern wieder doof aus (zu dick, weil da ja keins sein darf)...  
  

> Den Hovereffekt kann der IE nicht umsetzen, da du ihn auf ein anderes Element (li) als auf Links (a) angewendet hast. Nur dort erkennt er dies auch an. Experimentiere ein wenig mit width und height für das a-Element, damit das es so groß wird, wie das li-Element, und somit für den IE den gleichen Effekt bewirkt, wenn du nun darauf :hover anwendest.  
  
versteh nicht, wie ich den width: wert ändern muss. wenn (a) doch die komplette breite von dem (li) hat, überlagert er dies dann nicht und verhindert den effekt des (li) genau so?  
  

>   
> Gruß, Ashura  
>   
  
Danke und Gruß  
David

[Ashura]

Hallo David.

Nur sieht das dann in anderen Browsern wieder doof aus (zu dick, weil da ja keins sein darf)...

Dann wirst du wohl mit ein paar Hacks experimentieren müssen.

versteh nicht, wie ich den width: wert ändern muss. wenn (a) doch die komplette breite von dem (li) hat,

... was nicht der Fall ist...

überlagert er dies dann nicht und verhindert den effekt des (li) genau so?

Wenn das a-Element genau so groß ist, wie das li-Element, kann darauf auch der :hover Effekt angewendet werden, was dann auch der IE umsetzen kann.

Gruß, Ashura

[itseme]

Hallo,

Hoi,

ich muss (leider) eine Website IE-Kompatibel halten, und dabei gelingt mir eines nicht: Auf http://daviddauer.de/private/sk/ seht ihr links so eine Navigationsleiste. In FireFox, Safari etc wird die schön mit einem 1px rand umrahmt. Nur im IE klappt das nicht und ich hab absolut keine ahnung warum. (Dass das mouseover-funktioniert ist nicht so wild, aber vielleicht weiß jemand auch warum!?)

Leider? So ist das Geschäft :)
Definier den Rahmen nicht über das Listenelement sondern über ein Div, dann versteht das auch der IE. Ich hab die Erfahrung gemacht das es z.T. sinnvoller ist f. versch. Browser versch. Style Dateien zu verwenden die sich dann je nach Bedarf ablösen. Es wird ja immer der zuletzt angegebene Code interpretiert und was der jeweilige Browser nicht kann eben ausglassen bzw. am Ende "nachgeladen"

Danke für jeden Tipp schonmal

Hoffe das war nicht zu verwirrend - hab das manchmal :)

David

Grüße, IT

[Detlef G.]

Hallo David

In FireFox, Safari etc wird die schön mit einem 1px rand umrahmt. Nur im IE klappt das nicht und ich hab absolut keine ahnung warum.

Das kann ich nicht nachvollziehen, bei mir ist das Aussehen in Mozilla und IE
identisch. Hast du den Border eventuell nachträglich eingefügt, und dein IE zeigt
dir nur die alte Version aus dem Cache an?

(Dass das mouseover-funktioniert ist nicht so wild, aber vielleicht weiß jemand auch warum!?)

Der IE kennt :hover nur für Links. Du könntest dafür sorgen, dass der Link den
Listenpunkt vollständig ausfüllt und dann auch die Hintergrundfarbe dem Link
zuordnen. Das hätte dann auch den Effekt, dass der gepunktete Rahmen beim fokus
auf den Link nicht so hässlich nur den schmalen Strefen umschließt.

Auf Wiederlesen
Detlef

[David]

Hallo,

Hallo David

In FireFox, Safari etc wird die schön mit einem 1px rand umrahmt. Nur im IE klappt das nicht und ich hab absolut keine ahnung warum.

Das kann ich nicht nachvollziehen, bei mir ist das Aussehen in Mozilla und IE
identisch. Hast du den Border eventuell nachträglich eingefügt, und dein IE zeigt
dir nur die alte Version aus dem Cache an?

Hab es inzwischen geändert gehabt ;-)

(Dass das mouseover-funktioniert ist nicht so wild, aber vielleicht weiß jemand auch warum!?)

Der IE kennt :hover nur für Links. Du könntest dafür sorgen, dass der Link den
Listenpunkt vollständig ausfüllt und dann auch die Hintergrundfarbe dem Link
zuordnen. Das hätte dann auch den Effekt, dass der gepunktete Rahmen beim fokus
auf den Link nicht so hässlich nur den schmalen Strefen umschließt.

Wenn ich das Padding aus dem  #navigation li rausnehme und in das #navigationSelect a reinsetze, dann füllt der Link diesen Bereich immer noch nicht ganz aus.
Jemand ne Idee?

Auf Wiederlesen
Detlef

Grüße
David

[Detlef G.]

Hallo David

Wenn ich das Padding aus dem  #navigation li rausnehme und in das #navigationSelect a reinsetze, dann füllt der Link diesen Bereich immer noch nicht ganz aus.

Der IE besteht in deinem Fall darauf, eine Höhe für #navigation a
angegeben zu bekommen, 100% sollten funktionieren.

Was mir noch auffällt:
Warum hast du für #navigation position:relative angegeben?
Warum überhaupt so häufig position:relative?
Ist es wirklich überall nötig?
Warum gibt es zwei Elemente mit der Id navigation. (eine ID darf in einem
Dokument nur einmal vorkommen)

Warum so kompliziert?

  
#navigation ul {  
  list-style: none;  
  border: 1px solid #9EACBA;  
  border-top-width: 0;  
  border-left-width: 0;  
  margin: 0;  
  padding: 0;  
  margin: -1px 0px 0px 0px;  
}  
  
#navigation ul {  
  list-style: none;  
  border: solid #9EACBA;  
  border-width:0 1px 1px 0;  
  margin: 0;  
  padding: 0;  
}

funktioniert bei mir ohne Probleme.

  
  <div id="navigation">  
    <div id="navigationSelect"> <!-- IE Fix -->  
      <ul id="navigation">  
  
  
  <div id="navigation">  
    <ul>  

~~~würde mir reichen.  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!