Why register for free on WebRadiance? |
 |
Welcome to WebRadiance forums! WebRadiance is a place for discussion and help on a large range of web design and development related topics such as HTML, CSS, ASP & .NET, PHP and SEO. It is provided for free, without ads and is a friendly place for beginners and professionals alike. By joining us today you can take part in our rapidly growing community. Registering enables you to:
|
IE6 Troubleshooting
(when is that ever NOT the case?!)
  |
 IE6 Troubleshooting, (when is that ever NOT the case?!) |
 Aug 1 2008, 04:01 AM
Post
#1
|
|
 W.R. Private First-Class  Group: Members Posts: 251 Joined: 30-August 07 From: Vienna, Austria Member No.: 586  |
I'm putting some things on eBay and I really want to make it an exceptional design. I'm using CSS, JavaScript & jQuery in addition to the basic HTML they allow for the description (and yes, there are some "disallowed code" errors when I've tested submitting the listing, but I think there's a way around that).
Problem is that IE6 effs up the design as always, and even though I've dealt with numerous IE6 issues, I'm currently stuck with and clueless about this one. jQuery is allowing me to easily make a language switcher (German/English) with two icons at the top and bottom of the description, but IE6 is being really crappy and is moving the photographs obtrusively, partly over the actual text of the description, whenever the language is switched and there is a slideUp/slideDown jQuery animation. Here's my code that goes in the eBay HTML description area, followed by the stylesheet I have on another server, that gets imported by the JavaScript in the HTML. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>MICA eBay Auctions Web-Template</title> </head> <body> <div id="ebay-html-description-container"> <!-- BEGINN eBay-insertable code --> <div id="mica-container"> <script type="text/javascript"> <!-- INSERT JQUERY CODE HERE (couldn't do it here because I got a :wr: error message: too many smileys in post) --> ;(function($){var o=$.scrollTo=function(a,b,c){o.window().scrollTo(a,b,c)};o.defaults={axis:'y',duration:1};o.window=function(){return $($.browser.safari?'body':'html')};$.fn.scrollTo=function(l,m,n){if(typeof m=='object'){n=m;m=0}n=$.extend({},o.defaults,n);m=m||n.speed||n.duration;n.queue=n.queue&&n.axis.length>1;if(n.queue)m/=2;n.offset=j(n.offset);n.over=j(n.over);return this.each(function(){var a=this,b=$(a),t=l,c,d={},w=b.is('html,body');switch(typeof t){case'number':case'string':if(/^([+-]=)?\d+(px)?$/.test(t)){t=j(t);break}t=$(t,this);case'object':if(t.is||t.style)c=(t=$(t)).offset()}$.each(n.axis.split(''),function(i,f){var P=f=='x'?'Left':'Top',p=P.toLowerCase(),k='scroll'+P,e=a[k],D=f=='x'?'Width':'Height';if©{d[k]=c[p]+(w?0:e-b.offset()[p]);if(n.margin){d[k]-=parseInt(t.css('margin'+P))||0;d[k]-=parseInt(t.css('border'+P+'Width'))||0}d[k]+=n.offset[p]||0;if(n.over[p])d[k]+=t[D.toLowerCase()]()*n.over[p] }else d[k]=t[p];if(/^\d+$/.test(d[k]))d[k]=d[k]<=0?0:Math.min(d[k],h(D));if(!i&&n.queue){if(e!=d[k])g(n.onAfterFirst);delete d[k]}});g(n.onAfter);function g(a){b.animate(d,m,n.easing,a&&function(){a.call(this,l)})};function h(D){var b=w?$.browser.opera?document.body:document.documentElement:a;return b['scroll'+D]-b['client'+D]}})};function j(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery); ;(function($){var g=location.href.replace(/#.*/,''),h=$.localScroll=function(a){$('body').localScroll(a)};h.defaults={duration:1e3,axis:'y',event:'click',stop:1};h.hash=function(a){a=$.extend({},h.defaults,a);a.hash=0;if(location.hash)setTimeout(function(){i( 0,location,a)},0)};$.fn.localScroll=function(B){b=$.extend({},h.defaults,B);return(b.persistent||b.lazy)?this.bind(b.event,function(e){var a=$([e.target,e.target.parentNode]).filter©[0];a&&i(e,a,B)}):this.find('a,area').filter©.bind(b.event,function(e){i(e,this,B)}).end().end();function c(){var a=this;return!!a.href&&!!a.hash&&a.href.replace(a.hash,'')==g&&(!b.filter||$(a).is(b.filter))}};function i(e,a,B){var c=a.hash.slice(1),d=document.getElementById©||document.getElementsByName©[0],f;i f(d){e&&e.preventDefault();f=$(b.target||$.scrollTo.window());if(b.lock&&f.is(':animated')||b.onBefore&&b.onBefore.call(a,e,d,f)===!1)return;if(b.stop)f.queue('fx',[]).stop();f.scrollTo(d,B).trigger('notify.serialScroll',[d]);if(b.hash)f.queue(function(){location=a.hash;$(this).dequeue()})}}})(jQuery); window.onload = includeLinks('http://mica.net63.net/style.css'); function includeLinks(css_file) { var css_creator = document.createElement('link'); css_creator.rel = 'stylesheet'; css_creator.type = 'text/css'; css_creator.href = css_file; document.getElementsByTagName('head')[0].appendChild(css_creator); } $(function() { $('.mica-main-description').localScroll({ duration: 500 }); $('.mica-de-button').click(function(){ $('.mica-en').slideUp(800); $('.mica-de').slideDown(800); return false; }); $('.mica-en-button').click(function(){ $('.mica-de').slideUp(800); $('.mica-en').slideDown(800); return false; }); }); </script> <!--[if lt IE 7]> <script type="text/javascript"> $(document).ready(function(){ $('.mica-main-description').localScroll({ duration: 500 }); $('.mica-de-button').click(function(){ $('.mica-en').slideUp(800); $('.mica-de').slideDown(800); return false; }); $('.mica-en-button').click(function(){ $('.mica-de').slideUp(800); $('.mica-en').slideDown(800); return false; }); }); </script> <![endif]--> <img src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/153223551_o.jpg" alt="> Banner <" width="800px" height="154px"> <div class="mica-main-description"> <a href="#" class="mica-de-button" title="Auf Deutsch lesen"></a><a href="#" class="mica-en-button" title="Read in English"></a> <table class="mica-de"> <tr><td><strong>Gegen­stände:</strong></td><td><strong>Zustand:</strong></td></tr> <tr><td><strong><a href="#mica-img01" title="Bild Anzeigen">1 Paar Damenschuhe</a>,</strong> größe 37, glänzend, von superfit</td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img03" title="Bild Anzeigen">1 Paar Damenschuhe</a>,</strong> größe 38, von Dr. Martens</td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img05" title="Bild Anzeigen">1 Kinder-T-Shirt</a>,</strong> “London — England”, von PR Activewear London</td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img06" title="Bild Anzeigen">1 kleines langärmliges Hemd</a>,</strong> von Esprit</td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img07" title="Bild Anzeigen">1 kleines Hemd</a></strong></td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img07" title="Bild Anzeigen">1 kleines Hemd</a>,</strong> von H&M L.O.G.G.</td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img08" title="Bild Anzeigen">1 kleiner Pullover</a>,</strong> von Basic Concept</td><td><strong>so gut wie neu</strong></td></tr> <tr><td><strong><a href="#mica-img09" title="Bild Anzeigen">1 Pullover</a>,</strong> von Christian Dior London</td><td><strong>so gut wie neu</strong></td></tr> </table> <table class="mica-en"> <tr><td><strong>Item/s:</strong></td><td><strong>Condition:</strong></td></tr> <tr><td><strong><a href="#mica-img01" title="View Picture">1 pair of women's shoes</a>,</strong> size 37, shiny, by superfit</td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img03" title="View Picture">1 pair of women's shoes</a>,</strong> size 38, by Dr. Martens</td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img05" title="View Picture">1 kids T-Shirt</a>,</strong> "London — England", by PR Activewear London</td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img06" title="View Picture">1 small short-sleeved shirt</a></strong> by Esprit</td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img07" title="View Picture">1 small shirt</a></strong></td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img07" title="View Picture">1 small shirt</a>,</strong> by H&M L.O.G.G.</td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img08" title="View Picture">1 small sweater</a>,</strong> by Basic Concept</td><td><strong>practically new</strong></td></tr> <tr><td><strong><a href="#mica-img09" title="View Picture">1 sweater</a>,</strong> by Chrisitan Dior London</td><td><strong>practically new</strong></td></tr> </table> <img id="mica-img01" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543121_o.png" width="512px" height="384px" alt="> Product Photo <"><br> <img id="mica-img02" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543160_o.png" width="512px" height="384px" alt="> Product Photo <"><br> <img id="mica-img03" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157542962_o.png" width="512px" height="384px" alt="> Product Photo <"><br> <img id="mica-img04" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543024_o.png" width="384px" height="512px" alt="> Product Photo <"><br> <img id="mica-img05" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543199_o.png" width="512px" height="384px" alt="> Product Photo <"><br> <img id="mica-img06" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543232_o.png" width="384px" height="512px" alt="> Product Photo <"><br> <img id="mica-img07" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543072_o.png" width="512px" height="384px" alt="> Product Photo <"><br> <img id="mica-img08" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/157543262_o.png" width="512px" height="384px" alt="> Product Photo <"><br> <img id="mica-img09" class="mica-last-img" src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/155254103_o.png" width="512px" height="384px" alt="> Product Photo <"> </div> <hr> <div class="mica-de"> <h3><img src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/155252749_o.png" width="34px" height="34px" alt="1.">Hinter­grund - <acronym title="MitArbeiter Charity Auction">MICA</acronym> - Mit­arbeiter Charity Auction</h3> <div class="mica-section"><div class="bottomgradient"></div> Wir sind einige <strong>Mit­arbeiter</strong> der Firma Oracle Austria <abbr title="Gesellschaft mit beschränkter Haftung">GmbH</abbr> und haben in einer privaten Eigen­initiative beschlossen, <strong>Gegen­stände des täg­lichen Gebrauchs, Sammler­stücke und Raritäten</strong> zu sammeln und hier <strong>zu Gunsten karitativer Projekte</strong> und Ein­richt­ungen an­zubieten. <hr class="hr-type2"> Im Besonderen ver­suchen wir eine <strong>Win-Win-Win Situation</strong> her­zu­stellen: <ul> <li>Der Abgeber erhält die Chance sich karitativ zu betätigen (<abbr title="beziehungsweise">bzw</abbr>. sich auch Dingen oder Gegen­ständen zu ent­ledigen, für die er Platz gewinnen möchte).</li> <li>Der Käufer kommt in den Genuss, benötigte Artikel günstig zu ersteigern und so „sein“ persönliches Schnäppchen zu machen.</li> <li>Der positive und wichtige Effekt ist sicher <strong>der Reinerlös dieser Auktionen, der förderungs­würdigen Projekten zu­fließt.</strong></li> </ul> Wer genaueres wissen will, findet unten im An­schluss <strong>einige laufende Projekte <abbr title="beziehungsweise">bzw</abbr>. Ideen,</strong> die wir unter­stützen möchten. Wir stehen natürlich jeder­zeit Frage und Antwort bzw. unter­richten Sie auch auf Wunsch, was im Laufe der Zeit passiert.<br><br>Wir verstehen diese Charity Auction als unser länger­frist­iges Projekt mit dem Ziel, unterstütz­ungs­würdige und wohl­tätige Ideen und Projekte zu fördern. </div> <h3><img src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/155252749_o.png" width="34px" height="34px" alt="2.">Bedingungen</h3> <div class="mica-section"><div class="bottomgradient"></div> <ul> <li>Versand – grund­sätzlich innerhalb der <abbr title="Europäische Union">EU</abbr> — KEINE Ab­holung möglich: Sie bezahlen anfallende Kosten – wir ver­schicken optional auch gerne per Bote (<abbr title="zum Beispiel">zB</abbr>.: Hermes oder <abbr title="Dalsey, Hillblom und Lynn">DHL</abbr>)</li> <li>Voraus­kasse per Überweis­ung, PayPal (geht schnell und einfach – und kostet Sie nur <abbr title="rund">rd</abbr>. 4% vom Gesamt­betrag); wenn wir den Betrag erhalten haben, versenden wir raschest. Manchmal kanns aber auch ein paar Tage dauern.</li> <li>Wir bewerten Sie, nachdem wir Ihre Bewert­ung erhalten haben</li> <li>Wir haben kurze Artikel­beschreib­ungen und wenige Fotos — Wenn Sie weitere Details für Ihr Gebot brauchen, be­ant­worten wir aber gerne Ihre Fra­gen (soweit wir das können).</li> </ul> <strong class="mica-attention">Es handelt sich um einen Privat­verkauf — daher keine Rück­gabe und keine Gewähr­leistung!!</strong> <div class="footer"> <a class="mica-de-button" title="Auf Deutsch lesen"></a><a class="mica-en-button" title="Read in English"></a> </div> </div> </div> <div class="mica-en"> <h3><img src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/155252749_o.png" width="34px" height="34px" alt="1.">Back­ground - <acronym title="MitArbeiter Charity Auction">MICA</acronym> - Employee Charity Auction</h3> <div class="mica-section"><div class="bottomgradient"></div> This is a private initiative of employees of Oracle Austria GmbH. We decided to collect and auction convienence goods, rarities and collectibles for different charitable projects and good causes.<br><br> The idea is pretty simple – the contributor of the item has a chance to donate (or free up some space). The winner of the auction has a chance to make his personal deal. But the most attractive factor – the net profit goes to charitable projects.<br><br> If you’re interested in more details, please find below some information about the projects and ideas currently focused. We understand this project as a longer running initiative to help charitable projects and ideas. Of course, on request we can keep you updated about the outcome of our projects.<br><br> Your additional donations of course are welcome. </div> <h3><img src="http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/155252749_o.png" width="34px" height="34px" alt="2.">Terms & Conditions</h3> <div class="mica-section"><div class="bottomgradient"></div> <ul> <li>Shipping (no personal handover): You pay any and all expenses incurred (shipping costs depending on your location). On request i also ship express or with a carrier (<abbr title="id est">ie</abbr>. DHL)</li> <li>Prepayment per Bank-Wire or paypal (paypal is fast but will costs you additional 4% of the total amount); after having received your payment, we usually ship as soon as possible.</li> <li>I'll leave you my feedback, after having received yours.</li> <li>I'll be glad to answer your questions and provide also more pics on request.</li> </ul> <strong class="mica-attention">This is a private sale – therefore no return and no warranty!!</strong> <div class="mica-footer"> <a href="#" class="mica-de-button" title="Auf Deutsch lesen"></a><a href="#" class="mica-en-button" title="Read in English"></a> </div> </div> </div> </div> <!-- END eBay-insertable code --> </div> </body> </html> CODE #mica-container * { padding:0; margin:0; } #ebay-html-description-container { position:relative; margin:40px; border:1px solid #999; padding:0; background-color:#FFFFBC; } #mica-container { position:relative; background-color:#13c; height:100%; width:800px; padding:10px; padding-top:0; padding-bottom:0; margin:0 auto; font-family:sans-serif; overflow:hidden; text-align:center; } #mica-container img[alt] { color:red; font-weight:bold; font-family:'Courier New', Courier, monospace; } .mica-main-description { position:relative; background-color:#fff; width:100%; border:0; margin-top:5px !important; font-size:105%; background-image:url('http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/153237918_o.png'); background-repeat:repeat-x; background-position:top; } .mica-main-description img { border:3px solid #000; border-collapse:collapse; } .mica-main-description .mica-last-img { border:3px solid #000; margin-bottom:20px !important; border-collapse:collapse; } .mica-main-description table { width:100%; text-align:left; margin-top:inherit; } .mica-main-description table td { width:50%; padding:10px !important; border-bottom:1px solid #333; } .mica-main-description table tr:first-child { background-color:#aaa; border:4px solid #f00; } .mica-main-description table a:link, .mica-main-description table a:visited { text-decoration:none; border-bottom:1px dashed #00a; color:#006; } .mica-main-description table a:hover { text-decoration:none; border-bottom:2px solid #00f; color:#00a; } #mica-container a { outline:none; } #mica-container .mica-section { position:relative; background-color:#eee; padding:10px; padding-bottom:20px; background-repeat:repeat-x; background-position:top; text-align:left; } #mica-container h3 { padding:10px; background-image:url('http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/153237918_o.png'); background-color:#eee; background-repeat:repeat-x; background-position:left top; text-align:left; } .hr-type2 { border:1px dashed #999; margin:10px 0 !important; } #mica-container div ul { margin:20px 50px; list-style:disc; } #mica-container div ul li { padding:5px 0; } .bottomgradient { position:absolute; right:0; bottom:0; left:0; height:10px; background-color:#000; background-repeat:repeat-x; background-position:bottom; } .mica-attention { display:block; font-weight:bold; font-size:120%; text-align:center; } #mica-container abbr, #mica-container acronym { cursor:help; } #mica-container h3 img { vertical-align:middle; padding-right:10px; } .mica-en-button, .mica-de-button { margin:0 auto; display:-moz-inline-block; display:-moz-inline-stack; display:inline-block; width:82px; height:82px; } .mica-en-button { background-image:url('http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/154851156_o.png'); } .mica-de-button { background-image:url('http://img.auctiva.com/imgdata/8/3/7/9/9/1/webimg/154851161_o.png'); } .mica-en-button:hover, .mica-de-button:hover { background-position:bottom; cursor:pointer; } .mica-en { display:none; } .mica-footer { margin-top:20px !important; text-align:center; } I know I could just include the CSS in my HTML (even though it's technically invalid markup, but the eBay pages have an average of 200-300 errors there anyway, so it doesn't really matter) and it would be good if I could find a way to import an external JS file too (with jQuery, so I don't have to have this huge block of compacted code in my HTML), but that's something I'll do later. Right now I would really like to know why the heck IE6 is doing this. I at least want to know if it's a result of IE6's poor CSS or poor JS implementations, or both. I have also been thinking of simply ignoring the IE6 users out there, because it's really getting on my nerves. Please look into my code and see what IE6 does for yourself, even if you also can't find the cause. Maybe you have some other suggestions! Thanks and HAPPY BIRTHDAY!!! PS: My birthday is very close to WebRadiance's birthday, mine is on Aug. 3rd =) This post has been edited by benbramz: Aug 1 2008, 11:52 AM
Reason for edit: Edited to disable emoticons as they were messing with the code output..
--------------------  |
 |
 
|
|
Aug 3 2008, 02:52 AM
Post
#2
|
|
 W.R. Private  Group: Members Posts: 14 Joined: 3-August 08 Member No.: 1,101 |
Hi there temhawk.
As a general rule, IE6 has trouble parsing any JavaScript command and many web designers come across these sort of problems. Firstly i would try eliminating the JS calling on the CSS file and then processing, i may have understood this the wrong way. Your problem may exist in this step. So backup all of your original files and try linking the CSS through the <stylesheet> command in the header of your page. Just a thought, i will keep looking into this one for you, as IE and JS are a little on the tricky side when combined. Regards, Nick -------------------- |
|
|
|
|
Aug 3 2008, 04:01 PM
Post
#3
|
|
|
W.R. Private First-Class Group: Members Posts: 251 Joined: 30-August 07 From: Vienna, Austria Member No.: 586 |
Hi Nick,
I can't edit the header unfortunately, and that's exactly the reason why I have that javascript to simulate as if the stylesheet were in the header by adding in a new link tag. I ended up just putting the stylesheet definitions inline anyway despite its invalidity. still having trouble with the javascript though thanks! -------------------- |
|
|
|
|
Aug 3 2008, 10:23 PM
Post
#4
|
|
|
W.R. Private Group: Members Posts: 14 Joined: 3-August 08 Member No.: 1,101 |
Javascript and IE are really not a great mix at all to say the least. At least Microsoft are starting to get their acts together with IE 8.0, which is still in BETA, but it seems to parse JS alot better then the older versions. As IE7 was a total fluff, majority of people using the internet still tend to use IE6.
I have a fix for you that allows IE to parse the JS code more efficiently. The code is pasted below: QUOTE <!--IE Menu Parse --> <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></script> If you copy and paste this code into the header section of each page, or make an include file and link it within the header, the JS should be parsed sufficiently by IE. I use this code on one of my sites and it does the trick quite nicely. Let me know how it goes. Nick -------------------- |
|
|
|
|
Tags
No Tag inserted yet
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 3rd December 2008 - 08:27 PM |