CSS, how can i align IE6 with Google Chrome?

Hi everyone,
The following code styles an horizontal menu as follows:

  1. A background image is located at the center of the window;
  2. An horizontal menu is situated on top of the image, located on one line;
  3. With mouse hover on a menu item, two things happen:
    a. Menu item’s color turns from black to blue;
    b. A submenu drops down, given, there is a submenu for that particular menu item;
  4. With mouse hover on a submenu’s item, that item’s color turns from black to red;
    All the above works correctly with “Google Chrome”. Using IE6 shakes everything up:
  5. The background image sticks to the right side of the window;
  6. The menu line splits into 2 lines;
  7. A menu item hovered by mouse, doesnt change color, both, main and sub menu items;
    Here is the code:

<title>Index</title>
<!--[if lt IE 7]>
<script type="text/javascript">
  sfHover = function() 
    {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) 
      {
       sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
     sfEls[i].onmouseout=function() 
      {
       this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
      }
     }
    }
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css" media="all">
  * {padding:0;}
  #nav, #nav ul 
   {
    float:left;
    padding: 0;
    margin-top:0em;
    margin-right:0px;
    margin-bottom:0em;
    margin-left:125px;
    list-style: none;
   }
  #nav a 
   { 
    color:#000; font-weight:bold;
    text-decoration:none;
    display: block;
    width: 10em;
    color:#4f4c4d;
   }

  #nav li 
   {
    padding-left:3px;
    float: left;
    width: 8em;
    position:relative;
    border-left:1px solid green;
    color:#b10;
   }
  #nav li:first-child {border-left:none;}
  #nav li ul li {border-left:none;}
  #nav li a {width:15em;} 
  #nav li ul
   {
    padding:0;
    position: absolute;
    width: 15em;
    margin-left: -999em;
    left:0;
    top:100&#37;;
   }
  #nav li:hover ul, #nav li.sfhover ul 
   {
    margin-left:0; 
   }
  #nav li:hover >a {color:blue;}
  #bg_picture 
   {
    background-image:url(graphix/rounded_corners_p1.jpg);
    width:800px;
    height:600px;
    margin:1px 10px 0px 115px;
    padding:0px;
    float:left;
   }
  #nav li:hover ul, #nav li.sfhover ul 
   {
    margin-left:0;
   }
  #nav li ul a:hover
   {
    color:#c85b77;
   }
  #nav li ul {background-color:#e8dab7;}
  
</style>
</head>
<body>
  <ul id="nav">
    <li><a href="#">Attention</a></li>
    <li><a href="#">Boot camp</a>
      <ul>
        <li><a href="#">Do not sleep</a></li>
        <li><a href="#">Shooting session</a></li>
        <li><a href="#">Harsh is the march</a></li>
        <li><a href="#">Training sessions</a></li>
      </ul>
    </li>
    <li><a href="#">Skydiving course</a>
      <ul>
        <li><a href="#">&quot;Masterbatia&quot;</a></li>
        <li><a href="#">Supersonic thunder &amp;smell</a></li>
        <li><a href="#">First jump</a></li>
      </ul>
    </li>
    <li><a href="#">Winter training</a></li>
    <li><a href="#">At the frontier line</a>
      <ul>
        <li><a href="#">The Suez canal</a></li>
        <li><a href="#">Golan heights</a></li>
      </ul>
    </li>
    <li><a href="#">Commanders course</a></li>
  </ul>
  <div id="bg_picture"></div>
</body>
</html>

To see that code in co-display with the image, i installed it at a free host (with its’ ads) at the address:
http://avirot.bravehost.com/index.html
Could anyone help me with making ie6 locating the image at the center of the page, displaying the menu in one line
with its’ items when hovered by a mouse in blue (red for sub items) ?
I’ll be grateful and relieved…
Thanks

Hi,

I think you want something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index_ver_8</title>
<!--[if lt IE 7]>
<script type="text/javascript">
  sfHover = function() 
    {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) 
      {
       sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
     sfEls[i].onmouseout=function() 
      {
       this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
      }
     }
    }
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css" media="all">
* {
    padding:0;
    margin:0;
}
#nav, #nav ul {
    float:left;
    /*border:2px solid red;*/
   padding: 0;
    margin:0;
    list-style: none;
}
#nav {
    float:none;
    width:800px;
    margin:auto;
}
#nav a {
    color:#000;
    font-weight:bold;
    text-decoration:none;
    display: block;
    color:#4f4c4d;
    padding:2px 15px;
}
#nav li {
    float: left;
    position:relative;
    border-left:1px solid green;
    color:#b10;
}
#nav li li {
    clear:left;
}
#nav li:first-child, #nav li.first {
    border-left:none;
}
#nav li ul li {
    border-left:none;
}
#nav li ul {
    padding:0;
    position: absolute;
    width: 15em;
    margin-left: -999em;
    left:0;
    top:100&#37;;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
