1. Home
  2. Forums Index
  3. Browser Side / CSS 2:05 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Javascript list generated in ie 9, but not ie 7,8

         

mihomes

6:09 am on May 16, 2011 (gmt 0)

10+ Year Member



I recently made some changes to a social media script I made awhile back to make use of a sprite image rather than multiple images. After making the changes everything worked perfect (latest ff and ie9), but then I used the developer tools option in ie to view the page in ie 7 and ie8 standards and the script doesn't even show on the page. Nothing was changed except the css... so can someone tell me what is not compatible with this css in earlier versions of ie? 


#sb22 {margin: 0px; padding:0px; height:22px; display: inline;}
#sb22 li {list-style:none;float:left;padding:0 5px 0 0;line-height:22px;}
#sb22 li a {background:url(/images/social/social.png);background-repeat:no-repeat;display: block;height: 22px;width:22px;}
#sb22 li a.item0 {background-position:0px -16px;}
#sb22 li a.item1 {background-position:-22px -16px;}
#sb22 li a.item2 {background-position:-44px -16px;}
#sb22 li a.item3 {background-position:-66px -16px;}
#sb22 li a.item4 {background-position:-88px -16px;}
#sb22 li a.item5 {background-position:-110px -16px;}
#sb22 li a.item6 {background-position:-132px -16px;}

mihomes

3:03 am on May 17, 2011 (gmt 0)

10+ Year Member



Here is the full code put into a 'test' page for testing purposes. Again, this works fine in ie9, ff4, but will NOT work in ie7 or ie8. Can someone please shed some light on the ie7/8 reason why this is not working?

I cannot find anything in regards to the js or css that would cause older ie to not display correctly. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">  
#social16 {height:16px;font-size:13px; color:#0066ff; font-weight:bold;}
#sb16 {margin: 0px; padding:0px; height:16px; display: inline;line-height:16px;}
#sb16 li {list-style-type:none;float:left;padding:0 5px 0 0;}
#sb16 li a {background:url(social.png);background-repeat:no-repeat;display: block;height: 16px;width:16px;}
#sb16 li a.item0 {background-position:0px 0px;}
#sb16 li a.item1 {background-position:-16px 0px;}
#sb16 li a.item2 {background-position:-32px 0px;}
#sb16 li a.item3 {background-position:-48px 0px;}
#sb16 li a.item4 {background-position:-64px 0px;}
#sb16 li a.item5 {background-position:-80px 0px;}
#sb16 li a.item6 {background-position:-96px 0px;}
</style>
</head>
<body>
<div id="social16"></div>
<script type="text/javascript">
(function(){

var sites = [
['Send to Facebook', 'http://www.facebook.com/sharer.php?u={url}&amp;t={title}'],
['Tweet This', 'http://twitter.com/share?text={title}&amp;url={url}'],
['Send to StumbleUpon', 'http://www.stumbleupon.com/submit?url={url}&amp;title={title}'],
['Digg This', 'http://digg.com/submit?phase=2&amp;url={url}&amp;title={title}'],
['Send to GoogleBuzz', 'http://www.google.com/buzz/post?message={title}&amp;url={url}'],
['Send to Reddit', 'http://reddit.com/submit?url={url}&amp;title={title}'],
['Email to Friends', 'mailto:?subject={title}&amp;body={url}'],
];

var url = encodeURIComponent(location.href),
url = url.replace( "#", "" ),
title = encodeURIComponent(document.title),
html = '<ul id="sb16"><li>Share this ... </li>';

for (var i = 0, len = sites.length; i < len; i++) {
var site = sites[i],
link = site[1].replace('{url}', url).replace('{title}', title);

html += '<li><a class="item' + i + '" href="#" title="' + site[0] + '" onclick="window.open(\'' + link + '\')"></a></li>';
}

html += '</ul>';

document.getElementById("social16").innerHTML=(html);

})();
</script>
</body>
</html>


If anyone can help I would really appreciate it!

alt131

7:39 am on May 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Milhomes,

Thanks for posting the full code - it gave lots more to think about. Have you validated all the css and xhtml? There is nothing in the provided css to cause this, but the xhtml needs a <title> to validate, and that was creating some DOM issues.

However having seen the whole page I'm sure the issue is the javascript. To check, have you tried setting borders on the elements, and viewed source to see what xhtml is being output? I ask because where I am the <div> is being rendered, but is not being populated with the unordered list the script should generate. Plus ie 7&8 are returning a null error message for the line commencing with
link =

