Navigationsproblem im IE7

StelaM · 1. Oktober 2010

Hallo zusammen,

ich bin neu hier, habe aber schon desöfteren hier rumgestöbert und konnte auch das ein oder andere Problem erfolgreich lösen.

Auch für mein Problem habe ich ähnliche Threads gefunden, die mir aber nicht 100%ig helfen konnten.

Daher versuche ich es jetzt mal so:

Ich bastel mir gerade eine Wordpress-Homepage zusammen, die auch im Gerüst fertig ist und über Mozilla, Opera, Safari und IE8 funktioniert. Nur der IE7 (auch der 6er, was mich aber nicht weiter stört

) stört sich offensichtlich am Dropdownmenü.
Zum einen ist die Navigation nicht zentriert und geht über den Begrenzungsrahmen hinaus und zum anderen geht das Menü nicht nach unten, sondern nach rechts und dann nach unten auf, so dass man nichts anwählen kann, da, wenn man mit der Maus zum Menüpunkt gehen will schon wieder alles eingeklappt ist. Ich hab mal 2 Screenshots beigefügt:

so wäre es korrekt:

das mach ie7:

Die Internetadresse lautet:
http://www.stelamedien.de

Hier die Style.css:

Code:

/*  
Theme Name: Jillij
Theme URI: http://jillij.free.fr/
Description: Theme developped for my <a href="http://jillij.free.fr/">website</a>.
Version: -kc-
Author: Jillij & killercup
Author URI: http://jillij.free.fr/


/* D?but typographies et couleurs */
body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #d5d6d7;
    color: #333;
    text-align: center;
    }

#page {
    background-color: white;
    border: 1px solid #959596;
    text-align: center;
    }

#header {
    background-color: #73a0c5;
    }

#content {
    font-size: 1.2em
    }

.widecolumn .entry p {
    font-size: 1.05em;
    }

.narrowcolumn .entry, .widecolumn .entry {
    line-height: 1.4em;
    }

.widecolumn {
    line-height: 1.6em;
    }
    
.narrowcolumn .postmetadata {
    text-align: center;
    }

.alt {
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }

#footer {
    background-color: #eeeeee;
    padding-bottom: 5px;
    }
    
.titrePage /* Page titles */
{
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  font-weight:600;
  font-size:20px;
  border: 0px solid #000000;
  display:block;
  padding: 0 0 0px 20px;
  padding-top: 5px;
}


small {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;
    }

h1, h2, h3 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
    }

h1 {
    font-size: 4em;
    text-align: center;
    }

.description {
    font-size: 1.2em;
    text-align: center;
    }

h2 {
    font-size: 1.6em;
    }

h2.pagetitle {
    font-size: 1.6em;
    }

h3 {
    font-size: 1.3em;
    }

h1, h1 a, h1 a:hover, h1 a:visited, .description {
    text-decoration: none;
    color: white;
    }

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #333;
    }

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, .titrePage, .titrePage a, .titrePage a:hover, .titrePage a:visited, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    }
    


.entry p a:visited {
    color: #b85b5a;
    }

.commentlist li, #commentform input, #commentform textarea {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }
    
.commentlist li {
    font-weight: bold;
    }

.commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }

.commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
    }

#commentform p {
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

.commentmetadata {
    font-weight: normal;
    }

code {
    font: 1.1em 'Courier New', Courier, Fixed;
    }

acronym, abbr, span.caps
{
    font-size: 0.9em;
    letter-spacing: .07em;
    }

a, h2 a:hover, h3 a:hover{
    color: #06c;
    text-decoration: none;
    }

.titrePage a:hover{
    color: #333;
    text-decoration: none;
    }

a:hover {
    color: #147;
    text-decoration: underline;
    }

#wp-calendar a {
    text-decoration: none;
    }

#wp-calendar caption {
    font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: center;
    }

#wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }
/* Fin typographie et couleurs */

/* D?but Structure */
body {
    margin: 0;
    padding: 0; 
    }

#page {
    background-color: white;
    margin: 10px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }
    
#header {
    padding: 0;
    margin: 0 auto;
    height: 200px;
    width: 100%;
    background-color: #73a0c5;
    }

#headerimg {
    margin: 0;
    height: 200px;
    width: 100%;
    }

.narrowcolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 105px;
    width: 550px;
    }

.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 105px;
    width: 550px;
    }
    
.post {
    margin: 0 0 20px;
    text-align: justify;
    }

.widecolumn .post {
    margin: 0;
    }

.narrowcolumn .postmetadata {
    padding-top: 5px;
    }

