Navigation: CSSMenu - Vertical --> IE7-Problem

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
tinu
Forum Members
Forum Members
Posts: 20
Joined: Thu Sep 25, 2008 5:57 pm

Navigation: CSSMenu - Vertical --> IE7-Problem

Post by tinu »

Hoi zämä

Wahrscheinlich ist es (wie ja so oft) ganz einfach. Ich habe jedoch jetzt beide Foren durchforstet, viele Tricks und Hinweise angewendet/versucht und schliesslich noch bemerken müssen, dass der Bug selbst bei der Erstinstallation des "Navigation: CSSMenu - Vertical" vorkommt (also CMSMS installiert, template und css ausgewählt und noch nix geändert!) - bevor ich nun den Computer an die Wand schmeiss:

Der IE7 vergrössert bei Mausberührung die Höhe der Links (bei FF, Safari, IE6 = alles okay).

(Irgendwo in einem Posting steht, ob denn niemand dieses Menü braucht - sieht ganz danach aus ...)

Kann mir jemand helfen?

tinu

 
mike-r

Re: Navigation: CSSMenu - Vertical --> IE7-Problem

Post by mike-r »

Kann man sich das mal anschauen?
Alternativ eine kurze Erklärung, wie Du das Menü im Template einbindest, da steh ich hier bei einer Testseite gerade auf dem Schlauch.
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: Navigation: CSSMenu - Vertical --> IE7-Problem

Post by antibart »

Lass den Computer stehen - der kann doch nichts dafür.

Aaaalso:

Es wird sich mit Sicherheit nicht um einen Bug handeln, sondern eher um ein CSS-Problem.

Die mitgelieferten Beispiel-Templates liefern in erster Linie FUnktionalität. Design-CSS-Anpassung ist dann Sache des Codierers.

Die Templates haben ja ihre eigenen CSS, die Du ja mit Sicherheit verknüpft hast.
Dann hast Du ja auch noch Deine eigenen CSS.

In Deinen eigenen CSS hast Du evtl eine globale font-size oder ein Padding für a oder / und auch für a:hover angegeben. Die widerspricht möglicherweise den Default-CSS-Eigenschaften des Menütemplates oder fehlen dort oder sind falsch.

Ich selbst umgehe dieses Problem immer von vorn herein, in dem ich (fast) immer nur meine eigenen CSS benutze.
tinu wrote: (Irgendwo in einem Posting steht, ob denn niemand dieses Menü braucht - sieht ganz danach aus ...)
Bei meinen allerersten zwei CMSms Projekten habe ich dieses Menü auch benutzt. Ich galube mich zu erinnern, dass das Verhalten auch auftauchte, sich aber relativ einfach mit den CSS-Eigenschaften lösen ließ.

Also mit einer eindeutigen Vergabe der Namen der css-Klassen und den dazu gehörigen Eigenschaften für Links und hover.


Schau also als erstes mal nach, ob in den CSS zum Menütemplate die richtigen Eigenschaften für li, padding, a, a:hover vergeben sind und schau dann, ob es in Deiner Haupt-CSS Klassen gibt, die evtl vom IE "vorgezogen" werden.
...

...
Last edited by antibart on Sat Nov 22, 2008 9:29 am, edited 1 time in total.
tinu
Forum Members
Forum Members
Posts: 20
Joined: Thu Sep 25, 2008 5:57 pm

Re: Navigation: CSSMenu - Vertical --> IE7-Problem

Post by tinu »

Hoi antibart und mike-r

Merci für Eure Stats!

1.) Ansehen könnt Ihr Euch das hier http://www.fallstatt.ch/cms/. Ist noch im Aufbau, kommt aber schon :-)

Ich habe eben noch Untermenüs gemacht, damit das Problem deutlicher wird (im IE7).

2.) Es ist ganz klar ein css-Problem. Schriftgrösse? Hmm - ich werd's mir anschauen ...

mike-r: Wenn ich Dich richtig verstanden: Layout » Stylesheets, dann rechts auf das "css" klicken: "css mit Template verbinden"

Unten noch die Sheets:

Und?

gruess
tinu

Code: Select all

/* Start of CMSMS style sheet 'Navigation: CSSMenu - Vertical' */
/* The wrapper determines the width of the menu elements */
#menuwrapper { 
   width: 100%;
margin-left: 10px;
margin-top: 31px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   padding: 0px; 
   width: 90%; 
   margin-left: -1px; height:1em;
}
#primary-nav ul { 
   position: absolute; 
   top: 0; 
   left: 100%; 
   display: none;
}
#primary-nav li { 
   margin-bottom: -3px; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
   border: 1px solid #000; 
   display: block; 
   margin: 0px; 
   padding: 5px 10px; 
   color: #A81C00;
   text-decoration: none; 
   background: transparent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
}
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #fafafa; 
   min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive { 
   background-color: #ededed;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}

/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #ccc; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
   border-left: 1px solid #ff0000; 
   border-top: 1px solid #006699; 
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0.5em;
   background-color: #fff;
   margin: 0;
   width: 100%;
}


/* separator */
#primary-nav li hr.separator {
   display:block;
   height: 0.5em;
   color: #abb0b6;
   background-color: #abb0b6;
   width: 100%;
   border:0;
   margin:0;
   padding:0;   
   border-top: 1px solid #006699;
   border-right: 1px solid #006699;
}



/* End of 'Navigation: CSSMenu - Vertical' */

Last edited by tinu on Sat Nov 22, 2008 9:38 am, edited 1 time in total.
Post Reply

Return to “Layout und Design”