SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Threaded View

  1. #1
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    lost in translation IE7->IE6

    Hi,

    I've a little JS/CSS menu in my web application that works the same under IE7 and Firefox 1.5 or 2 or even 3.x.

    However it does not work well under IE6 and i suppose that CSS 2 standard in IE6 is the cause but i would like to know how can i solve this issue.

    I attached to this post a small picture to show you the problem.

    My CSS code is split in 2 CSS (visual and layout) it makes easier the code to maintain later on.

    So here is the CSS code from visual.css file :
    /******************************
    * Menu
    ******************************/
    .menu_content1, .menu_content2, .menu_content3, .menu_content4
    {
    /*background-color : #f4b907;*/
    color : #FFFFFF;
    font-family : sans-serif;
    font-size : 12px;
    font-weight : bold;
    cursor : pointer;
    }
    .submenu
    {
    border-width : 1px;
    border-color : #0066cc; /*54a14c*/
    border-style : solid;
    font-size : 11px;
    /*font-weight : bold;*/
    color : #0;
    background-color: #fafafa; /*#c6e2fd*/; /*d5fade*/
    }
    .iconbar
    {
    background-color : #e9eeee; /*#4d6180*/; /*e1e9f5*/ /*e9f5ef*/
    border-right-style : solid;
    border-right-width : 1px;
    /* border-right-width : 1px;*/
    border-right-color : #a0b9dd; /*a1e0bd*/
    }
    .menuitems a,
    .menuitems a:active,
    .menuitems a:visited,
    .menuitems a:link
    {
    text-decoration : none;
    color : #000000;
    display : block;
    font-family : sans-serif;
    font-size : 11px;
    }
    .menuitems a:hover
    {
    background-color : #fff0c1; /*#fce7ae*/; /*#abbedb;*/ /*add9a8*/
    border-width : 1px;
    border-style : solid;
    border-color : #ff9000;/*#05367f;*/ /*047d24*/
    /*add9a8*/
    }
    .imgitem
    {
    text-decoration : none;
    /*font-family : verdana;
    font-size : 8pt;*/
    vertical-align : middle;
    border : none;
    /*padding : 0px 5px 0px 5px;*/
    cursor : pointer;
    }
    and here is my code from layout.css :
    /************************
    * Menu
    ************************/
    .menu_content1, .menu_content2, .menu_content3, .menu_content4
    {
    float : left;
    display : inline;
    width : 120px;
    height : 21px;
    margin-top : 4px;
    /*padding : 4px 0px -4px 0px;*/
    /*background-color:#FF00FF;*/
    text-align : center;
    }
    .submenu
    {
    position : absolute;
    float : left;
    top : 95px;
    width:118px;
    }
    .iconbar
    {
    float : left;
    display : inline;
    width : 25px;
    height : 100%;
    }
    .menuitems
    {
    float : left;
    display : inline;
    width : 100px;
    margin-left : 25px;
    }
    .menuitems ul
    {
    padding: 0;
    margin: 0;
    list-style: none;

    }
    .menuitems li
    {
    float : left;
    display : inline;
    height : 28px;
    width : 118px;
    margin-left : -25px;
    }
    .menuitems a,
    .menuitems a:active,
    .menuitems a:visited,
    .menuitems a:link
    {
    padding : 0px 0px 0px 4px;
    border-style : none;
    border-width : 0px;
    vertical-align:middle;
    line-height:28px;
    }
    .menuitems a:hover
    {
    margin : 2px 2px 2px 3px;
    padding : 0px 0px 0px 0px;
    line-height : 22px;
    }
    .menuitems img
    {
    margin : 0px 10px 2px 2px;
    }
    thanks a lot for any help.

    Maileen
    Attached Images Attached Images


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
  •