Thread Starter
Tremor
(@tremor)
Here is the code in my site to help:
Stylesheet:
.jp-link { behavior: url(http://michaeldowney.net/index.php?wptheme=Knowing-Nothing-Jp) }
Sidebar:
<ul class="language">
<li><a href="http://michaeldowney.net/category/japanese/" class="jp-link" ><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/jp.gif" title="日本語：２回クリックして" alt="Jp"></a></li>
<li><a href="http://michaeldowney.net/index.php?wptheme=Knowing-Nothing-Eng" ><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/gb.gif" title="English: Please press twice" alt="Eng"></a></li>
<li><a href="http://michaeldowney.net/index.php?wptheme=Knowing-Nothing-Eng" ><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/gbjp.gif" title="English and Japanese" alt="Main"></a></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" class="feed"><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/feed.gif" title="Subscribe to my journal by RSS" alt="Feed"></a></li>
</ul>
The Japanese button is the first one, noted with ‘jp-link’.
Any ideas of how I can make the button do these two actions at once?
On my site I use Theme Switcher Reloaded to switch styles (I also wrote a how-to on Theme Switcher Reloaded as a style switcher). I just tried this and it seems to work OK:
http://op111.net/topic/english?wptheme=dk (category English, default style)
http://op111.net/topic/greek?wptheme=dk/dark (category Greek, dark variation)
Is this what you want?
Greetings,
Demetris
Thread Starter
Tremor
(@tremor)
Hey Demetris! Perfect! It worked like a charm 🙂
I also changed the Theme Switcher I had to the one you recommended, for future proofing against updates.
I have one more question that perhaps you could help me with..?
It relates to this topic:
http://wordpress.org/support/topic/210809?replies=3
Basicaly, because of the PNG image hack I applied to combat IE6, the one line of my code jumps up as invalid in the CSS validator. Any ideas why or what I can do to correct it?
Here is the error:
img, div, a, li, span, input, textarea Property behavior doesn't exist : url(nikki/wp-content/themes/kn-eng/iepngfix.htc)
And here is my code:
img, div, a, li, span, input, textarea { behavior: url(nikki/wp-content/themes/kn-eng/iepngfix.htc) }
Thanks again! Nice tutorials by the way – very clear.
Hey, Tremor. Glad it works for you, and also glad you liked the tutorials. 🙂
About the validation issue
I’m not a coder or a designer, but I think this cannot validate, since “behavior” is an IE-specific property, not part of the specification.
One way to have valid CSS while using IE-specific stuff would be conditional comments. E.g.:
<!--[if lte IE 6]>
<style type="text/css">
img, div, a, li, span, input, textarea {
behavior: url(nikki/wp-content/themes/kn-eng/iepngfix.htc);
}
</style>
<![endif]-->
(lte: lower than or equal to)
Such comments are only recognized as CSS by IE, so the validation problem goes away. You’ll have to insert this code into the HTML head in some way — either by editing header.php (I suppose this is the one) or by using a plugin that can insert data into the HTML head (two I use are Extended Options (by Scott Wallick) and HeadSpace2 (the module Raw Data)).
Thread Starter
Tremor
(@tremor)
Hi again. Thanks for your reply. I have moved the CSS to the header successfully and it works as normal on the main page of my site.
However, something curious happens when I go to the category page directly (i.e: http://michaeldowney.net/category/japanese/?wptheme=Knowing-Nothing-Jp) – the hack ceases to work. In other words, on the main page of my site, using both themes, I get transparent borders in IE6, but on the category pages for English and Japanese, on both themes, I get grey borders.
Any insight? I tested this and it also happened on the original setup where the code was in my CSS file – I just didn’t notice it before.
behavior: url(nikki/wp-content/themes/kn-eng/iepngfix.htc);
A relative path to iepingfix.htc reads different location depending on the page showing.
Change it to a absolute path:
behavior: url(/nikki/wp-content/themes/kn-eng/iepngfix.htc);
should fix the problem.
Thread Starter
Tremor
(@tremor)
Hi Yoshi. Thanks for your help! I made the relevant changes and it has corrected the problem. I almost forgot, but you have to edit the htc file itself to match the two absolute urls. In case anyone reads this in the future – don’t forget!
Here is the new code in the header:
<!--[if lte IE 6]>
<style type="text/css">
img, div, a, li, span, input, textarea {behavior: url(/nikki/wp-content/themes/kn-eng/iepngfix.htc);}
</style>
<![endif]-->
And the code in the htc file:
if (typeof blankImg == 'undefined') var blankImg = '/nikki/wp-content/themes/kn-eng/blank.gif';
What a mess just to get IE6 to play nice, eh?