.widecolumn .postmetadata {
    margin: 30px 0;
    }
    
#footer {
    padding: 0;
    margin: 0 auto;
    width: 760px;
    clear: both;
    padding-bottom: 5px;
    }

#footer p {
    margin: 0;
    padding: 0;
    text-align: center;
    padding-bottom: 5px;
    }
    
/* Fin Structure */



/*    D?but Ent?tes */
h1 {
    padding-top: 70px;
    margin: 0;
    }

.description {
    text-align: center;
    }

h2 {
    margin: 30px 0 0;
    }

h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}

#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }

h3 {
    padding: 0;
    margin: 30px 0 0;
    }

h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* End Ent?tes */


/* Rolling Menu Styles */

#meniu {
    color: #FFFFFF;
    display: block;
    margin: 0px 0px 0px 0px;
    text-align: center;
    top: 220px;
    width: 720px;
    height: auto;
}

.sidetable
{
    width:720px;
    background: #000000;
    border: 0px;
    margin: 0px 0px 0px 20px;
        height: auto;
}

/* for "Hello login" */
#ConnectStatus {
    background-color: #4B1408;
    width: 200px;
    font-weight: bold;
    padding-left: 16px;
    padding-right: 16px;
}

#sidemenu {
    display: block;
}

#sidemenu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
}

#sidemenu li {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    position: relative;
}

#sidemenu a {
    display: block;
    height: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 16px;
    padding-right: 16px;
    color: #ffffff;
    text-decoration:none;
}

#sidemenu a:hover {
    weight:bold;
}

#sidemenu h2 {
    padding-left: 30px;
    color: #FFFFFF;
    font-size: 1.2em;
    weight:bold;
}

#sidemenu ul li ul a {
    width: 100px;
}

#sidemenu ul li ul a:hover {
    weight:bold;
}


#sidemenu li li {
    width: 100%;
    float: none;
}

#sidemenu li li ul {
    top: 0px;
    left: 0;
}

#sidemenu li li:hover ul {
    left: 100%;
    weight:bold;
}

/* initialy hide all sub sidemenus */
#sidemenu li ul {
    display: none;
    position: absolute;
    z-index: 10;
}

/* display them on hover */
#sidemenu li:hover>ul {
    display: block;
}

/* this is needed if you want to style #sidemenu div - force containment of floated LIs inside of main UL */
#sidemenuList:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}

#sidemenuList {
    display: inline-block;
}

#sidemenu ul li .monthsMenu a{
    width: auto;
    height: auto;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

/* define the consecutive colors */
#sidemenu ul li a{
    background: #411208;
}

#sidemenu ul li a:hover {
    /* background: #4B1408; */
    /* background: #000000; */
    background: #000000;
    weight:bold;
}

#sidemenu ul li ul li a{
    background: #4B1408;
    /* background: #000000; */
    filter:alpha(opacity=95); /* for IE */
            -moz-opacity:0.95; /* for mozilla */
            opacity: 0.95; /* for safari */
            khtml-opacity: 1 /* for konquerer and older safari */

}

#sidemenu ul li ul li a:hover {
    background: #CD5D39;
    weight:bold;
}

.searchtable
{
    background: #4B1408;
    filter:alpha(opacity=95); /* for IE */
            -moz-opacity:0.95; /* for mozilla */
            opacity: 0.95; /* for safari */
        khtml-opacity: 0.95 /* for konquerer and older safari */
}

#wp-calendar #next a {
    background: none;
    }

#wp-calendar #prev a {
    background: none;
    }
    
#sidemenu ul li ul ul li a{
    background: #CD5D39;
}

#sidemenu ul li ul ul li a:hover {
    background: #B52113;
    weight:bold;
}

.searchtable
{
    border: 0px;
    margin: 0px;
}

/* D?but Images */
p img {
    padding: 3;
    margin: 3px;
    max-width: 100%;
    }

/*    L'utilisation de 'class="alignright"' sur une image aligne l'image ? droite (qui aurait pu penser ?a ?!)
    Et 'class="centered' centrera bien entendu l'image. Ceci est pr?f?rable ? l'utilisation de 
    align="center", ?tant plus ?volutif (et valide) */
    
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

img {
    /* margin-right: 1px;
    padding-right: 1px; */
    margin-left: 1px;
    padding-left: 1px;
    }

.alignright {
    float: right;
    }
    
.alignleft {
    float: left
    }
/* Fin Images */



/* D?but listes

    Puces stylis?es, incompatible IE
    Ne fonctionne pas sous Internet Explorer qui affichera des puces standard par d?faut. */

