Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    SuckerFish Menu in Joomla. Problem in IE.

    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:
    Code:
    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!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    OK for me in IE7 on the "Stock" item...

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

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

    Code:
    <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.

  • Users who have thanked SB65 for this post:

    taijuten (06-24-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much for your help there SB!

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •