Results 1 to 5 of 5

Thread: Glossy Vertical Menu - IE and Chrome not displaying correctly

  1. #1
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Glossy Vertical Menu - IE and Chrome not displaying correctly

    Hi As per plenty of the comments actually on the following page:
    http://www.dynamicdrive.com/style/cs...vertical-menu/

    I am having the world of problems making this menu work with IE7 and 8 but mainly 8.

    I am using Safari 4 and Firefox and it displays perfectly.

    However, running Google Chrome and IE8 I just get a white box.

    Even when I mouse over it just stays white.

    I have not modified the CSS except for the image locations, but here it is anyway.

    Please help!!

    Thanks

    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .glossymenu{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    width: 170px;
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }

    .glossymenu li a{
    background: white url(/pages/media/glossyback.gif) repeat-x bottom left;
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 10px;
    text-decoration: none;

    }


    * html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
    width: 170px;
    }


    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }

    .glossymenu li a:hover{
    background-image: url(/pages/media/glossyback2.gif);
    }

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Does the issue occur on the DD demo page as well? If not, it sounds like an image path issue on your end. Try changing them inside the code to absolute URLs, for example:

    Code:
    http://mysite.com/pages/media/glossyback.gif
    DD Admin

  3. #3
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    are you using PNG's? if so you might want to look around for the png IE fix that resolves transparency issues within IE.

    Also, your hover class probably isn't working correctly with multiple versions of IE. there is also a fix for that. I will see if I can dig them up.

  4. #4
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, Thanks for the replies.

    Firstly I am using Gif's.

    When I go to dynamicdrive with IE, it works.

    I put the gif up a level and it still didn't work, so I tried downloading the gif and was presented with a red cross.

    I re-created the files (as I changed the colour to yellow) and re-uploaded.

    It works!

    The new problem I have, is if I leave the <style> tags in the .css, I get bullets in Safari but not IE. If I remove the <style> it displays perfect in Safari and Firefox, but not IE, I get a think Band on the left hand side.

    Also another thing which is annoying me and please help me if you know the fix, is that the menu is centring on the frame so I am getting scrollbars on the frame.

    Cheers

  5. #5
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    actually you can specify IE code with comments specificly for IE.

    Code:
    <!--[if IE 6]>
    Special instructions for IE 6 here
    <![endif]-->
    This link explains it in good detail. but you can also just label these with <!--[if IE]> for all versions of IE... but beware that sometimes IE6, 7, 8 will all act differently. so put the style code in the brackets at top and bottom of the css and that should do the trick.
    http://www.quirksmode.org/css/condcom.html

Bookmarks

Posting Permissions

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