That indicates the problem is the script, not the css. There were changes in ie9 that might be affecting this as well. I have the sense this is obvious, but unless someone else looks in and sees it instantly, I suggest pop across to JavaScript and AJAX [webmasterworld.com] and post the script there.

Fotiman

5:17 pm on May 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



but will NOT work in ie7 or ie8.

What do you mean by "will not work"? It looks the same to me in IE8 as it does in Chrome and Firefox, which is that it displays "Share this ..." followed by 3 links that have no text (so you can't see them).

Note, I'm not seeing any JavaScript errors either. However, you should be declaring your variables with var.

alt131

6:07 pm on May 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks Foti - and to any other javascripter's kind enough to drop by - does that suggest the issue might be browser/user security settings?

Fotiman

6:41 pm on May 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm sorry, I DID make one change to the file which may affect the outcome. You have an extra comma at the end of your array:

['Email to Friends', 'mailto:?subject={title}&amp;body={url}'],

should be:

['Email to Friends', 'mailto:?subject={title}&amp;body={url}']

I made that change, went away for a bit, came back to it and forgot that I had changed it, then saw it working. :) So, you may just need to make that one change.

Sorry if that caused any confusion.

mihomes

6:45 pm on May 17, 2011 (gmt 0)

10+ Year Member



Fotiman... you are correct... as it turned out there was an extra comma the the 'sites' array. After removing that it works perfectly fine in all browsers... thanks again for looking at it and hopefully some of you might find some use to the script.

alt131

7:14 pm on May 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Brilliant spotting Fotiman! How you scripters see these things - I'll take ie6 z-index anyday

@mihomes, as you've put so much time into this, just a reminder there was a validation error you may wish to resolve.

Also, now it's working as desired, would you mind sharing your reasons for generating the ul via script - rather than just coding it directly into the html?

mihomes

11:00 pm on May 17, 2011 (gmt 0)

10+ Year Member



alt131 - I'm assuming you are talking about the page title when you refer to <title>. Yes, that is not an issue for me as the above code was a test page I made for this so everything was in one spot.

Basically, I have the .js as an external file, the css added to my external css file, then the <div> where the code is entered on the page.

The reason for doing this as a script is the url and title will always be whatever page the user is browsing. For instance, if I put this in the top right of each page then when the user shares the page with the script it will be that SPECIFIC page url/title. Much easier to write a script than hand coding the specific url/title on each page.

I got the idea from one of the share services and then just decided to write my own. I might add that some simple changes to the css would allow for rollover images as well on all of them.

thanks again for the help - I probably would have never noticed that comma.

mihomes

11:03 pm on May 17, 2011 (gmt 0)

10+ Year Member



edit - there is also the issue of those who have disabled js... if disabled the div will be empty as desired.

alt131

8:52 pm on May 18, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi mihhomes, thanks for that. Yes on <title> - relevant to testing because of complaints elements were not open/closed as required, but this was obviously a test page so not relevant afterwards at all! "Duh" ;)

I wondered if that was your plan. It's just (without appearing ungrateful for foti's efforts) I think this could be done in php. So I wondered why you'd specifically chosen javascript given it is vulnerable to being turned off - when php would allow you to catch a greater % of users.

mihomes

9:22 pm on May 18, 2011 (gmt 0)

10+ Year Member



alt131...

Yes, it would be much easier in php, however, I am moving away from php for ONLY those pages which require it. In the past I was parsing htm/html as php so I could include php code snippets in my pages and they would work. I have decided for a few reasons to remove this method so js became the answer.

...and, lets face it... how many people have js turned off these days?

coopster

6:38 pm on May 25, 2011 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



Brilliant spotting Fotiman! How you scripters see these things - I'll take ie6 z-index anyday


Not to answer for Fotiman but I'm fairly certain he codes much as I do using validators. The IDE I use is Eclipse and it highlights syntax errors during development. And not just for js, but css, html, xml, php, perl, java, ruby, C, ... you name it. As a matter of fact, there are multiple errors in the JavaScript, starting with "Type mismatch: cannot convert from String[] to any" and there is a duplicate local variable defined (url).

...and, lets face it... how many people have js turned off these days?


Remember, even if your end user has JavaScript turned on it doesn't mean that all search engine crawlers do. And we all know how important that title element is to search engines.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:05 pm May 1, 2026