IE6 CSS or JS issue?

twizzle · Dec 2, 2010

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

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 & 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 + ";"
+ "filterrogidXImageTransform.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"> Facebook</a>
<p>

<a href="http://www.twitter.com"><img src="images/twlogo.png" border="0" alt="Twitter icon"> 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;
}

twizzle · Dec 2, 2010

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

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©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 & 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 + ";"
+ "filterrogidXImageTransform.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"> Facebook</a>
<p>

<a href="http://www.twitter.com"><img src="images/twlogo.png" border="0" alt="Twitter icon"> 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?

dazza786 · Dec 2, 2010

Drop IE6 support, bro..

twizzle · Dec 2, 2010

dazza786 said: ↑

Drop IE6 support, bro..
Click to expand...

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.

Notes_Bloke · Dec 3, 2010

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

twizzle · Dec 3, 2010

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.

twizzle · Dec 8, 2010

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 & 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 + ";"
+ "filterrogidXImageTransform.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.

twizzle · Dec 9, 2010

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...........

Log in or Sign up

IE6 CSS or JS issue?

twizzle Gigabyte Poster

twizzle Gigabyte Poster

dazza786 Megabyte Poster

twizzle Gigabyte Poster

Notes_Bloke Terabyte Poster

twizzle Gigabyte Poster

twizzle Gigabyte Poster

twizzle Gigabyte Poster

Share This Page

Navigation

Popular Forums

Useful Links

Log in or Sign up

IE6 CSS or JS issue?

twizzle Gigabyte Poster

twizzle Gigabyte Poster

dazza786 Megabyte Poster

twizzle Gigabyte Poster

Notes_Bloke Terabyte Poster

twizzle Gigabyte Poster

twizzle Gigabyte Poster

twizzle Gigabyte Poster

Share This Page

Useful Searches