IE7 Navig block problem

[Publisher]

Hallo Zusammen
Linl: Body and more - Home

Wenn man im IE 7 in eine Unternavigation beim Hover klicken will ist der Link irgendwie nicht block. Auf den anderen Browsern IE8, FF, Safari, Chrome geht das. An was könnte das liegen?

<ul id="primary-nav">
<li class="menuactive">
<a href="http://body-and-more.ch.tertia.sui-inter.net/" class="menuactive"><span>Home</span></a>
</li>
<li class="menuparent">
<a href="http://body-and-more.ch.tertia.sui-inter.net/ueber-uns/philosophie.html" class="menuparent"><span>Über uns</span></a>
<ul class="unli">
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/ueber-uns/philosophie.html"><span>Philosophie</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/ueber-uns/team.html"><span>Team</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/ueber-uns/kontakt-mit-oeffnungszeiten-und-formular.html"><span>Kontakt</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/ueber-uns/so-finden-sie-uns-lageplan.html"><span>So finden Sie uns</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/ueber-uns/download.html"><span>Download</span></a>
</li></ul>
</li>
<li class="menuparent">
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot.html" class="menuparent"><span>Unser Angebot</span></a>
<ul class="unli">
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot/bodyforming.html"><span>Bodyforming</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot/face.html"><span>Face</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot/beautyviktoria-blaser.html"><span>BeautyViktoria Blaser</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot/beauty-lenia-fitzpatrick.html"><span>Beauty Lenia Fitzpatrick</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot/Massage-Daniel-Keller.html"><span>Massage Daniel Keller</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/unser-angebot/massage-dominik-keller.html"><span>Massage Frank Schulte</span></a>
</li></ul>
</li>
<li class="menuparent">
<a href="http://body-and-more.ch.tertia.sui-inter.net/cavitation-2-7/cavitation-2-7-2.html" class="menuparent"><span>Cavitation 2.7</span></a>
<ul class="unli">
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/cavitation-2-7/cavitation-2-7-2.html"><span>Cavitation 2.7</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/cavitation-2-7/link-auf-geraetevertrieb.html"><span>Link auf Gerätevertrieb</span></a>
</li></ul>
</li>
<li class="menuparent">
<a href="http://body-and-more.ch.tertia.sui-inter.net/preise/preisliste-inkl-download.html" class="menuparent"><span>Preise</span></a>
<ul class="unli">
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/preise/preisliste-inkl-download.html"><span>Preisliste inkl. Download</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/preise/gutscheine.html"><span>Gutscheine</span></a>
</li></ul>
</li>
<li class="menuparent">
<a href="http://body-and-more.ch.tertia.sui-inter.net/geraetevertrieb/verkauf.html" class="menuparent"><span>Gerätevertrieb</span></a>
<ul class="unli">
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/geraetevertrieb/verkauf.html"><span>Verkauf</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/geraetevertrieb/bhs-135.html"><span>BHS 135</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/geraetevertrieb/bhs-156.html"><span>BHS 156</span></a>
</li>
<li>
<a href="http://body-and-more.ch.tertia.sui-inter.net/geraetevertrieb/bhs-202.html"><span>BHS 202</span></a>
</li></ul>
</li>
</ul>

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen and mark and Nuno */
/* The wrapper determines the width of the menu elements */
#menuwrapper {
/* just smaller than it's containing div */
    width: 95%;
    margin-left: 0px;
/* room at bottom */
    margin-bottom: 10px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
/* remove any default bullets */
    list-style: none;
    margin: 0px;
    padding: 0px;
/* make sure it fills out */
    width: 100%;
/* just a little bump */
    margin-left: 0px;
}
#primary-nav ul {
/* make the ul stay in place so when we hover it lets the drops go over the content below else it will push everything below out of the way */
    position: absolute;
/* just a little bump down for second level ul */
    top: 5px;
/* keeps the left side of this ul on the right side of the one it came out of */
    left: 100%;
/* keeps it hidden till hover event */
    display: none;
}
#primary-nav ul ul {
/* no bump down for third level ul */
    top: 0px;
}
#primary-nav li {
/* negative bottom margin pulls them together, images look like one border between */
    
/* keeps within it's container */
    position: relative;
/* bottom padding pushes "a" up enough to show our image */

border-bottom:1px solid #EF3B3D;
}
#primary-nav li li {
/* you can set your width here, if no width or set auto it will only be as wide as the text in it  */
    width: 220px;
    padding: 0px;
/* removes first level li image */
    background-image: none;
border:none;
border-bottom:grey 1px solid;
}
/* Styling the basic apperance of the menu "a" elements */
ul#primary-nav li a {
/* specific font size, this could be larger or smaller than default font size */
    font-size: 1em;
