SOLVED: links not clickable when inside position:absolute of position:fixed div

I used to have this problem a lot.Links could not be clicked.I've done a lot of reading around the net-many saying it is a z-index problem and I should change its' value to z-index:1 or z-index:-111,etc.None of this worked.

Finally I found a very simple solution that works.It was a 'left' problem set to 100% in my css.What I did was change the 'left' setting changing that to a percentage and added a margin-left in pixels.Width or right should also be set to a percentage.

This is what my code looked like.

#yourcss{
left:555px;}

I changed that to a percentage- 50% and then set a margin-left.

#yourcss{
left:50%
margin-left:505px;
}

And that was hit the spot!!

Read more ...

Fixed ad bar with close button!

This piece of code will create a fixed place for your ad with a close button!

<script type="text/javascript">
//<![CDATA[
function closeTopAds() {document.getElementById("exebar").style.display = "none";}
//]]>
</script>
<style>
#exebar{
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of &#39;filter&#39; to &#39;none&#39; */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, transparent 0%, transparent 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, transparent 0%,transparent 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, transparent 0%,transparent 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, transparent 0%,transparent 100%); /* IE10+ */
background: linear-gradient(top, transparent 0%,transparent 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;transparent&#39;, endColorstr=&#39;transparent&#39;,GradientType=0 ); /* IE6-8 */
text-align:center;

position:fixed;
top:10px;
left:50%;
margin-left:505px;
width:160px;
height:100%;
border-bottom: 1px solid transparent;
height: 890px;
position:fixed;
line-height: 2.2em;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,&quot;Helvetica&quot;,sans-serif;
z-index:999
 }
#exebar a{color:#eeff00;text-decoration:none;}
#exebar a:hover{text-decoration:underline;}
  </style>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->

<div id="exebar">
<!--adsense bar right-->

Your ad code here.

<span onclick="closeTopAds();return false;" style="color: red; padding: 0px;">X</span>

</div>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Steal It Otherwise... -->

No ,you got to get the bar in the right place.To do that just increase or decrease the value in green for width in red for height.

Read more ...

custom fonts with css (@face-fonts command)

Want to embed your own fonts in your site to give it style or auto-load custom fonts for some exotic language?You can do that using css with the @font-face command.

In your <b:skin><b:/skin> section add the following code.

<!--custom fonts-->
<style>
@font-face
{font-family: segoe script;
src:url('http://dl.dropboxusercontent.com/s/8sao0jcc1o6fjso/ufonts.com_segoe_script.ttf');}

p.segoe {
font-family:segoe script;
}
</style>
<!--end of custom fonts-->

Replace segoe script with the name of your font and the url in purple with your url with the custom font.Dropbox is a very good place to upload your custom font.Other hosts may give you hard time with the custom font not displaying correctly.
  
Next add this code whereever you want the text to appear in your custom font.

<p class='segoe'>your text here</p>

Now ,whenever you open a <p class='segoe'></p> tag in your posts your custom font will load automatically within your tag.

Here is what my custom font looks like:

Segoe script custom fonts!

Taking it further
The same goes for all other tags like h1,h2,b  and so on.Instead of p.segoe you can define a b.segoe or a h1.segoe and call it with class='segoe'>

You can even create your tags.For example in this page of mine,I wanted to preload fonts for the coptic language so that the visitor does not have to install them on his/her computer.

So I came up with the <cpt> </cpt>.You can use any name you like for tag ,just make sure it does not exist already in html or the language you are coding in.

Then the code will look like this

<style>
@font-face
{font-family: name of your font;
src: url(http://mycopticfonturl.ttf);}

cpt {
font-family:name of my coptic font, Helvetica, Arial, sans-serif;
}
</style>

Now whenever I want to auto-load coptic text in my post I just put it between my new made cpt tags

<cpt>your text</cpt>

Read more ...