Stop ScrollBar Covering the Content – Internet Explorer CSS

While designing one of my wordpress theme (not released yet), I have realized that Internet Explorer is playing something annoying. It’s vertical scrollbar is overlaying the content and I don’t want that.

Stop ScrollBar Covering the Content

Do you think it’s a bug ?

Well, actually not. It’s not a bug, Internet Explorer has a css property called -ms-overflow-style which controls such overlaying behavior. For most of the webdesigns it’s a cool property. Scrollbar is not staying there all the time, it appears only when mouse enters the viewing area, otherwise it’s hidden. But when it shows up it has to overlay the content otherwise content has to make space for the scrollbar. That sounds reasonable.

What if you don’t want such effect and want scrollbar keep staying (not overlaying the content at all and not hiding either) always. I mean the normal way just like other browser treats the scrollbar.

Solution:

Add this CSS into your css file:

html {
-ms-overflow-style: scrollbar;
}

Scrollbar will comeback to it’s place (No more hiding). For more information you can always read about the -ms-overflow-style property.

Easiest Ways to Hide Email Address From Bots Crawlers

Whether you are a blogger (wordpress or any other platform) or just a casual writer who publish online stuff and like to show-up your email address to your readers then there is just one problem. Automatic bots can collect your address and that can be used to send you spam emails.

Spamming is a big hassle and most of the email services are fighting with it but if you pay little attention then you can save yourself from such automated collection of your email address.

Simplest Way to Hide email From Bots

The CSS way: CSS is the easiest way to accomplish this task than other javasript and server-side processing (like PHP, .Net) style.

So there will be 2 parts for this: One is CSS and the other is the element on which this CSS will going to apply.

Below is the CSS this you either need to paste under head tag or place it anywhere on your html page. It will get rendered.

CSS is:

<style> <!– START Hide method1’s b tag  –>
#email b {
display:none;
}
</style> <!– END Hide method1’s b tag  –>

HTML is:

<span id=”email”>user<b>stuffing</b>@<b>stuffing</b>domain.com</span>

Explanation: Although it’s self explanatory. #email is the id tag (used to find the element) which is followed by a b tag. So, wherever there is an HTML element with id=”email” and within that id a b tag (<b>sometext </b>) like in the above html, this CSS will be applied to it.

And the CSS says that it will not display (display:none) whatever is written between <b></b> tags. So what user see is the actual address i.e. user@domain.com and bot will see userstuffing@stuffingdomain.com. Mission accomplished!

Although there are many other ways to do hide email address from bots and I have tested them. But this is the best and easiest.

Benefits of using this method than other javascript or Css methods is:

  • It’s easy to implement and a one time addition of code into style.css file will benefit you throughout your site.
  • If you own a wordpress blog then again adding this little css is easy. So, no need of plugin overload.
  • User can copy and paste your email address like it’s being displayed. Other methods will stop you copying the real email address but the stuffed one.

Adding Border Outline Around Text in HTML CSS [Solved]



In one of my previous article I have explained about choosing text caption color while writing something on a picture or a video. Although I have explained something related to CSS too but today I am taking that in detail. I have tried my best to explain it so that anyone of you can implement it easily.

Adding border or outline around a text is a little tricky and no specific tag is available to accomplish the task but still there is a workaround. We can implement it via text-shadow property.

Adding-Border-Outline-Around-Text-in-HTML-CSS-

Exploiting text-shadow capabilities to create outline of Text :-

text-shadow a brief intro: text-shadow is a used to create shadow of any text.

Explanation:

text-shadow contains 4 elements to understand:-

text-shadow: horizontal-offset vertical-offset blur color

Example:

.outline
{
text-shadow: 1px 1px 0px #000;
color:#fff;
}

Above CSS will create this effect: Example Text .

But that’s not the effect we need. But there is a workaround where we can exploit the power of text-shadow to the limit. We will try to create 4 shadows and align them one for each side (top, right, bottom, left). It’s very simple.

How to create 4 Shadows with one text-shadow property

text-shadow: shadow1, shadow2, shadow3, shadow4;

and these shadows will work like this:

shadow1 : 0px -1px 0 #000 (For Top Shadow)

shadow2: 0px 1px 0 #000 (For Bottom Shadow)

shadow3: 1px 0px 0 #000 (For Right Shadow)

shadow3: -1px 0px 0 #000 (For Left Shadow)

When we combine all these shadows like this then the desired effect is created:

text-shadow: 0px -1px 0 #000, 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000; (Final Effect).

 

How to Create Multiple Shadows for Cool Effects?

Cool Effect

For this effect use this:

text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;

This time I have used its blur property too. Play with text-shadow property and you can create your own custom cool effect.

Why using text-shadow and not image?

There is one straight answer to it. It decreases page size and page load time. Site Load time is one of several search engine ranking parameters. You must take care of that too.The basic rule of designing a site is, if you can accomplish something with CSS then avoid image. Use image only when you have no other choice. CSS are designed for creating effects and you must be smart enough to play with it.

What about browsers like mozilla firefox and IE?

This is important because designers main goal must be of creating effects which can run on all leading web-browsers because unfortunately they are not based upon same library. So, whenever you CSS something always include these two properties too.

1) moz property

2) webkit property

For above effect, standard CSS will be:

.cool-effect
{
-webkit-text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;
-moz-text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;
text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;
}

 How many Shadows Can I create within one text-shadow property?

You can create as many shadows you like. Separate them with comma keep adding more.

text-shadow: shadow1, shadow2, shadow3, shadow4, shadow5, shadow6;