SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    1. The background image sticks to the right side of the window;
    2. The menu line splits into 2 lines;
    3. A menu item hovered by mouse, doesnt change color, both, main and sub menu items;
    Here is the code:
    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think you want something like this.
    Code:
    <!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.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    http://htmldog.com/articles/suckerfish/dropdowns/
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi RyanReese
    I added #nav li a:hover
    {
    color:blue;
    }
    and it worked...
    Thanks..

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Use this updated code
    Code:
    <!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>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

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
  •