SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  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

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,119
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,
    i suppose that CSS 2 standard in IE6 is the cause but i would like to know how can i solve this issue.
    Bingo. IE6 < doesn't understand :hover on any element other than anchors.
    Because your list structure relies on :hover on the li element you need some javascript to help IE understand it.

    This should shed some light on it,
    http://www.htmldog.com/articles/suckerfish/hover/

    Edit:
    Acutually looking at your code again, your not even using drop down lists. Sorry I just assumed - looking at it again...

  3. #3
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i do not think so that it's the only issue...especially when you look at the area colors.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give ".menuitems li" position:relative. (There's no need to hide that from any browsers.)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is not hiding anything.
    in fact it makes sense to have it as float because it moves everything on the left border edge.
    position relative to menuitems li does not help in this case... from my point of view (and after testing)

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,119
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Can you provide the HTML and CSS please?

    I think Kravvitz' suggesting may fix the problem also - He didn't say to remove the float - Often IE6 needs position: relative to make it behave as you are wanting. Sometimes is just magically fixes the problem.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark is correct. I did not say that you should remove any declarations; I just suggested that you add one.

    IE6 just doesn't like negative margins on non-positioned elements. Giving position:relative to them fixes the issue.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •