Nice Menus in IE 6 or lower
kathryn531 - December 12, 2007 - 17:44
| Project: | Nice Menus |
| Version: | 5.x-1.0 |
| Component: | Browser Compat |
| Category: | support request |
| Priority: | normal |
| Assigned: | kathryn531 |
| Status: | closed |
Description
I cannot get the Nice Menus on my intranet site to work in IE browsers below 7.0. The menus work great in FF, Safari, and IE7, but in IE6 they appear in the wrong places, and are not clickable. Little outlines of where the drop-downs should be appear, and in general, it's just a mess.
Any help would be greatly appreciated!!
Thanks!
Kathryn Cornelius
Rackspace Managed Hosting
direct: 210.312.5533
#1
Hm, that is weird and I've never seen anything like that happen. The only thing I can think is that maybe javascript is disabled or something? IE7 will still mostly work without the JS (it just gets weird "ghosting"), but IE6 will simply be broken without it.
#2
I don't think JS is disabled... I've built a internal portal for my company... and every user running IE6 cannot access the drop-downs. IE7 sometimes does get the "ghosting" - but that's not really an issue. My concern is only with IE6 and how I can make the menus work in that specific environment.
#3
Unfortunately I really don't have much to offer in the way of help because I have never encountered this behavior before and I can't reproduce the issue on any of my sites. Is this a custom theme? If you are using a custom theme, does the problem clear up if you switch to a core theme like Garland or Bluemarine?
#4
If there is an area in Drupal that I excel at, it's Nice Menus... so if you have any other questions just ask.
I do not have a whole lot of time for this response but I will lay the groundwork for you. Here is a CSS snippet from an INCOMPLETE theme I made a little while ago. Make sure you look under the "footer navigation" section and then read what I write below it:
/*----------------------------------------------------------------------
------------------ NAVIGATION -------------------------------------------------------------------------
-------------------------------------------------------*/
/****************************************
Nice Menu [global to all Nice Menus]
****************************************/
ul.nice-menu, ul.nice-menu ul {
border: 0;
padding: 0;
margin: 0;
list-style: none;
}
ul.nice-menu li {
border: 0;
float: left;
}
/****************************************
primary navigation [specific]
****************************************/
#block-nice_menus-1 {
float: right;
height: 30px;
padding: 0;
margin: 0;
line-height: 30px;
}
#block-nice_menus-1 .blockinner h2.title { /* kill <h2 class="title"> because this menu doesn't need a title */
display: none;
}
#nice-menu-1 {
width: 778px;
float: left;
}
#nice-menu-1 a {
font-weight: normal;
}
#nice-menu-1 li { /* parent - list */
list-style: none;
margin: 0 0 0 0;
background: #ff0000 url(images/tab_up.png) no-repeat right center;
}
#nice-menu-1 li a {
color:#000000;
display: block;
font-size: 100%;
line-height: 30px;
height: 30px;
text-decoration: none;
padding: 0 25px 0 30px;
}
#nice-menu-1 li:hover, #nice-menu-1 li a:hover {
color: #ffffff;
text-decoration: none;
background: url(images/tab_over.png) no-repeat right center;
}
#nice-menu-1 li ul { /* child - unordered list*/
list-style: none;
top: 30px;
left: -2px;
}
#nice-menu-1 li ul li { /* child - list */
font-size: 10px;
clear: both;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
height: 20px;
width: 200px;
}
#nice-menu-1 li ul li a {
color: #eeeeee;
line-height: 20px;
text-decoration: none;
padding: 0 0 0 24px;
}
#nice-menu-1 li ul li:hover {
text-decoration: none;
background: #000000;
}
#nice-menu-1 li ul li ul { /* baby - unordered list */
left: 12.5em;
top: -1px;
}
#nice-menu-1 li ul li ul li { /* baby - list */
}
#nice-menu-1 .menuparent a { /* if a link has a submenu */
}
#nice-menu-1 li.menuparent { /* format list of link that has a submenu */
}
/****************************************
secondary navigation [specific]
****************************************/
#secondary-nav {
position: relative;
float: left;
width: 778px;
height: 30px;
position: relative;
margin: -30px 0 0 -15px;
padding: 0 0 25px 0;
z-index: 1;
}
#block-nice_menus-2 {
float: none;
width: 778px;
height: 30px;
padding: 0;
margin: 0;
line-height: inherit;
}
#block-nice_menus-2 .blockinner h2.title { /* kill <h2 class="title"> because this menu doesn't need a title */
display: none;
}
#nice-menu-2 {
width: 778px;
float: left;
}
#nice-menu-2 a {
font-weight: normal;
}
#nice-menu-2 li { /* parent - list */
list-style: none;
margin: 0 0 0 0;
background: #ff0000 url(images/tab_up.png) no-repeat right center;
}
#nice-menu-2 li a {
color:#000000;
display: block;
font-size: 100%;
line-height: 30px;
height: 30px;
text-decoration: none;
padding: 0 25px 0 30px;
}
#nice-menu-2 li:hover, #nice-menu-2 li a:hover {
color: #ffffff;
text-decoration: none;
background: url(images/tab_over.png) no-repeat right center;
}
#nice-menu-2 li ul { /* child - unordered list*/
list-style: none;
top: 30px;
left: -2px;
}
#nice-menu-2 li ul li { /* child - list */
font-size: 10px;
clear: both;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
height: 20px;
width: 200px;
}
#nice-menu-2 li ul li a {
color: #eeeeee;
line-height: 20px;
text-decoration: none;
padding: 0 0 0 24px;
}
#nice-menu-2 li ul li:hover {
text-decoration: none;
background: #000000;
}
#nice-menu-2 li ul li ul { /* baby - unordered list */
left: 12.5em;
top: -1px;
}
#nice-menu-2 li ul li ul li { /* baby - list */
}
#nice-menu-2 .menuparent a { /* if a link has a submenu */
}
#nice-menu-2 li.menuparent { /* format list of link that has a submenu */
}
/****************************************
footer navigation menu [specific]
****************************************/
#block-nice_menus-3 {
width: 661px;
position: relative;
float: left;
text-align: center;
line-height: inherit;
padding: 32px 0 0 0;
}
#block-nice_menus-3 .blockinner {
}
#block-nice_menus-3 .blockinner h2.title { /* kill <h2 class="title"> because this menu doesn't need a title */
display: none;
}
#block-nice_menus-3[id] .content {
display:inline-block;
}
#nice-menu-3 {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
}
#nice-menu-3 a {
width: auto;
display: block;
text-decoration: none;
}
#nice-menu-3 a[id] {
float:left;
}
#nice-menu-3 li { /* parent - list */
background: #000000;
display:table-cell;
}
#nice-menu-3 li[id] {
float:left;
}
#nice-menu-3 li a {
color:#ffffff;
display: block;
text-decoration: none;
padding: 0 20px 0 20px;
}
#nice-menu-3 li:hover, #nice-menu-2 li a:hover {
color: #ffffff;
text-decoration: none;
}
#nice-menu-3 li ul { /* child - unordered list*/
list-style: none;
top: 30px;
left: -2px;
}
#nice-menu-3 li ul li { /* child - list */
font-size: 10px;
clear: both;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
width: 200px;
}
#nice-menu-3 li ul li a {
color: #eeeeee;
text-decoration: none;
padding: 0;
}
#nice-menu-3 li ul li:hover {
text-decoration: none;
background: #000000;
}
#nice-menu-3 li ul li ul { /* baby - unordered list */
left: 12.5em;
top: -1px;
}
#nice-menu-3 li ul li ul li { /* baby - list */
}
#nice-menu-3 .menuparent a { /* if a link has a submenu */
}
#nice-menu-3 li.menuparent { /* format list of link that has a submenu */
}
OK
Remember that that code is incomplete and it should merely serve as an example...
What I wanted to show you was the difference between #nice-menu-3 li[id] and #nice-menu-3 li
The added [id] (or [class] in other circumstances) is ONLY read by IE explorer. Therefore, you can them your site for Safari, Mozilla, Opera and IE precisely the same by adding additional necessary styles to IE via [id] or [class].
I hope I made sense. I will respond shortly with a link to a good reference.
#5
bah.... sorry I've lost the link..... just google it.....
I hope I've helped.
#6
This is starting to make sense - I think I might be able to resolve my problems with this technique. A few questions though before I proceed. How do I know a) whether to add [id] or [class] to my css fields and b) Do I need to add the to my style.css page or the actual nice menu module??
Thanks so much!!
#7
I was able to get a screenshot of what's going on in IE6 browsers. The following is an example of what happens when you click on the Tools link. The following four drop-downs should appear directly below "Tools" (and do in IE7, Safari, Opera, and FF)... IE6 users are also unable to click on the links. Every top navigation link you hover over produces a similar effect. It shifts to the right, creates a strange gray outline, and disappears when you try to click on them.
I'm trying this [id] and [class] code, but nothing seems to be improving yet. Hopefully this will provide a little more insight.
Thanks again.
#8
Sorry, the first attachment was too large - so I cropped it and have attached below:
#9
Eww, that is definitely funky. Hmmm, well I would say that there is probably something odd in the CSS then that is pushing the children over and in that process actually pushing them out of the proper place to click them. Hmmm.
Normally I can troubleshoot these kinds of custom theme things by going to a live site and looking at/changing the CSS in action. Obviously that won't work with an intranet. I'm not sure how far I could get but maybe if you could provide all of your CSS files we can wade through and try to find a culprit.
#10
This is my style.css sheet:
/* layout */
body {
margin: 0;
padding: 0;
padding-top: 0px;
padding-bottom: 0px;
}
#page {
margin: 0 auto;
width: 95%;
padding: 3px;
}
#links {
padding: 0px;
border: 1px solid #ccc;
margin-bottom: 3px;
font-size: 90%;
}
#links.a {
text-decoration: none;
}
#topmenu {
padding: 0px;
border: 1px solid #ccc;
margin-bottom: 3px;
font-size: 95%;
}
#topmenu.a {
text-decoration: none;
}
#topmenu[class] {
padding: 0px;
border: 1px solid #ccc;
margin-bottom: 3px;
font-size: 95%;
}
#topmenu.a[class] {
text-decoration: none;
}
#searchtable {
padding: 0px;
border: 1px solid #ccc;
border-bottom: 5px solid #ccc;
margin-top: 3px;
margin-bottom: 3px;
font-size: 95%;
}
#main {
padding: 10px;
}
#section1 {
margin-top: 3px;
border: 1px solid #ccc;
}
#section2 {
border: 1px solid #ccc;
font-size: 80%;
font-face: Arial, Verdana, sans-serif;
line-height: 135%;
}
#sidebar-left, #sidebar-right {
width: 16em;
padding: 10px;
vertical-align: top;
border: 1px solid #ccc
}
#header, #content {
width: 100%;
}
table.sections {
width: 100%;
padding: 0;
}
td.section {
padding: 10px 10px;
}
td.section.width49 {
width: 50%;
}
td.section.width33 {
width: 33%;
}
#content {
margin-top: 4px;
margin-bottom: 4px;
}
/* various overrides */
tbody {
border: none;
}
/* typography */
body {
font-size: 80%;
font: 0.8em Arial, sans-serif;
line-height: 1.5em;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
}
h1 {
font: bold 2.1em Arial, Sans-Serif;
}
h2 {
font: bold 1.5em Arial, Sans-Serif;
}
h3, h4, h5, h6 {
font: bold 1.2em Arial, Sans-Serif;
}
#main h2.title {
font-size: 150%;
}
p {
margin-top: 0.4em;
margin-bottom: 1em;
}
/* links */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#topmenu a:hover {
text-decoration: none;
}
#topmenu a:hover[class] {
text-decoration: none;
}
#links a:hover {
text-decoration: none;
}
#section2 a:hover {
text-decoration: underline;
}
/* elements */
fieldset {
border: 1px solid #ccc;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
}
table {
font-size: 1em;
}
.form-item label {
font-size: 1em;
color: #222;
}
.item-list .title {
font-size: 1em;
color: #222;
}
.links {
margin-bottom: 0;
}
.comment .links {
margin-bottom: 0;
}
.clr {
clear: both;
}
#logo {
vertical-align: middle;
border: 0;
}
#logo img {
float: left;
padding: 0 0em;
border: 0;
padding-top: 0px;
padding-bottom: 0px;
}
#menu {
padding: 0.5em 0.5em 0 0.5em;
text-align: right;
vertical-align: middle;
}
#navlist {
font-size: 1.0em;
margin-left: 1.0em;
padding-left: 1.3em;
color: #fff;
}
#navlist a {
font-weight: bold;
color: #336299;
}
#subnavlist {
padding: 0.5em 1.2em 0.4em 0;
font-size: 0.8em;
color: #fff;
}
#subnavlist a {
font-weight: bold;
color: #fff;
}
#navlist li {
list-style-type: disc;
color: #000000;
}
ul.links li.first {
border: none;
}
#search .form-text, #search .form-submit {
border: 1px solid #369;
font-size: 1.1em;
height: 1.5em;
vertical-align: middle;
}
#search .form-text {
width: 8em;
padding: 0 0.5em;
}
#mission {
padding: 1.5em 2em;
color: #fff;
}
#mission a, #mission a:visited {
color: #9cf;
font-weight: bold;
}
.site-name {
margin: 0.6em 0 0 0;
padding: 0;
font-size: 2em;
}
.site-name a:link, .site-name a:visited {
color: #fff;
}
.site-name a:hover {
color: #369;
text-decoration: none;
}
.site-slogan {
font-size: 1em;
color: #eee;
display: block;
margin: 0;
font-style: italic;
font-weight: bold;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
.breadcrumb {
margin-bottom: .5em;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
#footer {
background-color: #fff;
font-size: 0.8em;
margin-top: 4px;
border: 1px solid #ccc;
text-align: center;
}
.title, .title a{
font-weight: bold;
font-size: 1.2em;
color: #8E6126;
margin: 0 auto;
}
.submitted {
color: #8e6126;
font-size: 0.8em;
margin-top: 0;
}
.links {
color: #8E6126;
}
.links a {
font-weight: bold;
}
.block, .box {
padding: 0 0 1.5em 0;
}
.block {
padding-bottom: 0.75em;
margin-bottom: 1.5em;
}
.section .block,
.section .box {
padding: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.block .title {
margin-bottom: .25em;
}
.box .title {
font-size: 1.1em;
}
.node {
margin: 0 0 2em 0;
}
.sticky {
padding: .5em;
background-color: #eee;
border: solid 1px #ddd;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
padding-bottom: 1em;
}
.node .taxonomy {
font-size: 0.9em;
padding-left: 0em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em;
}
#forum td.forum, #forum td.posts {
background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
background-color: #ddd;
}
#forum td.container {
background-color: #ccc;
}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
div.admin-panel .description {
color: #8E6126;
}
div.admin-panel .body {
background: #f4f4f4;
}
div.admin-panel h3 {
color: #fff;
padding: 5px 8px 5px;
margin: 0;
}
/* demo content */
#newsflashstyles {
width: 300px;
height: 250px;
float: right;
position: relative;
display: inline;
margin-top: -80px;
}
#newsflashconfig {
width: 250px;
height: 250px;
float: right;
position: relative;
display: inline;
margin-top: -25px;
}
#glasses {
width: 200px;
height: 100px;
}
.chronodata {
padding: 0 0 0 20px;
background: url('images/time.png') left center no-repeat;
}
.taxterms {
padding: 0 0 0 0;
}
I will be happy to share more if that doesn't reveal enough...
#11
Hm, nothing there looks particularly suspect. Have you modified or overridden the nice menus CSS files at all?
#12
No, not that I know of. In fact, I don't think I've tampered with the original nice menu css files at all. Do you think this could have something to do with how the script is called from my page.tpl.php. file? What about JS - do you think that could be interfering at all? I am racking my brain...
#13
Here is the best advice I can give you. Read through this carefully and do not skip around.
1) Start the menu theming from scratch. TAKE NOTE of my organization in post #4! it is hierarchical!
2) Look in modules/nice_menus/nice_menus_default.css. Look for this:
/******************************
HORIZONTAL (down) menus
******************************/
See any similarities with how I organized my CSS?
3) Use Mozilla Firefox with the Firebug extension.
4) Take the worthwhile hour to create a very easy-to-read navigation section in your CSS (again like post #4)
NOTE* I'm not sure if I posted a horizontal or vertical menu in #4 so make sure you base it off of the nice_menus_default.css
5) Good luck. This should be a headache-free procedure. Things of importance to regularly test:
float: left;
position: relative;
display: block;
P.S.
I think your main problem might like within those styles. I attached a screenshot of one of the ways I organize. If you want the whole css sheet.... let me know.
#14
BTW.... by basing your CSS off of nice_menus_default.css you will override the DEFAULTS you don't want without even knowing it ;-)
#15
I'm confused... should I base my CSS off of nice_menus or my style.css stylesheet?
Sorry... :-\
#16
I am saying you should copy the same lines of CSS from nice_menus_default.css and place them in your style.css. Then you should make the appropriate customizations. Your style sheet will override the nice_menus_default.css.
#17
Wow, I think I'm finally close to figuring this out! I went through and double checked EVERYTHING and found one error where I had aligned my tables to float: right (instead of left).
I made this edit in the first place because I'd like my horizontal menu to appear aligned right in a table row divided into two columns.
Now the drop-downs are working properly, but they're out of place on the site. I want them right aligned instead of left.
How can I implement this change for all browsers? Some sort of text-align command?
Any help is greatly appreciated!
Thanks,
Kathryn
#18
Awesome that you are making headway! Can you post a screenie of what you have now? It is hard for me to visualize what it is doing now. Sounds like you are really close now though.
#19
You sure are quick! Here's my screenshot. I'd like the two horizontal menus aligned to the right of the table rows.
Any ideas??
#20
For the time being, I've realigned the menus completely to the left, however I am still dissatisfied with their position. Any ideas on how to align the two menus right (inside two seperate tables)?
#21
Hey kethryn, sorry I never got back to this. I tend to figure stuff out by playing with it so it is hard for me when I can't get my hands on the code. Did you ever get this sorted out?
#22
Assuming resolved and closing.