#nav li:hover a {
    color:blue;
}
#nav li li {
    width: 15em;
}
#nav li li a {
    width:14em;
    padding:2px .5em;
}
#nav li:hover li a, #nav li.sfhover li a {
    color:#4f4c4d
}
#bg_picture {
    background-image: url(http://avirot.bravehost.com/graphix/rounded_corners_p1.jpg);
    width:800px;
    height:600px;
    margin:1px auto 0px auto;
    padding:0px;
    clear:both;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
#nav li ul a:hover {
    color:#c85b77;
}
#nav li ul {
    background-color:#e8dab7;
}
</style>
<title>untitled</title>
</head>
<body>
<ul id="nav">
    <li class="first"><a href="#">Attention</a></li>
    <li><a href="#">Boot camp</a>
        <ul>
            <li><a href="#">Do not sleep</a></li>
            <li><a href="#">Shooting session</a></li>
            <li><a href="#">Harsh is the march</a></li>
            <li><a href="#">Training sessions</a></li>
        </ul>
    </li>
    <li><a href="#">Skydiving course</a>
        <ul>
            <li><a href="#">&quot;Masterbatia&quot;</a></li>
            <li><a href="#">Supersonic thunder &amp;smell</a></li>
            <li><a href="#">First jump</a></li>
        </ul>
    </li>
    <li><a href="#">Winter training</a></li>
    <li><a href="#">At the frontier line</a>
        <ul>
            <li><a href="#">The Suez canal</a></li>
            <li><a href="#">Golan heights</a></li>
        </ul>
    </li>
    <li><a href="#">Commanders course</a></li>
</ul>
<div id="bg_picture"></div>
</body>
</html>


Of course you will have to work around whatever code the free host sticks in the way.:slight_smile:

Hi Paul,
Your code was extremely helpful and i wrote that as a roply to your post yesterday but for some reason it doesn’t appear on the forum so i repeat my gratitude (well, you deserve that for the least…).
Every thing worked fine excpet the changing of color to blue when mouse hovers
on a menu item. I tried to fix it but failed…
I couldnt make any advance without your aid so i would like to express my gratitude again: thanks.

Hi,

Every thing worked fine excpet the changing of color to blue when mouse hovers
on a menu item. I tried to fix it but failed…

What do you want to change blue exactly?

The top menu changes to blue on hover but the sub menus rollover to that pinkish color. I assumed that’s what you wanted but it can of course be changed to suit.

Let me know which rollovers need changing (or if it is a browsers issue) and I will show you where to adjust the code :slight_smile:

Hi,
The upper horizontal menu items should change into blue when hovered.
They do when using :“Google Chrome”, they do not with IE6.
The submenu items, at the vertical menus, should change to red when hovered and they do both with “Google” and “IE6” which makes me wonder why red is accepted and blue rejected by IE6…
Thanks a lot.

Hi, that’s because you are doing :hover’s on the <li> and IE6 doesn’t support hover on anything other then anhor. You will need some suckerfish JS :slight_smile:
http://htmldog.com/articles/suckerfish/dropdowns/

Hi RyanReese
I added #nav li a:hover
{
color:blue;
}
and it worked…
Thanks…

The JS is quite easy, copy the JS and put them inbetween <script> tags, then make sure that…heck I just looked up at Pauls code and he has the code already in place. Paul gave you the exact code needed :slight_smile:

Use this updated code :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index_ver_8</title>
<!--[if lt IE 7]>
<script type="text/javascript">
  sfHover = function() 
    {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) 
      {
       sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
     sfEls[i].onmouseout=function() 
      {
       this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
      }
     }
    }
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css" media="all">
* {
    padding:0;
    margin:0;
}
#nav, #nav ul {
    float:left;
    /*border:2px solid red;*/
   padding: 0;
    margin:0;
    list-style: none;
}
#nav {
    float:none;
    width:800px;
    margin:auto;
}
#nav a {
    color:#000;
    font-weight:bold;
    text-decoration:none;
    display: block;
    color:#4f4c4d;
    padding:2px 15px;
}
#nav li {
    float: left;
    position:relative;
    border-left:1px solid green;
    color:#b10;
}
#nav li li {
    clear:left;
}
#nav li:first-child, #nav li.first {
    border-left:none;
}
#nav li ul li {
    border-left:none;
}
#nav li ul {
    padding:0;
    position: absolute;
    width: 15em;
    margin-left: -999em;
    left:0;
    top:100%;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
#nav li:hover a, #nav li.sfhover a {
    color:blue;
}
#nav li li {
    width: 15em;
}
#nav li li a {
    width:14em;
    padding:2px .5em;
}
#nav li:hover li a, #nav li.sfhover li a {
    color:#4f4c4d
}
#bg_picture {
    background-image: url(http://avirot.bravehost.com/graphix/rounded_corners_p1.jpg);
    width:800px;
    height:600px;
    margin:1px auto 0px auto;
    padding:0px;
    clear:both;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
#nav li ul a:hover {
    color:#c85b77;
}
#nav li ul {
    background-color:#e8dab7;
}
</style>
<title>untitled</title>
</head>
<body>
<ul id="nav">
    <li class="first"><a href="#">Attention</a></li>
    <li><a href="#">Boot camp</a>
        <ul>
            <li><a href="#">Do not sleep</a></li>
            <li><a href="#">Shooting session</a></li>
            <li><a href="#">Harsh is the march</a></li>
            <li><a href="#">Training sessions</a></li>
        </ul>
    </li>
    <li><a href="#">Skydiving course</a>
        <ul>
            <li><a href="#">&quot;Masterbatia&quot;</a></li>
            <li><a href="#">Supersonic thunder &amp;smell</a></li>
            <li><a href="#">First jump</a></li>
        </ul>
    </li>
    <li><a href="#">Winter training</a></li>
    <li><a href="#">At the frontier line</a>
        <ul>
            <li><a href="#">The Suez canal</a></li>
            <li><a href="#">Golan heights</a></li>
        </ul>
    </li>
    <li><a href="#">Commanders course</a></li>
</ul>
<div id="bg_picture"></div>
</body>
</html>


Thanks,
I did try to add: #nav li:hover a, #nav li:sfHover a {color:blue;) and it didn’t work because i assigned to it color black elsewhere and thought it was Paul’s code that didn’t work…
CSS is still perplexity for me…
Thanks again to you and Paul and sorry for my first css code disorder.