11 replies to this topic

[HumansAreFriendsNotFood]

I've put 'Sexy Bookmarks' into my new design:

Blog | The Website of Daniel.net

(top-left corner) It shows in every browser except Internet Explorer - any ideas why?

This is where I downloaded it:

Home of the SexyBookmarks WordPress Plugin!

These are the instructions that I followed to integrate it...

http://www.1stwebdes....ge-javascript/

Here's the code in the HTML file:

<div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy" style='position:absolute; left: 55px; top:21px; right:100px; z-index:3'>

     <ul class="socials">

    	<li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>

    	<li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>

    	<li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>

    	<li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>

    	<li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good?">Stumble upon something good?</a></li>

    	<li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>

    	<li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>

    	<li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>

    </ul>

</div>

</p>

Is there anything I an add to this to make it appear in IE? This is also accompanied by a javascript file and a seperate css stylesheet.

Help is urgently needed and most appreciated ^^

[Sinipull]

You posted in the wrong subforum.

[HumansAreFriendsNotFood]

Sinipull said:

You posted in the wrong subforum.

I thought I'd put it in the correct subforum seeing as the plugin is written in Jquery, which is a Javascript library but ok sure - move this thread to wherever you feel it should go mods :)

Any other takers on getting this fixed :confused:

[Sinipull]

You see, This is Java forum, which is totally different thing from JavaScript. :)

(If i would know any JavaScript i would help you)

[HumansAreFriendsNotFood]

Sinipull said:

You see, This is Java forum, which is totally different thing from JavaScript. :)

(If i would know any JavaScript i would help you)

Ok - thanks for the heads up buddy ^^ Hopefully a mod will move this to the correct sub-forum and I'll get a solution (fingers crossed)

[James.H]

Thread moved.

I see that it's not loading in my IE 8. Do you know any examples where it does work in IE ?

[HumansAreFriendsNotFood]

Thanks for moving the thread - I think when I experimented with it (I may have tried to put the plugin in an html document of its own to see if that worked but it just showed the .PNG of all of the images (popped up and down) horizontally - I've seen it implemented in a few blogs that were built on Wordpress, Drupal, Blogspot etc. but not a normal Html page, no. Although, I'm sure this guy:

http://www.1stwebdes....ge-javascript/

...would have said if the plug-in wouldn't work in IE...

Would it help if I posted the Jscript file?

[HumansAreFriendsNotFood]

No I've tried putting in the code into it's own HTML document to see if it a positioning problem but it still doesn't appear...

Would it help if I posted a copy of the Jscript file? I'm guessing that IE having trouble reading this... Here's the CSS link:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/sexy-bookmarks-public.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

I only started learning HTML/CSS etc. a few months ago so bare with me but should I have added a '<style type='text/css'></style>' Jscript equivalent?

Thanks for any help...

[HumansAreFriendsNotFood]

Okay, well I suppose I'll have to stick in a bunch of conditional comments for IE yet again... why oh why can't everyone just ditch it... :P

[James.H]

If only microsoft could get of their backs and fix IE but yes it is important that you try fix it for IE users.

[HumansAreFriendsNotFood]

Sorry to ress an old thread but I was wondering if there is something I can change in the style.css file to make it appear?

div.sexy-bookmarks { margin:20px 0 0 0; clear: both !important; }
div.sexy-bookmarks-expand { height: 29px; overflow: hidden; }
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-caring, .sexy-bookmarks-bg-caring-old, .sexy-bookmarks-bg-love, .sexy-bookmarks-bg-wealth, .sexy-bookmarks-bg-enjoy, .sexy-bookmarks-bg-german { background:url('../images/sexy-trans.png') no-repeat !important; }
div.sexy-bookmarks-bg-sexy { padding: 28px 0 0 10px !important; background-position: left -348px !important; }
div.sexy-bookmarks-bg-caring { padding: 26px 0 0 10px !important; background-position: left 0 !important; }
div.sexy-bookmarks-bg-caring-old { padding: 26px 0 0 10px !important; background-position: left -748px !important; }
div.sexy-bookmarks-bg-love { padding: 26px 0 0 10px !important; background-position: left -1148px !important; }	
div.sexy-bookmarks-bg-wealth { margin-left: 15px !important; padding: 35px 0 0 20px !important; background-position: left -1535px !important; }
div.sexy-bookmarks-bg-enjoy { padding: 26px 0 0 10px !important; background-position: left -1895px !important; }
div.sexy-bookmarks-bg-german { padding:35px 0 0 20px !important; background-position:left -2248px !important; }
div.sexy-bookmarks ul.socials { width:100% !important; margin:0 !important; padding:0 !important; float: left !important; }
div.sexy-bookmarks ul.socials { background:transparent none !important; border:0 none !important; outline:0 none !important; }
div.sexy-bookmarks ul.socials li {
	display:inline !important;
	float:left !important;
	list-style-type:none !important;
	margin:0;
	height:29px !important;
	width:60px !important;
	cursor:pointer !important;
	padding:0 !important;
	background-color:transparent !important;
	border:0 none !important;
	outline:0 none !important;
	clear:right !important;
}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after { content:none !important; }
div.sexy-bookmarks ul.socials a {
	display:block !important;
	width:60px !important;
	height:29px !important;
	text-indent: -9999px !important;
	background-color:transparent !important;
}
div.sexy-bookmarks ul.socials a:hover, div.sexy-bookmarks ul.socials li:hover { background-color:transparent !important; border:0 none !important; outline:0 none !important; }
li.sexy-diigo, li.sexy-diigo:hover, li.sexy-digg, li.sexy-digg:hover, li.sexy-reddit, li.sexy-reddit:hover, li.sexy-stumbleupon, li.sexy-stumbleupon:hover, li.sexy-delicious, li.sexy-delicious:hover, li.sexy-yahoobuzz, li.sexy-yahoobuzz:hover, li.sexy-blinklist, li.sexy-blinklist:hover, li.sexy-technorati, li.sexy-technorati:hover, li.sexy-facebook, li.sexy-facebook:hover, li.sexy-twitter, li.sexy-twitter:hover, li.sexy-myspace, li.sexy-myspace:hover, li.sexy-mixx, li.sexy-mixx:hover, li.sexy-scriptstyle, li.sexy-scriptstyle:hover, li.sexy-designfloat, li.sexy-designfloat:hover, li.sexy-mail, li.sexy-mail:hover, li.sexy-comfeed, li.sexy-comfeed:hover, li.sexy-newsvine, li.sexy-newsvine:hover, li.sexy-devmarks, li.sexy-devmarks:hover, li.sexy-linkedin, li.sexy-linkedin:hover, li.sexy-google, li.sexy-google:hover, li.sexy-misterwong, li.sexy-misterwong:hover, li.sexy-izeby, li.sexy-izeby:hover, li.sexy-twittley, li.sexy-twittley:hover, li.sexy-tipd, li.sexy-tipd:hover, li.sexy-pfbuzz, li.sexy-pfbuzz:hover, li.sexy-friendfeed, li.sexy-friendfeed:hover, li.sexy-blogmarks, li.sexy-blogmarks:hover, li.sexy-fwisp, li.sexy-fwisp:hover, li.sexy-designmoo, li.sexy-designmoo:hover, li.sexy-bobrdobr, li.sexy-bobrdobr:hover, li.sexy-yandex, li.sexy-yandex:hover, li.sexy-memoryru, li.sexy-memoryru:hover, li.sexy-100zakladok, li.sexy-100zakladok:hover, li.sexy-moemesto, li.sexy-moemesto:hover, li.sexy-ning, li.sexy-ning:hover, li.sexy-hackernews, li.sexy-hackernews:hover, li.sexy-identica, li.sexy-identica:hover, li.sexy-printfriendly, li.sexy-printfriendly:hover, li.sexy-designbump, li.sexy-designbump:hover, li.sexy-fleck, li.sexy-fleck:hover, li.sexy-netvibes, li.sexy-netvibes:hover, li.sexy-netvouz, li.sexy-netvouz:hover, li.sexy-nujij, li.sexy-nujij:hover, li.sexy-globalgrind, li.sexy-globalgrind:hover, li.sexy-wikio, li.sexy-wikio:hover, li.sexy-xerpi, li.sexy-xerpi:hover, li.sexy-sphinn, li.sexy-sphinn:hover, li.sexy-blogospherenews, li.sexy-blogospherenews:hover, li.sexy-posterous, li.sexy-posterous:hover, li.sexy-techmeme, li.sexy-techmeme:hover, li.sexy-ekudos, li.sexy-ekudos:hover, li.sexy-pingfm, li.sexy-pingfm:hover, li.sexy-tomuse, li.sexy-tomuse:hover, li.sexy-webblend, li.sexy-webblend:hover, li.sexy-wykop, li.sexy-wykop:hover, li.sexy-blogengage, li.sexy-blogengage:hover, li.sexy-hyves, li.sexy-hyves:hover, li.sexy-pusha, li.sexy-pusha:hover, li.sexy-hatena, li.sexy-hatena:hover, li.sexy-mylinkvault, li.sexy-mylinkvault:hover, li.sexy-slashdot, li.sexy-slashdot:hover, li.sexy-squidoo, li.sexy-squidoo:hover, li.sexy-propeller, li.sexy-propeller:hover, li.sexy-faqpal, li.sexy-faqpal:hover, li.sexy-evernote, li.sexy-evernote:hover, li.sexy-meneame, li.sexy-meneame:hover, li.sexy-bitacoras, li.sexy-bitacoras:hover, li.sexy-jumptags, li.sexy-jumptags:hover, li.sexy-bebo, li.sexy-bebo:hover, li.sexy-n4g, li.sexy-n4g:hover, li.sexy-strands, li.sexy-strands:hover, li.sexy-orkut, li.sexy-orkut:hover, li.sexy-tumblr, li.sexy-tumblr:hover, li.sexy-stumpedia, li.sexy-stumpedia:hover, li.sexy-current, li.sexy-current:hover, li.sexy-blogger, li.sexy-blogger:hover, li.sexy-plurk, li.sexy-plurk:hover { background:url('../images/sexy-sprite.png') no-repeat !important; }
li.sexy-newsvine { background-position:left bottom !important; }
li.sexy-newsvine:hover { background-position:left top !important; }
li.sexy-linkedin { background-position:-70px bottom !important; }
li.sexy-linkedin:hover { background-position:-70px top !important; }
li.sexy-devmarks { background-position:-140px bottom !important; }
li.sexy-devmarks:hover { background-position:-140px top !important; }
li.sexy-google { background-position:-210px bottom !important; }
li.sexy-google:hover { background-position:-210px top !important; }
li.sexy-scriptstyle { background-position:-280px bottom !important; }
li.sexy-scriptstyle:hover { background-position:-280px top !important; }
li.sexy-mail { background-position:-350px bottom !important; }
li.sexy-mail:hover { background-position:-350px top !important; }
li.sexy-comfeed { background-position:-420px bottom !important; }
li.sexy-comfeed:hover { background-position:-420px top !important; }
li.sexy-twitter { background-position:-490px bottom !important; }
li.sexy-twitter:hover { background-position:-490px top !important; }
li.sexy-technorati { background-position:-560px bottom !important; }
li.sexy-technorati:hover { background-position:-560px top !important; }
li.sexy-stumbleupon { background-position:-630px bottom !important; }
li.sexy-stumbleupon:hover { background-position:-630px top !important; }
li.sexy-reddit { background-position:-700px bottom !important; }
li.sexy-reddit:hover { background-position:-700px top !important; }
li.sexy-myspace { background-position:-770px bottom !important; }
li.sexy-myspace:hover { background-position:-770px top !important; }
li.sexy-mixx { background-position:-840px bottom !important; }
li.sexy-mixx:hover { background-position:-840px top !important; }
li.sexy-diigo { background-position:-910px bottom !important; }
li.sexy-diigo:hover { background-position:-910px top !important; }
li.sexy-digg { background-position:-980px bottom !important; }
li.sexy-digg:hover { background-position:-980px top !important; }
li.sexy-designfloat { background-position:-1050px bottom !important; }
li.sexy-designfloat:hover { background-position:-1050px top !important; }
li.sexy-yahoobuzz { background-position:-1120px bottom !important; }
li.sexy-yahoobuzz:hover { background-position:-1120px top !important; }
li.sexy-delicious { background-position:-1190px bottom !important; }
li.sexy-delicious:hover { background-position:-1190px top !important; }
li.sexy-blinklist { background-position:-1260px bottom !important; }
li.sexy-blinklist:hover { background-position:-1260px top !important; }
li.sexy-facebook { background-position:-1330px bottom !important; }
li.sexy-facebook:hover { background-position:-1330px top !important; }
li.sexy-misterwong { background-position:-1400px bottom !important; }
li.sexy-misterwong:hover { background-position:-1400px top !important; }
li.sexy-izeby { background-position:-1470px bottom !important; }
li.sexy-izeby:hover { background-position:-1470px top !important; }
li.sexy-twittley { background-position:-1540px bottom !important; }
li.sexy-twittley:hover { background-position:-1540px top !important; }
li.sexy-tipd { background-position:-1610px bottom !important; }
li.sexy-tipd:hover { background-position:-1610px top !important; }
li.sexy-pfbuzz { background-position:-1680px bottom !important; }
li.sexy-pfbuzz:hover { background-position:-1680px top !important; }
li.sexy-friendfeed { background-position:-1750px bottom !important; }
li.sexy-friendfeed:hover { background-position:-1750px top !important; }
li.sexy-blogmarks { background-position:-1820px bottom !important; }
li.sexy-blogmarks:hover { background-position:-1820px top !important; }
li.sexy-fwisp { background-position:-1890px bottom !important; }
li.sexy-fwisp:hover { background-position:-1890px top !important; }
li.sexy-designmoo { background-position:-1960px bottom !important; }
li.sexy-designmoo:hover { background-position:-1960px top !important; }
li.sexy-bobrdobr { background-position:-2030px bottom !important; }
li.sexy-bobrdobr:hover { background-position:-2030px top !important; }
li.sexy-memoryru { background-position:-2100px bottom !important; }
li.sexy-memoryru:hover { background-position:-2100px top !important; }
li.sexy-100zakladok { background-position:-2170px bottom !important; }
li.sexy-100zakladok:hover { background-position:-2170px top !important; }
li.sexy-yandex { background-position:-2240px bottom !important; }
li.sexy-yandex:hover { background-position:-2240px top !important; }
li.sexy-moemesto { background-position:-2310px bottom !important; }
li.sexy-moemesto:hover { background-position:-2310px top !important; }
li.sexy-marrows { background-position:-2380px bottom !important; }
li.sexy-marrows:hover { background-position:-2380px top !important; }
li.sexy-identica { background-position:-2450px bottom !important; }
li.sexy-identica:hover { background-position:-2450px top !important; }
li.sexy-hackernews { background-position:-2520px bottom !important; }
li.sexy-hackernews:hover { background-position:-2520px top !important; }
li.sexy-ning { background-position:-2590px bottom !important; }
li.sexy-ning:hover { background-position:-2590px top !important; }
li.sexy-designbump { background-position:-2660px bottom !important; }
li.sexy-designbump:hover { background-position:-2660px top !important; }
li.sexy-printfriendly { background-position:-2730px bottom !important; }
li.sexy-printfriendly:hover { background-position:-2730px top !important; }
li.sexy-fleck{ background-position:-2800px bottom !important; }
li.sexy-fleck:hover{ background-position:-2800px top !important; }
li.sexy-netvibes{ background-position:-2870px bottom !important; }
li.sexy-netvibes:hover{ background-position:-2870px top !important; }
li.sexy-netvouz{ background-position:-2940px bottom !important; }
li.sexy-netvouz:hover{ background-position:-2940px top !important; }
li.sexy-nujij{ background-position:-3010px bottom !important; }
li.sexy-nujij:hover{ background-position:-3010px top !important; }
li.sexy-globalgrind{ background-position:-3080px bottom !important; }
li.sexy-globalgrind:hover{ background-position:-3080px top !important; }
li.sexy-wikio{ background-position:-3150px bottom !important; }
li.sexy-wikio:hover{ background-position:-3150px top !important; }
li.sexy-xerpi{ background-position:-3220px bottom !important; }
li.sexy-xerpi:hover{ background-position:-3220px top !important; }
li.sexy-sphinn{ background-position:-3290px bottom !important; }
li.sexy-sphinn:hover{ background-position:-3290px top !important; }
li.sexy-blogospherenews{ background-position:-3360px bottom !important; }
li.sexy-blogospherenews:hover{ background-position:-3360px top !important; }
li.sexy-posterous{ background-position:-3430px bottom !important; }
li.sexy-posterous:hover{ background-position:-3430px top !important; }
li.sexy-techmeme{ background-position:-3500px bottom !important; }
li.sexy-techmeme:hover{ background-position:-3500px top !important; }
li.sexy-ekudos{ background-position:-3570px bottom !important; }
li.sexy-ekudos:hover{ background-position:-3570px top !important; }
li.sexy-pingfm{ background-position:-3640px bottom !important; }
li.sexy-pingfm:hover{ background-position:-3640px top !important; }
li.sexy-tomuse{ background-position:-3710px bottom !important; }
li.sexy-tomuse:hover { background-position:-3710px top !important; }
li.sexy-webblend{ background-position:-3780px bottom !important; }
li.sexy-webblend:hover { background-position:-3780px top !important; }
li.sexy-wykop{ background-position:-3850px bottom !important; }
li.sexy-wykop:hover { background-position:-3850px top !important; }
li.sexy-blogengage{ background-position:-3920px bottom !important; }
li.sexy-blogengage:hover { background-position:-3920px top !important; }
li.sexy-hyves { background-position:-3990px bottom !important; }
li.sexy-hyves:hover { background-position:-3990px top !important; }
li.sexy-pusha { background-position:-4060px bottom !important; }
li.sexy-pusha:hover { background-position:-4060px top !important; }
li.sexy-hatena { background-position:-4130px bottom !important; }
li.sexy-hatena:hover { background-position:-4130px top !important; }
li.sexy-mylinkvault { background-position:-4200px bottom !important; }
li.sexy-mylinkvault:hover { background-position:-4200px top !important; }
li.sexy-slashdot { background-position:-4270px bottom !important; }
li.sexy-slashdot:hover { background-position:-4270px top !important; }
li.sexy-squidoo { background-position:-4340px bottom !important; }
li.sexy-squidoo:hover { background-position:-4340px top !important; }
li.sexy-propeller { background-position:-4410px bottom !important; }
li.sexy-propeller:hover { background-position:-4410px top !important; }
li.sexy-faqpal { background-position:-4480px bottom !important; }
li.sexy-faqpal:hover { background-position:-4480px top !important; }
li.sexy-evernote { background-position:-4550px bottom !important; }
li.sexy-evernote:hover { background-position:-4550px top !important; }
li.sexy-meneame { background-position:-4620px bottom !important; }
li.sexy-meneame:hover { background-position:-4620px top !important; }
li.sexy-bitacoras { background-position:-4690px bottom !important; }
li.sexy-bitacoras:hover { background-position:-4690px top !important; }
li.sexy-jumptags { background-position:-4760px bottom !important; }
li.sexy-jumptags:hover { background-position:-4760px top !important; }
li.sexy-bebo { background-position:-4830px bottom !important; }
li.sexy-bebo:hover { background-position:-4830px top !important; }
li.sexy-n4g { background-position:-4900px bottom !important; }
li.sexy-n4g:hover { background-position:-4900px top !important; }
li.sexy-strands { background-position:-4970px bottom !important; }
li.sexy-strands:hover { background-position:-4970px top !important; }
li.sexy-orkut { background-position:-5040px bottom !important; }
li.sexy-orkut:hover { background-position:-5040px top !important; }
li.sexy-tumblr { background-position:-5110px bottom !important; }
li.sexy-tumblr:hover { background-position:-5110px top !important; }
li.sexy-stumpedia { background-position:-5180px bottom !important; }
li.sexy-stumpedia:hover { background-position:-5180px top !important; }
li.sexy-current { background-position:-5250px bottom !important; }
li.sexy-current:hover { background-position:-5250px top !important; }
li.sexy-blogger { background-position:-5320px bottom !important; }
li.sexy-blogger:hover { background-position:-5320px top !important; }
li.sexy-plurk { background-position:-5390px bottom !important; }
li.sexy-plurk:hover { background-position:-5390px top !important; }

[HumansAreFriendsNotFood]

Just for anyone that comes across this thread with a similar problem to mine, take a look at these links:

Sexy bookmark like effect using pure css : re-cleaned | Web Developer Juice
Wait till I come! Cleaning up the “CSS only sexy bookmark” demo code

This offers the same effect but there is less freedom with the bookmarks... the upside is that it works in IE! In the second article, he just cleans up the CSS I think...