Zur Navigation

IE Anzeige-Probleme

1 Jörg Kruse

ein anders prob ist noch, das ich im IE unter navigation noch mal nen balken haben, der wiederum im opera und firefox nicht ist

Du kannst mit background-repeat erzwingen, dass die Hintergrundgrafik des Menus nicht wiederholt wird:

#navigation
{
font: 100% verdana;
font-size: 10px;
width: 715px;
height: 17px;
background-image: url(Bilder/index_07.jpg);
background-repeat:no-repeat;
float:left;
padding:0px;
}

Das Problem im IE 5.5 werd ich mir später nochmal anschauen

[Nachtrag Jörg: ich habe die folgenden Beiträge abgetrennt von diesem Thread - die Probleme sind auf die Seite http://www.borstenstyle.de/secret zu sehen]

17.08.2006 11:49 | geändert: 18.08.2006 13:18

2 borste

klingt gut, aber das wars lieder nicht,

jeetzt hab ich dort ne lücke wo man halt den bg vom container sieht, aber die lücke bleibt bestehen, das koriose ist, das ich auf "gästebuch" gerade probieren ne gallery einzubauen, testweise. wenn man auf gb klickt verschwindert die zeile! sobald man auf einen andere link klickt ist sie wieder da, ich find den verdammten fehler einfach nicht ..

17.08.2006 12:08

3 Jörg Kruse

Einer der in #navigation enthaltenen Elemente erzeugt im IE noch einen margin oder padding. In diesem Fall ist es der Außenabstand des ersten Kind-Elementes, der form - wenn man diesen auf 0 setzt, verschwindet die Lücke:

#navigation form {
margin:0;
}

17.08.2006 17:14

4 borste

beeindruckend, wie du das alles siehst! vielen dank, bis jetzt läuft alles wieder nach plan, sollte was sein meld ich mich. top forum top support! weiter so :D

gruß borste

18.08.2006 08:22 | geändert: 18.08.2006 08:22

5 Jörg Kruse

beeindruckend, wie du das alles siehst!

Hierzu noch ein kleiner Tipp:
wenn man nicht weiß, woher ein Abstand kommt, jedes in Frage kommende Element testweise mit einem roten Rahmen versehen (border:1px solid red;), dann kommt man dem Übeltäter relativ schnell auf die Schliche :)

18.08.2006 09:55

6 borste

ah! :D
is natürlich voll logisch, aber selber drauf kommen tut man nicht.
das einzigste prob was mir noch bekannt ist, is das im ie 6 teilweise, wahrscheinlich ne ältere version, das menü nicht richtig dargestellt wird und zuhause bei mir, mir ie 5.5. die liste nicht erzeugt wird..

hier mal der link zum ie 6 screen http://www.borstenstyle.de/zeug/screen.jpg

gruß

18.08.2006 10:47

7 Jörg Kruse

Im IE-5-Hack hast du für die IE-6-Korrektur nur 8px angegeben. Wenn du diesen Wert auf 86px veränderst, zeigt der IE den Hintergrund wieder in der vollen Breite an:

/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}

18.08.2006 13:47

8 borste

hier mal der quellcode, der navigation.
 /* common styling */

 /* Set up the default font and ovrall size to include image */
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:715px;
height:16px;
/*background:#fff url(../Bilder/index_07.jpg) 0 0px no-repeat;*/
position:relative;
left:8px;
margin:2px 0px 0 0px;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
text-align:center;

}

html.*.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:715px;
height:16px;
/*background:#fff url(../Bilder/index_07.jpg) 0 0px no-repeat;*/
position:relative;
left:8px;
margin:0.06em 0 0 0;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
text-align:center;

}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:88px;
height:1.5em;
font-weight:bold;
color:#888;
border-bottom:1px solid #888;
background:transparent filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
opacity:0.8; /*#FFF;*/
background: transparent url(../Bilder/opaque.png);
padding-left:10px;
line-height:1em;
margin-right:2px;
text-align:center;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
border-bottom:0px solid #888;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */

/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:1px solid #606;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:4px;
left:0;
width:96px;
border:1px solid #888;
border-top:0;
background:transparent ;
text-align:center;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:transparent url(../Bilder/opaque.png);
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:1em;
height:auto;
line-height:1em;
padding:5px; /*abstand beim ausgeklappen menu */
width:86px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#000;
color:#fff;
}

/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent #fff filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.9;
margin-top:3px; /* for IE5.5 faulty box model */
marg\in-top:4px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:96px; /* for IE5.5 faulty box model */
w\idth:8px; /* for IE6 */
}

18.08.2006 14:02

9 borste

und wieder einmal war es richtig, soviel punkte könnte man garnich vergeben, man kommt sich ja richtig dumm vor, wenn man seine fehler sieht :)

18.08.2006 14:34 | geändert: 18.08.2006 14:34

10 Jörg Kruse

Es ist auch leichter, die Fehler anderer zu entdecken als die eigenen ;)

Wegen dem IE 5.5 schaue ich heute abend nochmal

18.08.2006 14:40

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]