html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    } 

html>body .entry li {
    margin: 7px 0 8px 10px;
    }

.entry ul li:before {
    content: "\00BB \0020";
    }

.entry ol {
    padding: 0 0 0 25px;
    margin: 0;
    }

.entry ol li {
    margin: 0;
    padding: 0;
    }

.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }
    
/* Fin listes */



/* D?but ?l?ments de formulaires */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    text-align: center;
    }
#searchform #s {
    width: 115px;
    padding: 2px;
    }
    
#searchsubmit {
    padding: 1px;
    }
    
.entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }

select {
    width: 130px;
    }

#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }

#commentform textarea {
    width: 100%;
    padding: 2px;
    }

#commentform #submit {
    margin: 0;
    float: right;
    }
/* Fin El?ments de formulaires */



/* D?but commentaires*/
.alt {
    margin: 0;
    padding: 10px;
    }

.commentlist {
    padding: 0;
    text-align: justify;
    }

.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
    }

.commentlist p {
    margin: 10px 5px 10px 0;
    }

#commentform p {
    margin: 5px 0;
    }

.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }

.commentmetadata {
    margin: 0;
    display: block;
    }
/* Fin commentaires */


/* D?but calendrier */
#wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }

#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

#wp-calendar a {
    display: block;
    }

#wp-calendar caption {
    text-align: center;
    width: 100%;
    }

#wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }

/* Fin calendrier */



/* D?but diff?rentes balises et classes */
acronym, abbr, span.caps {
    cursor: help;
    }

acronym, abbr {
    border-bottom: 1px dashed #999;
    }

blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 3px solid #ddd;
    background: #EEEEEE;
    }

blockquote cite {
    margin: 5px 0 0;
    display: block;
    }

.center {
    text-align: center;
    }



a img {
    border: none;
    margin: 3px;
    }

.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }
/* Fin diff?rentes balises et classes */

/* BEGIN QLC MOD */
.qlc
{
  text-align:right;
  padding : 4px;
}

.qlcLink
{
  border: 1px solid #000000;
} 
/* END QLC MOD */


/* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
    It won't be a stylish marriage, I can't afford a carriage.
    But you'll look sweet upon the seat of a bicycle built for two." */

Ich wäre für jede Hilfe SEHR dankbar. Falls ihr noch mehr Infos oder Codes etc. braucht, sagt bitte bescheid. Ich bin was Programmiersprachen angeht als Anfänger zu bestrachten. Das nur noch zur Info

Schon mal Danke für jede Hilfe******!

Gruß

SpiceLab · 1. Oktober 2010

Erweiter hier mal den Regelblock mit left:0, damit das erste Submenü linksbündig unter dem Menüpunkt "Bilder" ausgerichtet wird.

CSS:

/* display them on hover */

#sidemenu li:hover>ul {

	display: block;

}

StelaM · 2. Oktober 2010

Erst mal vielen Dank für die Antwort!

Hab die Erweiterung eingebaut. Das Menü geht jetzt auch nach unten auf, allerdings nicht mit dem ersten Submenüpunkt, sondern mit dem zweiten. Der erste Submenüpunkt "verdeckt" den Hauptmenüpunkt, der dann nicht mehr anwählbar ist.

Wie bekomme ich das hin?

Und hat noch jemand eine Idee, wie ich das Menü (im IE7) zentriert bekomme und es nicht über den Begrenzungsrahmen hinausgeht (s.o.)?

THX!

SpiceLab · 2. Oktober 2010

Wenn der erste Verweis im Submenü den Hauptmenüpunkt überdeckt, steht dir doch mit der top-Eigenschaft das geeignete Werkzeug zur Verfügung, um dem Untermenü die entsprechende Startposition von oben einzurichten (gefühlte 25px)

Eine horizontale Zentrierung des Menüs in seinem Anzeigebereich lässt sich mit display:inline für #sidemenuList realisieren.

Hierfür wäre ein alternatives CSS für den IE7 vonnöten, damit die bestehende Formatierung display:inline-block für die übrigen Browser erhalten bleibt.

Und zu guter letzt ein Tipp gegen den Überstand am rechten Seitenrand: Wenn du deinen festgelegten linken Außenabstand für die Klasse .sidetable aufhebst, hält sich IE7 gleichermaßen an diese Vorgabe, und verrückt den DIV-Block nicht länger nach rechts.

StelaM · 5. Oktober 2010

