Brady
A moan, a groan, my life story and how me, a technically minded person just can't seem to fit in with anybody.

Archive for the 'HTML' Category

How to stop Skype replacing telephone numbers on your web design

When a user installs Skype it auto installs some plugins to Internet Explorer and Firefox, that when it sees a telephone number on the webpage a user is viewing it will replace the number and surround it in its own formatting. Now a user can disable this function but as a web designer/developer you cannot guarantee that all your website visitors have it disabled. For those users that don’t have it disabled a nicely designed and placed telephone number in your design is replaced with an ugly and out-of-place number. Yuk! I did some searching and all the posts I could find only said how to disabled the plugin which I didn’t want. I want to disable the plugin or disable the effects of the plugin for all browsers viewing the site I was developing.

I then came across this code:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Put looks like Skype has updated and this code no longer works. For all my web design work I always work with a reset.css style sheet that is like my common settings for CSS that I use in all web development. Well I stumbled across some CSS you can use to hide the effects of the Skype plugin. Here is the nice bit of CSS code that has found its way into my reset.css style sheet:

/**** GET LOST SKYPE! ****/
span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

Hope it helps you out

CSS/HTML – Margin goes/pushes out container block/div

I recently encountered this issue:

Margin Pushing Out

Where the margin on the H1 tag was overflowing into the container above and pushing down the H1 tag’s container. I couldnt figure out why. Here is an example:

http://l3rady.com/wp-content/uploads/2010/09/marginout.html

To my logic the green should be flush against the top and a 10px gap between the red and green. After some digging around I found out the reason this is happening is due to the way block formatting works. To fix this just add overflow:hidden; to the H1 tag’s container. Fixed here:

http://l3rady.com/wp-content/uploads/2010/09/marginfixed.html

CSS Dotted/Dashed HR Style

Ever had problems styling an HR element to be dotted or dashed and look correct in all browsers?

Well here is a simple solution for you:

[CSS]
hr.{
background-color:#fff;
border:#000 1px dotted;
border-style: none none dotted;
color:#fff;
}
[/CSS]