IE6 & 7: bg-color not showing in nav (FF ok)
Enthusiast
Location: Boston, MA
Posted: Mon, 2008-05-12 12:49
I've been working on figuring this out for a day now, and hope better minds than mine will see where the problem lies.
Background-color for navigation is not showing in the IEs (Win). FFMac fine, FFWin fine.
Screenshot here: http://www.horseink.com/workroom/eehh308/IE6eevav.png
Live page is here: http://www.horseink.com/workroom/eehh308/acupuncture.html
Relevant CSS:
/* Container for the Menu */
#p7swapmenu {
background-color: #363;
padding-top: 0px;
margin: 0 auto;
/*position: relative;
top: 84px;
left: 24px;*/
width: 180px;
}
/* Turns off Margin, Padding, and Bullets for the Menu List */
#p7swapmenu ul {
padding: 0px;
position: relative;
}
#p7swapmenu li {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline;
}
/* Rules deleted from here because using the WriteStyles Command */ /*--opened to see if kept menu open--*/
.closed ul{display:none;}
.open ul{display:block;}
/* Link Styles for the Menu */
.closed a, .open a {
background-repeat: no-repeat;
background-position: 3px 50%;
background-color: /*#99A189;*/ #A8A8A8;
border: 1px solid;
border-color: #C9D0AD #848C71 #848C71 #C9D0AD;
color: #EEF0E3;
display: block;
font-size: 0.9em;
line-height: 1.4em;
padding: 4px 0px 4px 16px;
text-decoration: none;
}
.single a { /* menu items that don't have any submenu items */
background-color: /*#99A189;*/ #A8A8A8;
border: 1px solid;
border-color: #C9D0AD #848C71 #848C71 #C9D0AD;
color: #EEF0E3;
display: block;
font-size: 0.9em;
line-height: 1.4em;
padding: 4px 0px 4px 16px;
text-decoration: none;
}
/* Hover and Active styles for the menu */
.closed a:hover, .open a:hover, .closed a:active, .open a:active {
background-color: #fff;
color: #000;
}
.single a:hover, .single a:active {
background-color: #fff;
color: #000;
}
/* Plus Sign for Trigger Links in Closed State */
.closed a {background-image: url(i/menplus.gif);}
/* Minus Sign for Trigger Links in Open State */
.open a {background-image: url(i/menminus.gif);}
/* Link Styles for the Submenus */
.closed ul a, .open ul a, .open ul a:hover {
background-color: transparent;
background-image: url(i/pagemarker.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0;
color:#fff;
font-size: 0.9em;
line-height: 1.4em;
font-weight:normal;
padding: 3px 0 3px 12px;
margin: 0 0 0 16px;
}
.open ul a:hover {
background-color: #3E7E40;
}
/* Optional ID to assign the <a> to highlight a "Current Page" link */
#p7current {font-weight: bold;}Relevant html is here:
<div id="p7swapmenu">
<ul>
<li class="single"><a href="../index.html">Our Mission</a></li>
<li class="single"><a href="../drheatherhoyns.html">About Dr. Hoyns</a></li>
<li class="@@(_document['classwellness'])@@" id="p3"><a href="../wellnesscare.html" onClick="P7_swapClass(1,'p3','open','closed','li')">Wellness Care</a>
<ul>
<li><a href="../nutritionconsults.html">Nutrition Consults </a></li>
<li><a href="../physicalexams.html">Physical Exams</a></li>
<li><a href="../seniorhorsecare.html">Senior Horse Care</a></li>
<li><a href="../vaccinations.html">Vaccinations </a></li>
</ul>
</li>
<li class="@@(_document['classservices'])@@" id="p1"><a href="#" onClick="P7_swapClass(1,'p1','open','closed','li')">Our Services</a>
<ul>
<li><a href="../acupuncture.html">Acupuncture</a></li>
<li><a href="../chiropractic.html">Chiropractic</a></li>
<li><a href="../diagnostics.html">Diagnostics</a></li>
<li><a href="../equinedentistry.html">Dentistry</a></li>
<li><a href="../lamenessexams.html">Lameness Exams</a></li>
<li><a href="../prepurchaseexams.html">Pre-purchase Exams</a></li>
<li><a href="../reproductiveservices.html">Reproductive Svcs.</a></li>
</ul>
</li>
<li class="@@(_document['classparasites'])@@" id="p2"><a href="#" onClick="P7_swapClass(1,'p2','open','closed','li')">Parasite Control</a>
<ul>
<li><a href="../deworming.html">Deworming</a></li>
<li><a href="../externalparasites.html">External Parasites </a></li>
<li><a href="../fecalexams.html">Fecal Exams </a></li>
<li><a href="../internalparasites.html">Internal Parasites </a></li>
</ul>
</li>
<li class="single"><a href="../informationforms.html">Information Forms</a></li>
<li class="single"><a href="../ourclinic.html">The Clinic</a></li>
<li class="single" ><a href="../seasonalinfo.html">Seasonal Info</a></li>
<li class="single" ><a href="../questionsanswers.html">Q & A</a></li>
<li class="single" ><a href="../links.html">Links</a></li>
<li class="single" ><a href="../emergencyhorsecare.html">Emergencies</a></li>
<li class="single" ><a href="../contactus.html">Contact Us</a></li>
</ul>
</div> -------------------------
I see in reviewing the P7 notes when I put this together:
"/* Since the Logo and Navigation bar are in absolutely positioned DIVs (Layers), we can set
the body's top and left margins to clear them both so that the main content is properly placed.*/
and then my note:
/*I removed positioning, since nothing here is absolutely positioned.*/
Does absolute positioning affect background-color display in some way??
Any help with this would be hugely appreciated! I'm reaching Emergency status...
Moderator
Posts: 5672
Joined: 2005-02-22
I can't say what the exact
Posted: Mon, 2008-05-12 13:16
I can't say what the exact problem is.
Using IE7 explorer toolbar to inspect the different elements and comparing the styles with those Firebug shows in Firefox ... shows that IE7 is not picking up the background-color property on any of the A elements in the menu. I'd try removing all the comments from inside the background-color style properties.
On Having Layout | The One True Layout | menus by listamatic
Enthusiast
Posts: 163
Joined: 2005-01-31
Location: Boston, MA
Brilliant...but not yet
Posted: Mon, 2008-05-12 13:51
Brilliant...but not yet perfect
I removed the commented out colors, and that fixed it for IE7, but not IE6. I found a display-inline for #swapmenu li (left over from earlier feeble attempts) and removed - which fixed IE6 (woohoo).
Unfortunately, all is not yet well in the kingdom: they are both now displaying a left-side "shrinkage", which looks larger than the usual 3px bit.
Still working, but if you have any thoughts on that issue, would be glad of them. Thanks very much for the comments wisdom, in any case!
Moderator
Posts: 5672
Joined: 2005-02-22
list-style-position:outside
Posted: Mon, 2008-05-12 14:08
list-style-position:outside (changed from inside) on the outer UL. You might also need to trigger hasLayout on UL and LI elements.
On Having Layout | The One True Layout | menus by listamatic
Enthusiast
Posts: 163
Joined: 2005-01-31
Location: Boston, MA
IE6 joins the group! Added
Posted: Mon, 2008-05-12 14:11
IE6 joins the group! Added position:relative to #swapmenu, and background-color now displays in IE6.
I should stop there, I know. But...
Is margin: 0 auto; causing this reluctance in both to be as wide as they should be (shd be same width as box below)?
Also (and maybe more important in terms of getting this site posted), IE7 is acting as if it has no bottom-padding (the li's, that is), whereas IE6 is the angel in this case. Is there an easy fix for 7 in this case?
Plodding onward...
Enthusiast
Posts: 163
Joined: 2005-01-31
Location: Boston, MA
Sorry - I'm rushing
Posted: Mon, 2008-05-12 14:17
Sorry - I'm rushing things...
Sorry to be dim, but the only list-style I can find is
#p7swapmenu li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
Do you mean I should add list-style-position to
#p7swapmenu ul {
?
And what is best way to declare HasLayout on the UL and LIs?
Thanks very much.
Moderator
Posts: 5672
Joined: 2005-02-22
wendy wrote:Do you mean I
Posted: Mon, 2008-05-12 14:34
Yes, that'll do. Note that'll catch any nested ULs too. You may or may not need to switch those back to inside.
I'm not paying any particular attention to your style rules. I'm telling you the elements that need fixed. You should be able to figure out how to apply a specific style to a specific element
For hasLayout, width:100% should do it.
On Having Layout | The One True Layout | menus by listamatic
Enthusiast
Posts: 163
Joined: 2005-01-31
Location: Boston, MA
List-style-position:outside
Posted: Mon, 2008-05-12 15:12
List-style-position:outside = success: now showing full-width. Thank you for that, which should certainly have occurred to me.
For reference, I have already tried width:100% on the ul and the li, and it was a disaster. I suspect that the unique way this is put together (which, by the way, has made it difficult to know where to apply styles / to which elements
) makes things a bit more arcane than the usual vert. nav. But who knows.
I've still got a problem with IE7 text sitting on bottom of "button" (padding-bottom collapsing? line-height?) but will keep at it.
I appreciate your help and patience.
Moderator
Posts: 5672
Joined: 2005-02-22
Hmmm, are you sure about
Posted: Mon, 2008-05-12 16:05
Hmmm, are you sure about width:100%? I did check UL and LI at both levels in Firebug. There didn't appear to be any margins or padding on any of them, which means width:100% should be the same as width:auto.
No matter, if you can't use width:100%, use zoom:1. But just maybe it isn't the width:100% that messes things up, but triggering hasLayout. Personally, I'm not a big fan of P7 stuff. Styling an expanding vertical menu isn't that difficult.
- style the menu with everything visible.
- put display none on all submenus and check styling still holds. If not, fix and repeat.
- add javascript to toggle display:none, display:block.
On Having Layout | The One True Layout | menus by listamatic
Enthusiast
Posts: 163
Joined: 2005-01-31
Location: Boston, MA
Now it's the javascript I'm
Posted: Mon, 2008-05-12 17:18
Now it's the javascript I'm having trouble with...I moved this to its own domain (same server, different folder, no other changes) and the second and third super-links aren't working properly. Aargh!
Do you know of a toggle script that is simpler and more reliable than this one?