...

View Full Version : SuckerFish Menu in Joomla. Problem in IE.



taijuten
06-23-2010, 11:32 PM
Good Evening all,

I've had a problem that has plagued me for days now. I am building a website in Joomla, see http://erasofstyle.com/beta/index.php.

The only issue I am now having is that the drop down menu does not appear to be working in IE. All the text on said drop down box does not display in IE, but appears to work in firefox and chrome.

I would assume that this is a CSS issue, and so include the CSS as follows:

html {
height: 100%;

}

body{
margin:0;
padding:0;
text-align:center;
background:#221b12 url(../images/dolmatia-bg.jpg) repeat;
font-size:13px;
color:#fff;
font-family: Trebuchet MS, Trebuchet MS1, Helvetica, sans-serif;
font-weight:normal;

}

/*texte*/
p {
font-size: 100%;
text-align:left;

}

h1 {
font-size: 200%;

}

h2 {
font-size: 150%;

}

h3 {
font-size: 125%;

}

h4, h5, h6 {
font-size: 100%;

}

/* liens hypertextes*/
a:link, a:visited {
text-decoration:none;
color:#ffffff;
font-weight:bold;

}

a:hover {
color:#9fbf3a;

}

/*listes a puces*/
ul {
margin:0;
padding-left:0px;

}

li {
list-style-type:circle;
background:transparent;
margin: 4px;

}

/*image*/
img {
border:none;
margin:0px 5px;
padding:0;

}

img .caption {
text-align: left;

}

.highlight{
background:#9fbf3a;/*VERT*/
padding: 0px 2px 0px 2px;
color:#ffffff;

}

.button {
background:#9fbf3a;/*VERT*/
border:none;
color:#ffffff;
font-weight:normal;
padding:4px;

}

.inputbox {
color:#26211e;
background:#fcfdfa;
border:none;
padding:4px;
font-weight:bold;


}

.pagewidth{
width:940px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
position:relative;

}

fieldset {
margin:0px 5px 5px 5px;
padding:5px;
border:1px solid #222222;

}

.clr {
clear:both;

}

/********************************************/
/***********HEADER***************************/
/*******************************************/

#header {
width:940px;
height:150px;
background:transparent;
margin:0;

}

#pathway {
float:left;
width:100%;
height:13px;
font-size:12px;
font-weight:normal;
margin:25px 0 0 0;
padding:0 10px;
text-align:left;

}


/********************************************/
/***********TOPMENU************************/
/*******************************************/

#topmenu {
float:left;
width:940px;
height:59px;
background:transparent url(../images/dolmatia-topmenu-bg.png) top center no-repeat;
margin:25px 0 0 0 ;
padding:0;

}

#navigation {
float:left;
height: 59px;
width:679px;
float:left;
text-transform: capitalize;
text-align:left;
background:transparent;
padding:0;

}

#navigation a {
display: block;
float: left;
height: 39px;
padding-left:20px ;
padding-right:20px;
padding-top:20px;
font-weight:bold;
color:#fff;
font-size:18px;
font-weight:bold;
border-right:1px solid #2a231b;
text-align:left;
z-index: 999;

}

#navigation a:hover{
color: #9fbf3a;

}

#navigation ul {
list-style: none;
margin: 0px ;
padding: 0px;

}

#navigation li {
display: block;
float: left;
margin:0 ;
padding: 0 ;

}

#navigation li li a {
font-size: 15px;
padding-left:20px ;
padding-right:20px;
padding-top:20px;
margin: 0;
color:#fff;

}

#navigation li li {
border-bottom: 1px solid #2a231b;
border-left:1px solid #2a231b;
background: url(../images/bgmenuli.jpg) repeat;

}

.nav, .nav * {
margin: 0;
padding:0;

}

div#navigation {
position: relative;
z-index: 50;
}

#navigation li li {
margin:0 0 0 -1px;

}

.nav {
line-height:1.0;
float:left;
margin-bottom:0em;
position: relative;

}

.nav ul {
background:transparent;
padding: 0;
margin-top:10px !important;

}

.nav li {
float:left;
list-style:none;
position:relative;
background:none;

}

.nav li li a {
display:block;
padding: 0;
margin:0 ;
text-decoration:none;
background-image: none;
float:none;
width:135px;
z-index: 135;

}

.nav li ul {
float:none;
left:-999em;
position:absolute;
width: 177px;
z-index: 35;

}

.nav li:hover ul,
.nav li.sfHover ul {
left:0px;
top: 48px;

}

.nav li:hover li ul,
.nav li.sfHover li ul,
.nav li li:hover li ul,
.nav li li.sfHover li ul,
.nav li li li:hover li ul,
.nav li li li.sfHover li ul {
top:-999em;

}

.nav li li:hover ul,
.nav li li.sfHover ul,
.nav li li li:hover ul,
.nav li li li.sfHover ul,
.nav li li li li:hover ul,
.nav li li li li.sfHover ul {
left: 177px;
top:0px;
width: 177px;

}

.nav li li {
position: relative;
float:none;
width: 177px;

}

There is more to this css, but the rest would appear irrelevant.

Any help would be greatly appreciated!

SB65
06-24-2010, 10:30 AM
OK for me in IE7 on the "Stock" item...

taijuten
06-24-2010, 10:43 AM
Looks as though it's IE8 then.

Have had one other person check, and it doesn't show the drop down menu items in IE8 unless compatibility view is turned on.

Does that make this any easier to diagnose?

SB65
06-24-2010, 11:12 AM
Right, in IE8 I get the dropdown but without any text on it...drives me mad when things are OK in IE7 but not in IE8. :mad:

So, a quick fix would be to set the page to run in compatibility mode:


<meta http-equiv="X-UA-Compatible" content="IE=7">

After messing about a bit it looks like it's your Cufon that causes the issue - if I disable javascript (and hence Cufon) then the menu is OK.

If the compatibility mode isn't an option it might be worth trying the page with a strict doctype rather than a transitional and see if this has any effect.

taijuten
06-24-2010, 11:14 AM
Thank you very much for your help there SB!

puzta
07-27-2010, 04:23 PM
I don't know exactly what css you use for hiding and showing the submenu.
I had the same issue in IE8 using

visibility:visible/hidden;

I replaced this with

display: block/none;

to hide/unhide the submenu and that worked for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum