Im in the bug testing phase of a newly designed drupal site.
Ive found its working perfectly on a Mac in Firefox and safari, however when i tested in Parallels i have the following issue:
IE8 & IE7 - My sub menus are cut off vertically.
Heres the CSS:
/* begin MenuSubItem */
.artmenu ul a
{
display:block;
text-align: center;
white-space: nowrap;
overflow:hidden;
line-height: 20px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.9);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
}
.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
display: inline;
float: none;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
text-align: left;
text-decoration: none;
line-height: 20px;
color: #21160D;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 13px;
}
.artmenu ul ul a
{
margin-left: -3px;
}
.artmenu ul li a:hover
{
color: #c33f3b;
background-position: 0 -20px;
}
.artmenu ul li:hover>a
{
color: #c33f3b;
background-position: 0 -20px;
}
.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
color: #c33f3b;
}
.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
color: #c33f3b;
}
/* end MenuSubItem */
You’ll probably need to experiment with position and z-index on your nav container. You can google suckerfish menu or drupal docs and find others with similar issues with the menus in IE that will apply to your situation.
Ive tried adjusting the position and the z index but still no result… Perhaps im probably not changing the right ones?
Ive looked into searching for and answer on google and drupal docs and came across this thread : Nice menu drops down behind another nice menu lower on page | drupal.org which sounds like it might be the same issue but my attempts arent working.
Ive uploaded an image of all the code (with line numbers) here, perhaps someone could point out where im going wrong???
Maybe you need to set a width on the submenus. Do you have a live link? The CSS is not much help without the HTML, but I wouldn’t want to sort through code alone (and it’s no use posting PHP). It’s usually quick to fix something like this if you can see it in action.
Unfortunately, I’m not very good at debugging IE stuff. When I design a site—especially if there’s anything complex like a dropdown or some kind of JavaScript effect—I test is rigorously on each browser at each step, so that I can debug the problem as it’s created. Otherwise, backtracking like this is very problematic; and it’s harder from a distance, too, which you can’t so easily play with the code and test things out. I do wish IE had better developer tools, like Firefox’s Firebug. There are others around here who are much better at spotting problems, so hopefully they’ll drop by shortly.
Thanks ralph.m!
I know firebug is a fantastic tool - couldnt do without it!
Ive contacted the maker of the drupal theme sop hopefully they might come back with something also.
Ive been looking at z-index and position issues for the last few days and ive just found a solution by adding a width to the ul.
I really didnt want to add a set width because themu items are different widths so i had to go wide to accommodate but at least its a quick fix for now…
The menu would be fixed in IE8 if you simply removed the emulate ie7 tag. I don’t know why people think its a good idea to emulate a very broken browser like IE7 instead of the much much better IE8
I guess you put it in place for some other reason but you would have been much better off solving whatever the original issue was rather than just degrading IE8.
For IE7 to work with a fluid width menu you need to remove haslayout from the list which can be very awkward. You will need to remove dimensions and use padding for spacing.
The following works for me.
.artmenu ul a
{
[B] display:block;[/B]
text-align: center;
[B] white-space: nowrap;[/B]
line-height: 20px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.9);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
/*width:270px;*/
[B] overflow:visible;
height:auto;
padding:5px 0;[/B]
}
[B]*+html .artmenu ul li{margin-top:-2px}[/B]
The last line is for the whitespace bug on lists in IE7 and unfortunately haslayout is a cure for that but then that would make the child menu shrink to fit so you have to hack it instead.
Thanks so much for your help - this works perfectly in IE but now doesnt work in firefox… when i hover over the main nav, the sub nav and its child appear and only 2 out of the 4 hovers work.
Ive never heard of this emulate ie7/ie8 stuff (ill have to look into that )and as you can probably tell Im a bit of a newby and this is a drupal theme that i have tweeked a little so theres alot of stuff in there i dont completely understand!
You may have seen in my other post i found a quick fix by putting a width on the ul but im not happy with it as i had to make it wider than necessary to accommodate one larger line.
You can probably bring firefox back by setting the overflow:hidden back like this.
.artmenu ul a{overflow:hidden;}
*+html .artmenu ul a{overflow:visible;margin-top:-2px}
However I see there are still a load of errors in IE so it’s probably not worth the effort as that menu really needs a rewrite as it is over complicated and would take longer for me to fix that doing it from scratch. There’s too many spans and classes and it could be simplified a lot.
All the visual problems in IE8 could be fixed by removing the emualte tag.
You should find out why it’s in the page in the first place as it really does break IE8 completely. It’s probably been put in place for a badly written script so track down why its there and then get rid of it forever. It has no place being there in the first place Then dump the script that needs it and use something better.
Unfortunately I am away for 10 days now otherwise I would have recoded the menu for you so someone else will need to jump in here now and help - sorry :).