spicelab hat gesagt.:
Wenn der erste Verweis im Submenü den Hauptmenüpunkt überdeckt, steht dir doch mit der top-Eigenschaft das geeignete Werkzeug zur Verfügung, um dem Untermenü die entsprechende Startposition von oben einzurichten (gefühlte 25px)

Eine horizontale Zentrierung des Menüs in seinem Anzeigebereich lässt sich mit display:inline für #sidemenuList realisieren.

Hierfür wäre ein alternatives CSS für den IE7 vonnöten, damit die bestehende Formatierung display:inline-block für die übrigen Browser erhalten bleibt.

Und zu guter letzt ein Tipp gegen den Überstand am rechten Seitenrand: Wenn du deinen festgelegten linken Außenabstand für die Klasse .sidetable aufhebst, hält sich IE7 gleichermaßen an diese Vorgabe, und verrückt den DIV-Block nicht länger nach rechts.

Das mit dem Top-Werkzeug hat super funktioniert. 25px war absolut korrekt. DANKE!

Ein IE-CSS gibt es bereits, in dem display:inline eingetragen ist. Leider ist keine Zentrierung des Menüs eingetreten.

Hier mal das IE-CSS:

Code:

.sidetable
{ margin: -20px 0px 0px 0px; }

/* Fix IE6's inability to expand clickable area */
#sidemenu li:hover a {
    position: relative;
}

#sidemenu li {
    position: static;
    width: 1%;
}

#sidemenu li:hover {
    position: relative;
    z-index: 10000;
}

#sidemenu li li {
    float: left;
}

#sidemenuList {
    display: inline;
        height: 1%;
}

#meniu {
    padding-left: 0px;
}
/* Fix IE7's inability to expand clickable area */
#sidemenu li:hover a {
    position: relative;
}

#sidemenu li {
    position: static;
    width: 1%;
}

#sidemenu li:hover {
    position: relative;
    z-index: 10000;
}

#sidemenu li li {
    float: left;
}

#sidemenuList {
    display: inline;
        height: 1%;
}

#meniu {
    padding-left: 0px;
}

/* IE can't handle display, so fail-over to visibility */
#sidemenu ul li ul {
    display: block;
    visibility: hidden;
}

/* simulate child selector for IE */
div#sidemenu li:hover ul,
#sidemenu li:hover li:hover ul,
#sidemenu li:hover li:hover li:hover ul,
#sidemenu li:hover li:hover li:hover li hover ul {
    visibility: visible;
    z-index: 10000;
}

div#sidemenu li:hover li ul,
#sidemenu li:hover li:hover li ul,
#sidemenu li:hover li:hover li:hover li ul,
#sidemenu li:hover li:hover li:hover li hover li ul {
    visibility: hidden;
}

Kann man da noch was machen? Ansonsten würde ich auch damit leben können, wenn das Menü im IE7 linksbündig bleibt.

Vielen Dank!

SpiceLab · 5. Oktober 2010

StelaM hat gesagt.:
Ein IE-CSS gibt es bereits, in dem display:inline eingetragen ist. Leider ist keine Zentrierung des Menüs eingetreten.

Das Stylesheet gilt aber nur für die IE-Versionen kleiner oder gleich "6" (= lte = less-than or equal).

Ändere demnach diese Zeile:

HTML:

<!--[if lte IE 6]>

in diese um:

HTML:

<!--[if lte IE 7]>

Oder leg ein weiteres, gesondertes Stylesheet für IE7 an, falls die übrigen enthaltenen Formatierungen nicht für ihn gelten müssen / sollen.

Der Conditional Comment lautet für diese Version dann so:

HTML:

<!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="..." /> 
<![endif]-->

StelaM · 5. Oktober 2010

Spicelab, ICH DANKE DIR!! Jetzt scheint allen zu funktionieren. Super Hilfe von Dir! Auch für Laien wie mich sehr verständlich erklärt

SpiceLab · 5. Oktober 2010

Freut mich, und dein(e) Klick(s) auf den Danke-Button unterhalb meine(s/r) Beitrags/Beiträge ebenso

StelaM · 5. Oktober 2010

Den habe ich vorher noch gar nicht bemerkt

. Habs jetzt aber nachgeholt und auch so gemeint!

Navigationsproblem im IE7

StelaM

Grünschnabel

SpiceLab

ZENmechanic

StelaM

Grünschnabel

SpiceLab

ZENmechanic

StelaM

Grünschnabel

SpiceLab

ZENmechanic

StelaM

Grünschnabel

SpiceLab

ZENmechanic

StelaM

Grünschnabel

Neue Beiträge