/* make sure we keep the font normal */
    font-weight: normal;
/* set default link colors */
    color: #595959;
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
    padding: 0.8em 0.5em 0.5em 0em;
/* makes it hold a shape */
    display: block;
/* removes underline from default link setting */
    text-decoration: none;

}
ul#primary-nav a span {
/* makes it hold a shape */
    display: block;
/* pushes text to right */
    padding-left: 10px;
}
ul#primary-nav li a:hover {
/* stops image flicker in some browsers */
    
/* changes text color on hover */
    color: #899092
}
ul#primary-nav li li a:hover {
/* you can set your own image here, second level "a" */
background:#dfe0e0;
/* contrast color to image behind it */
    color: #000;
font-weight:bold;
}
ul#primary-nav li a.menuactive {
/* black and bold to set it off from non active */
    color: #000;
    font-weight: bold;
}
ul#primary-nav li li a.menuactive {
/* contrast color to image behind it, set below */
    color: #black;
/* not bold as text color and image behind it set it off from non active */
    font-weight: bold;
}
ul#primary-nav li ul a {
/* insures alignment */
    text-align: left;
    margin: 0px;
/* relative to it's container */
    position: relative;
/* more padding to left than default */
    padding: 6px 3px 6px 15px;
    font-weight: normal;
/* darker than first level "a" */
    color: #000;
/* removes any borders that may have been set in first level */
    border-top: 0 none;
    border-right: 0 none;
    border-left: 0 none;
/* removes image set in first level "a" */
    background: none;
}
ul#primary-nav li ul {
/* very lite grey color, by now you should know what the rest mean */
    background: #F3F5F5;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: auto;
    height: auto;
    display: none;
    position: absolute;
    z-index: 999;
    border-top: 1px solid #FFFFFF;


    /*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
    opacity: 0.95;
/* CSS 3 */
}
/* Fixes IE7 bug */
#primary-nav li, #primary-nav li.menuparent {
    min-height: 1em;
}
/* Styling the basic apperance of the second level active page elements (shows what page in the menu is being displayed) */
#primary-nav li li.menuactive, #primary-nav li.menuactive.menuparenth li.menuactive {
}
#primary-nav li.menuparent span {
/* padding on left for image */
    padding-left: 10px;
/* down arrow to note it has children, left side of text */

}
#primary-nav li.menuparent:hover li.menuparent span {
/* remove left padding as image is on right side of text */
    padding-left: 0;
/* right arrow to note it has children, right side of text */

}

 

[Bleny]

ul#primary-nav a span {
/* makes it hold a shape */
display: block;
/* pushes text to right */
padding-left: 10px;
}

Zitat von CSS4You CSS 4 You - The Finest in Stylesheets: Workshop: Elemente

Die folgenden Elemente gehören zu den Block-Elementen:
address, blockquote, div, dl, fieldset, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul, center, dir, isindex, menu,

da in der liste weder "span" noch "a" vorkommt wird das deine frage wohl beantworten.
versuchs mal mit einem der gelisteten elemente und dann das ganze einfach per "onclick" anstatt nem "a" tag lösen.

 

[Publisher]

Ich werde sicher kein javascript in meiner navig verwenden.

Die lösung war dem element eine hintergrundfarbe zu geben, in meinem fall weiss. Komisch, aber es funktioniert.

 

[Elroy]

Ich werde sicher kein javascript in meiner navig verwenden.

Brauchst du auch nicht.
Niemand hier hat je irgend etwas von Javascript erwähnt.

Gruss
Elroy

 

[struppi]

da in der liste weder "span" noch "a" vorkommt wird das deine frage wohl beantworten.
versuchs mal mit einem der gelisteten elemente und dann das ganze einfach per "onclick" anstatt nem "a" tag lösen.

In der Liste kommen sowohl A als auch SPAN Elemente vor und diese sind im CSS Code von Publisher als Blockelemente gekennzeichnet, insofern ist deine Antwort falsch.

@Elroy: Ich denke mal mit onclick ist Javascipt gemeint.

@Publisher: Dein Problem kann ich nicht wirklich nachvollziehen, da ich keinen Unterschied erkenne zwischen IE7 und FF

 

[Publisher]

Genau, onklick kann man zwar als Attribut im HTML benutzen aber die Werte sind doch alles JavaScripts. Oder?

Das Problem ist nichtmehr nachvollziehbar da ich es beheben konnte. Eben dem Span (der im IE7 irgendwie nicht Block war) habe ich eine Backgroundfarbe gegeben sodass er er zwingend optisch etwas anzeigen muss, in meinem Fall Weiss, dann funktionierte es.