✔ Browererkennung und Weiterleitung per js

Vielleicht hilft hier evtl. im CSS eine z-index-Regel zur höheren Schichtpositionierung weiter.

CSS: 
#menu {
position:relative;
z-index:999;
/* hier folgen die übrigen Formatierungen */
}

Edit: Der Tipp gilt hier nicht für die implementierte IE-Weiterleitungsseite "index2.htm" ;)
 
Zuletzt bearbeitet:
Hab die Weiterleitung rausgenommen und in der CSS Deinen Tip eingebaut. Funktioniert aber leider noch nicht. Vielleicht kannst Du noch mal nachsehen. Muss jetzt leider weg, bin ca. 13:00 Uhr zurück. Hier, wenn Du sie nicht schon hast, die CSS:


#textbox {
padding: 0 20px 0 20px; /*padding: top right bottom left - früher h2 */
text-align:justify; /* für blocksatz */
}

body {
background-color: #ffd8b7;
width: 800px;
margin: auto;
padding: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 15px;
color: black;
border: 1px solid #800000;
}


#main {
/*width: 800px; schon erfällt in "body" */
margin: auto;


}
/*--gewährleistet einheitliche Abstände in unterschiedlichen Browsern--*/
* {
margin: 0;
padding: 0;
}
.kopfleiste {
background-color: #ffffff;
width: 30px;
padding-top: 8px; /* mit Padding rücke ich die Schrift vom oberen Rand in die Mitte */
}
.brauneleiste {
background-color: #ffcc99;
padding: 0 2px 0 2px;
}
.vertlinie {
background-color: #ffcc99;
width: 1px;
}
.post {
text-align: left;
}
.ggtrans {
text-align: center;
float: none;
}
#rechtswerbung {
position: absolute;
top: 100px;
top: 240px;
}
#eurokaution {
position: absolute;
top: -80px;
top: 180px;
}
#gewerbe {
position: absolute;
top: 25px;
top: 180px;
}
#google-160x600 {
position: absolute;
top: 70px;
top: 220px;
}
a:link {
background-color: transparent;
color: black;
font-size: 13px;
font-weight: bold;
}
a:visited {
color: red;
}
a:hover {
background-color: #CCCCCC;
}
a:active {
background-color: #ffffff;
}
table, td {
vertical-align: top;
font-size: 1em;
text-align: left;
padding: 5px;
}

/*--definiert den Hintergrundbalken der Navi und einige allgem. Angaben--*/
#menu {
position:relative;
z-index:999;
/* hier folgen die brigen Formatierungen */
width: 100%;
background-color: #ffcc99;
background-color: transparent;
font-size: 1em;
line-height: 1.5; /*--bewirkt eine vertikale Textzentrierung--*/
float: left; /*--nimmt die Navileiste aus dem "Fluss", verhindert float-/clear-Probleme der ul--*/
}

/*--definiert die einzelnen Navigationsblöcke--*/
#menu ul {
float: left;
width: 195px; /* Breite der Linkblöcke */
list-style-type: none;
}

/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: black;
border: 1px solid #800000;
background-color: #ffcc99;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
height: 25px; /* die höhe statt 40 auf auto */ /* Höhe der Linkfelder im Klappmenu */
text-decoration: none;
display: block;
border: 1px solid #ffcc99;
text-align: left;
/* background-color: yellow; zum testen */
background-color: white;
color: #000000;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #800000;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu li {
position: relative;
/*verhindert im Zusammenhang mit pos. absolute bei ul ul eine Höhenvergrößerung von #menu beim Hovern--*/
}

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
background-color: #ffcc99;
height: 30px;
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000000;
border: 1px solid #003366;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #ff9224;
border: 1px solid #ccc;
}
/*--nur für IE-Versionen 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}

.link2, a {
/* background-color: #ffd8b7; ----- farbe nur einmal in "body" setzen ---------*/
color: black;
font-size: 12px;
text-decoration: underline;
}
.linkagb, a {
color: black;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.farbedunkel td {
background-color: #ffcc99;
}
.farbehell td {
/* border-spacing: 0; -------------------------------------------*/
/* background-color: #ffd8b7; -------- farbe nur einmal in "body" setzen ---------*/
}
a.sp:link {
color: yellow;
font-size: 13px;
font-weight: bold;
}
a.sp:hover {
background-color: #cccccc;
}
a.sp:active {
background-color: black;
}
p {
font-size: 14px;
text-align: left;
padding-left: 3px;
padding-right: 10px;
margin-top: 0;
margin-bottom: 0;
}
h1 {
font-size: 14px;
padding: 0 0 0 0;
margin-bottom: 0;
margin-top: 0;
color: #000000;
text-align: left;
}
h2 {
font-size: 14px;
margin-bottom: 0;
margin-top: 0;
font-weight: normal;
text-align: left;
}

h4 {
font-size: 13px;
font-weight: normal;
text-align: left;
margin-top: 0;
padding:10px;
}
h5 {
font-size: 10px;
font-weight: normal;
color: #000000;
margin-top: 0;
margin-bottom: 0;
text-align: left;
}
.clear {
clear: both;
}
#aktuelle-angebote {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 150px;
border: #800000 solid 2px;
}
#aktuelle-angebote2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 150px;
border: #800000 solid 2px;
}
.linkbox, .linkbox a {
font-size: 10px;
text-align: left;
padding: 0;
}
.footer, .footer a {
font-size: 10px;
color: black;
text-align: center;
font-weight: normal;
background-color: #ffdfc6;
line-height: 1.7;
}
 
Bei mir funktioniert's in den IE-Versionen 7 + 8 einwandfrei.

Warum IE9 hier dem CSS nicht folgt, ist mir z.Zt. schleierhaft.

Edit: Das könnte vllt. mit diesem nachfolgenden Regelblock zusammenhängen, in dem ein niedriger zIndex-Wert deklariert ist:

index-2013.css hat gesagt.:
CSS: 
#menu ul ul {
	...
	z-index: 2;
	...
}
Zum Vergrößern anklicken....

Nutze bitte die Highlight-Tags zur Code-Formatierung in deinem Beitrag - hier [code=css] [/code]. Vielen Dank! :)
 
Zuletzt bearbeitet:
Probiere ich mal. Aber ich denke, IE 6 + IE 7 ist deklariert


/*--nur für IE-Versionen 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}

IE 8 und IE 9 nicht. Da mach ich mich mal auf die Suche. Danke.
 
lajilla hat gesagt.:
Probiere ich mal. Aber ich denke, IE 6 + IE 7 ist deklariert


/*--nur für IE-Versionen 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}

IE 8 und IE 9 nicht. Da mach ich mich mal auf die Suche. Danke.
Zum Vergrößern anklicken....
Diese Regelblöcke stehen aber nicht in einem Zusammenhang zu deinem geschilderten Problem.
 
Dachte ich aber. Falsch? Inzwischen habe ich mal ein bisschen rumgestöbert und die Seite gerendert. Nützt aber alles nichts. Auch im Kompatibilätsmodus funktioniert es nicht.
 
Wenn ich Position relative einstelle, ist das Menu zwar da, beim aufgehen rutsch aber alles runter.

#menu ul ul {
/* position: relative; Menu wird angezeigt, Video ruscht aber runter */
position: absolute;
z-index: 1;
display: none;
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück