Help
This topic is locked
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.
<!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>
#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: 01 August 2008 - 11:52 AM
Reason for edit: Edited to disable emoticons as they were messing with the code output..
MultiQuote
