1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

IE6 CSS or JS issue?

Discussion in 'Web Development & Web Hosting' started by twizzle, Dec 2, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Ok still working on a clients website, almost finished. However, i have a problem with it. The site works fine on my IE8, and everyone elses in the office. On the clients pc they get an issue with the menu on the home page. In IE8 the last of the menu buttons was shifted underneath the menu. Manged to fix that, due to a sizing error.
    However after seeing that my boss looked atteh site in IE6 and noticed that teh menu doesnt work properly. It shifts the drop downs to the left by quite a way inline with teh buttons, not undernaeth as they should be.
    Now i know that IE6 doubles teh margins in CSS but i dont think thats the issue here.

    Im not sure if its IE6 not coping with the CSS or with the JS for the menu. Could somoene please advise?

    www.csnet.co.uk/aquadrainage/index.php is the site

    Below is the HTML for the menu

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Aqua Drainage &amp; Plumbing Solutions</title>

    <link rel="stylesheet" href="style.css" type="text/css">

    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
    for(var i=0; i<document.images.length; i++)
    {
    var img = document.images
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    {
    var imgID = (img.id) ? "id='" + img.id + "' " : ""
    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
    var imgStyle = "display:inline-block;" + img.style.cssText
    if (img.align == "left") imgStyle = "float:left;" + imgStyle
    if (img.align == "right") imgStyle = "float:right;" + imgStyle
    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
    + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    }
    window.attachEvent("onload", correctPNG);
    </script>

    <script type='text/javascript' language="JavaScript">
    window.onload = function()
    {
    var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
    var li = lis;
    if (li.className == 'headlink')
    {
    li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
    li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
    }
    }
    }
    /* or with jQuery:
    $(document).ready(function(){
    $('#cssdropdown li.headlink').hover(
    function() { $('ul', this).css('display', 'block'); },
    function() { $('ul', this).css('display', 'none'); });
    });
    */
    </script>
    </head>



    <body>

    <div id="wrapper">
    <br>
    <div id="fb">
    Follow us:<p>
    <a href="http://www.facebook.com"><img src="images/fblogo.png" border="0" alt="Facebook icon">&nbsp;Facebook</a>
    <p>

    <a href="http://www.twitter.com"><img src="images/twlogo.png" border="0" alt="Twitter icon">&nbsp;Twitter</a>
    </div>

    <div id="slogan">
    <br>
    <br>
    <div>
    <a href="emergency.php"><img src="images/247.png" alt="Genuine 24/Seven Service"></a>
    </div>
    </div>

    <div id="logo"><img src="images/logo.png" alt="Aqua Drainage and Plumbing Solutions">
    </div>

    <div id="menu">
    <ul id="cssdropdown">
    <li class="headlink">
    <a href="index.php">
    <img src="images/home-off.png" border="0" alt="home button"></a>
    </li>

    <li class="headlink">
    <img src="images/plumbing-off.png" alt="plumbing button">
    <ul>
    <li><a href="domplumb.php">DOMESTIC</a></li>
    <li><a href="complumb.php">COMMERCIAL</a></li>
    <li><a href="pipework.php">PIPEWORK</a></li>
    </ul>
    </li>

    <li class="headlink">
    <img src="images/drainage-off.png" width="125" height="25" alt="drainage button" >
    <ul>
    <li><a href="domestic.php">DOMESTIC</a></li>
    <li><a href="commercial.php">COMMERCIAL</a></li>
    <li><a href="cctv.php">CCTV</a></li>
    <li><a href="relining.php">RELINING</a></li>
    <li><a href="rerounding.php">REROUNDING</a></li>
    <li><a href="installations.php">INSTALLTIONS</a></li>
    </ul>
    </li>

    <li class="headlink">
    <img src="images/maintenance.png" alt="maintenance button">
    <ul>
    <li><a href="maintenance.php">PLANS</a></li>
    <li><a href="graffiti.php">GRAFFITI</a></li>
    <li><a href="pavement.php">PAVEMENTS</a></li>
    </ul>

    </li>

    <li class="headlink">
    <a href="contact.php">
    <img src="images/contact-us-off.png" border="0" alt="Contact button"></a>

    </li>

    <li class="headlink">
    <img src="images/about-us-off.png" border="0" alt="about button">
    <ul>
    <li><a href="about.php">ABOUT</a></li>
    <li><a href="pricing.php">PRICING</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

    And the CSS

    /* General */
    #cssdropdown, #cssdropdown ul { list-style: none; text-align:center;}
    #cssdropdown, #cssdropdown * { padding: 0; text-align:center;}

    /* Head links */
    #cssdropdown li.headlink { width: 125px; float: left; text-align: center; }
    #cssdropdown li.headlink a { display: block; }

    /* Child lists and links */
    #cssdropdown li.headlink ul { display: none; text-align:center; position:absolute; }
    #cssdropdown li.headlink:hover ul { display: block;}
    #cssdropdown li.headlink ul li a { background-color:#00acee; color:white; font-weight:bold;text-decoration:none;}
    #cssdropdown li.headlink ul li a:hover { background-image:url('images/button2.png'); width:125px;}

    #cssdropdown a {background-image:url('images/button1.png');height:22px; width:125px;font-size:14px;}
    #cssdropdown ul li a:hover { text-decoration: none;}
    #cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 3px;}

    body{
    margin:0px;
    font-size:0.85em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url('images/background.png');
    background-repeat:repeat-x;
    }

    #menu {
    text-align:center;
    width: 800px;
    position:absolute;
    left:250px;
    display:inline;
    z-index:50;
    }


    #wrapper {
    text-align: center;
    width: 1024px;
    margin: auto;
    }

    #logo{
    width:407px;
    margin: auto;
    }

    #fb {
    width: 100px;
    margin:auto;
    font-weight:bold;
    float: left;
    }

    #fb a{
    text-decoration:none;
    }
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Well sorted one issue, everything looking like it was shifted left. This was due to a missing ':' in my style for the footer on the index page



    <div id="footer" style="position:absolute; top:1200px; left:150px;">
    2010&copy;CSL

    </div>
    the: between left and 150px was missing

    Now it looks better but theres still a positioning issue and the menu has everything jump right witha gap when hovering over.

    New code HTML


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Aqua Drainage &amp; Plumbing Solutions</title>

    <link rel="stylesheet" href="style.css" type="text/css">

    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
    for(var i=0; i<document.images.length; i++)
    {
    var img = document.images
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    {
    var imgID = (img.id) ? "id='" + img.id + "' " : ""
    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
    var imgStyle = "display:inline-block;" + img.style.cssText
    if (img.align == "left") imgStyle = "float:left;" + imgStyle
    if (img.align == "right") imgStyle = "float:right;" + imgStyle
    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
    + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    }
    window.attachEvent("onload", correctPNG);
    </script>

    <script type='text/javascript' language="JavaScript">
    window.onload = function()
    {
    var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
    var li = lis;
    if (li.className == 'headlink')
    {
    li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
    li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
    }
    }
    }
    /* or with jQuery:
    $(document).ready(function(){
    $('#cssdropdown li.headlink').hover(
    function() { $('ul', this).css('display', 'block'); },
    function() { $('ul', this).css('display', 'none'); });
    });
    */
    </script>
    </head>



    <body>
    <table align="center" Width="1100" border="2">
    <tr>
    <td colspan="3">
    <div id="wrapper">
    <br>
    <div id="fb">
    Follow us:<p>
    <a href="http://www.facebook.com"><img src="images/fblogo.png" border="0" alt="Facebook icon">&nbsp;Facebook</a>
    <p>

    <a href="http://www.twitter.com"><img src="images/twlogo.png" border="0" alt="Twitter icon">&nbsp;Twitter</a>
    </div>

    <div id="slogan">
    <br>
    <br>
    <div>
    <a href="emergency.php"><img src="images/247.png" alt="Genuine 24/Seven Service"></a>
    </div>
    </div>

    <div id="logo"><img src="images/logo.png" alt="Aqua Drainage and Plumbing Solutions">
    </div>
    </td>
    </tr>
    <tr align="center">
    <td width="130px">
    </td>
    <td>
    <div id="menu">
    <ul id="cssdropdown">
    <li class="headlink">
    <a href="index.php">
    <img src="images/home-off.png" border="0" alt="home button"></a>
    </li>

    <li class="headlink">
    <img src="images/plumbing-off.png" alt="plumbing button">
    <ul>
    <li><a href="domplumb.php">DOMESTIC</a></li>
    <li><a href="complumb.php">COMMERCIAL</a></li>
    <li><a href="pipework.php">PIPEWORK</a></li>
    </ul>
    </li>

    <li class="headlink">
    <img src="images/drainage-off.png" width="125" height="25" alt="drainage button" >
    <ul>
    <li><a href="domestic.php">DOMESTIC</a></li>
    <li><a href="commercial.php">COMMERCIAL</a></li>
    <li><a href="cctv.php">CCTV</a></li>
    <li><a href="relining.php">RELINING</a></li>
    <li><a href="rerounding.php">REROUNDING</a></li>
    <li><a href="installations.php">INSTALLTIONS</a></li>
    </ul>
    </li>

    <li class="headlink">
    <img src="images/maintenance.png" alt="maintenance button">
    <ul>
    <li><a href="maintenance.php">PLANS</a></li>
    <li><a href="graffiti.php">GRAFFITI</a></li>
    <li><a href="pavement.php">PAVEMENTS</a></li>
    </ul>

    </li>

    <li class="headlink">
    <a href="contact.php">
    <img src="images/contact-us-off.png" border="0" alt="Contact button"></a>

    </li>

    <li class="headlink">
    <img src="images/about-us-off.png" border="0" alt="about button">
    <ul>
    <li><a href="about.php">ABOUT</a></li>
    <li><a href="pricing.php">PRICING</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </td>
    <td width="130px">
    </td>
    </tr>
    </div>
    </td>
    </tr>
    </table>


    And new CSS

    /* General */
    #cssdropdown, #cssdropdown ul { list-style: none; text-align:center;}
    #cssdropdown, #cssdropdown * { padding: 0px; text-align:center;}

    /* Head links */
    #cssdropdown li.headlink { width: 125px; float: left; text-align: center; }
    #cssdropdown li.headlink a { display: block; }

    /* Child lists and links */
    #cssdropdown li.headlink ul { display: none; text-align:center;}
    #cssdropdown li.headlink:hover ul { display: block;}
    #cssdropdown li.headlink ul li a { background-color:#00acee; color:white; font-weight:bold;text-decoration:none;}
    #cssdropdown li.headlink ul li a:hover { background-image:url('images/button2.png'); width:125px;}

    #cssdropdown a {background-image:url('images/button1.png');height:22px; width:125px;font-size:14px;}
    #cssdropdown ul li a:hover { text-decoration: none;}
    #cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 3px;}

    body{
    margin:0px;
    font-size:0.85em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url('images/background.png');
    background-repeat:repeat-x;
    }

    #menu {
    width: 800px;
    left:150px;
    <table align="center" Width="1100" border="2">
    z-index:50;
    text-align:center;
    }

    #wrapper {
    text-align: center;
    width: 1024px;

    }

    #logo{
    width:407px;
    margin: auto;
    }

    #fb {
    width: 100px;
    margin:auto;
    font-weight:bold;
    float: left;
    }

    #fb a{
    text-decoration:none;
    }


    So any help with this very annoying IE6 issue?
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  3. dazza786

    dazza786 Megabyte Poster

    758
    30
    67
    Drop IE6 support, bro..8)
     
    Last edited: Dec 2, 2010
    Certifications: MCP (271, 272, 270, 290, 291, 621, 681, 685), MCDST, MCTS, MCITP, MCSA, Security+, CCA(XA6.5)
  4. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    been trying to say that at work but they wont listen, so have to do it. However the same issue seems to exist on teh customers version of IE8 they have. The menu jumps teh drop down to teh right. Thing is it tested on IE8 on my pc in work and 3 others fine.
    Looks like i'll end up redesigning the menu.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  5. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Hi mate,
    For starters there is a JS error on the page, as below:-

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; LTID=15260; GACID=digitalclub_uk_15260; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; InfoPath.3; .NET4.0C; .NET4.0E; FDM)
    Timestamp: Fri, 3 Dec 2010 13:17:16 UTC


    Message: Syntax error
    Line: 163
    Char: 22
    Code: 0
    URI: http://www.csnet.co.uk/aquadrainage/index.php

    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  6. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Hi NB,

    That error is to do with teh JS for running teh FLV clip i believe, one of our developers added that it and that was after my issue.

    Been working on it some more today. Used different menu JS and css code. That fixed teh IE6 but broke it for all other browsers! I have to say the new code works slicker though in my view. Cant post details of code as its not uploaded yet and on the system at work. Will post Monday maybe.

    Looks like cross browser support is going to plague me a lot as work insists it works from ie6 upwards.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  7. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Well an update on this. The sites almost finished, customer just wants to chnage a few images and a bit of text but done rest.

    However i have one annoying issues left to fix and thats the menu!! It works fine in FF, Chrome and Safari, but will not work correctly in any IE. The menu drops downs as it should but you cant click any of teh links. Well you can but they end up being pixel perfect for where to click in IE. I've tried various positioning and moving things around but just cant get it. Am i missing something?????


    Heres the CSS



    /* new menu */
    #sddm
    { margin: auto;
    z-index: 30;
    position:absolute;
    left:60px;
    top:275px;
    }

    #sddm li
    {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 14px arial;
    }

    #sddm li a
    {
    display: block;
    margin: 0 0 0 0;
    width: 125px;
    height:25px;
    background: #5970B2;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    background-image:url('images/button1.png');
    }

    #floatcell {

    }

    #sddm li a:hover
    { background-image:url('images/button1.png');
    position:relative;
    }

    #sddm div
    { position: absolute;
    visibility: hidden;
    margin: 0;
    }

    #sddm div a
    { position: relative;
    display: block;
    margin: 0;
    width: 125px;
    height:25px;
    text-align: center;
    text-decoration: none;
    background-image:url('images/button1.png');
    color: #ffffff;
    font: 12px arial;
    font-weight:bold;
    }

    #sddm div a:hover
    { background-image:url('images/button2.png');
    color: #FFF;
    width:125px;
    height:25px;
    }

    /*end of new menu css */


    And teh HTML for just one button,


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Aqua Drainage &amp; Plumbing Solutions</title>

    <link rel="stylesheet" href="style.css" type="text/css">

    <script type='text/javascript' language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
    for(var i=0; i<document.images.length; i++)
    {
    var img = document.images
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    {
    var imgID = (img.id) ? "id='" + img.id + "' " : ""
    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
    var imgStyle = "display:inline-block;" + img.style.cssText
    if (img.align == "left") imgStyle = "float:left;" + imgStyle
    if (img.align == "right") imgStyle = "float:right;" + imgStyle
    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
    + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    }
    window.attachEvent("onload", correctPNG);
    </script>

    <script type='text/javascript' language="JavaScript">
    // Copyright 2006-2007 javascript-array.com

    var timeout = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    // open hidden layer
    function mopen(id)
    {
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

    }
    // close showed layer
    function mclose()
    {
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }

    // go close timer
    function mclosetime()
    {
    closetimer = window.setTimeout(mclose, timeout);
    }

    // cancel close timer
    function mcancelclosetime()
    {
    if(closetimer)
    {
    window.clearTimeout(closetimer);
    closetimer = null;
    }
    }

    // close layer when click-out
    document.onclick = mclose;
    </script>
    </head>



    <body>

    <ul id="sddm">


    <li><a href="#"
    onmouseover="mopen('m2')"
    onmouseout="mclosetime()"><table align="center"><tr><td valign="middle">DRAINAGE</td></tr></table></a>
    <div id="m2"
    onmouseover="mcancelclosetime()"
    onmouseout="mclosetime()">
    <a href="domestic.php"><table align="center"><tr><td valign="middle">DOMESTIC</td></tr></table></a>
    <a href="commercial.php"><table align="center"><tr><td valign="middle">COMMERCIAL</td></tr></table></a>
    <a href="cctv.php"><table align="center"><tr><td valign="middle">CCTV</td></tr></table></a>
    <a href="relining.php"><table align="center"><tr><td valign="middle">RELINING</td></tr></table></a>
    <a href="rerounding.php"><table align="center"><tr><td valign="middle">REROUNDING</td></tr></table></a>
    <a href="installations.php"><table align="center"><tr><td valign="middle">INSTALLATIONS</td></tr></table></a>
    </div>
    </li>


    </ul>

    <div style="clear:both"></div>




    I'd liek to sort this as the boss is looking at getting one of teh others to redo the menu in Flash, which makes me feel as if i failed. Cheers in advance.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  8. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Ok so i now know its the tables that center my text that stop the links working in IE. Without these the buttons work. However, without these teh button text isnt vertically centered. If i try Vertical-align:middle in the css it doesnt work. SO does any one have a solution? PLEASE???? I have very little hair left...........:blink
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...