Archive for category CSS

Hide default IE vertical scrollbar

To remove or hide default IE vertical scrollbar is easy. By default, IE displays vertical scrollbar even though the content fit nicely in the window without exceeding the viewport height. You can use CSS overflow:auto to show it only when you need it and hide it when there is no need for it.

html {
	overflow: auto;
}

Hope this helps.

No Comments

Remove IE iframe Background Color

In Firefox and Safari, by default, the iframe background is set to transparent, but in IE, it doesn’t. To make iframe background transparent in IE6 requires setting iframe attributes and background color CSS.

/* in the iframe element */
<iframe src="content.html" allowTransparency="true">
</iframe>

/* in the iframe docuement, in this case content.html */
body {
	background-color:transparent;
}

3 Comments

Remove Textarea Scrollbar

To remove the scrollbar appear at the right of the form textarea is easy. The default scrollbar can be hidden with a simple line of CSS. Below is how you can do it:

<style type="text/css">
textarea {
    overflow:auto;
}
</style>

Hope this helps! :)

2 Comments

Firefox Remove Dotted Line Around Links

Firefox adds dotted line around links, this was not so obvious before since in the past since a link will bring the user to a new page. Now with increasing JavaScript functions on a web page, a link doesn’t by default bring user to a new page, without page reload, the dotted line can look pretty ugly, especially link around images. However with a CSS trick I recently discovered, this problem can be fixed.

* { outline: none; }

If you stumble across this post on the web and have a few thoughts, feel free to comment. :)

Hope this helps!

4 Comments

CSS only superscript

The commonly used method to format superscript in HTML is by doing in the following way:

<sup>hullo world</sup>

To achieve the same effect using CSS, you can set the vertical-align Property:

<style>
span
{
vertical-align:super;
}
</style>
<p>hullo world<span>TM</span></p>

No Comments

CSS Hide Horizontal Overflow

CSS has a overflow property, if you set overflow to auto, the horizontal and vertical overflow may both come out even there is only vertical overflow.

To hide horizontal overflow, you need to use a CSS hack, be aware that this is not valid CSS, but it works in IE6 and above, Firefox and many major browsers.

You can use the CSS below to set horizontal overflow as hidden:

div {
    overflow-x: hidden;
}

No Comments

ie6 min-height hack

IE6 – Internet Explorer 6 has problem rendering CSS property min-height. To assign min-height to HTML element and make it work in IE6+, you need to use a CSS hack.

For instance, if you have an element with id ‘content’, and want to assign min-height as 200px, you need to style the element using CSS in the following way:

#content {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Hope this helps!

No Comments

CSS ie8 Only

CSS ie8 only fix is easy to do, if you use the beta version of Internet Explorer 8, the following conditional tags may not be working

<!--[if IE 8]>
According to the conditional comment this is Internet Explorer 8<br />
<![endif]-->

You may like to try the method below:

<!--[if IE 8.000]>
According to the conditional comment this is Internet Explorer 8<br />
<![endif]-->

No Comments

Safari Only CSS Hack

Sometimes you may need to create a Safari only CSS hack, this can be done with the following CSS hack, for instance, if you want to display background color as red for safari only, all you need to do is:

/*\*/
html>body*.safarihack {background-color: red; }
/**/

In this case, only safari will render the html body background color as red. Hope this helps! :)

No Comments

CSS Firefox top-margin Extra Space


Firefox renders CSS margin-top in such a way that if there are two elements, one inside another, and you set margin-top for the inner element, the outer element collapses the margin-top amount of height. So you may see extra ‘padding’ or ’spacing’ at top of the outer element.

CSS:
.outer {background-color:#FF9900; border:1px solid black; width:150px; height:150px; }
.middle{width:100px; height:100px; background-color:#666666; }
.inner {width:50px; height:50px; background-color:#99CC66; margin-top:20px;}


inner


The solution is to add either a padding-top:

CSS:
.outer-b {background-color:#FF9900; border:1px solid black; width:150px; height:150px; }
.middle-b {width:100px; height:99px; background-color:#666666; padding-top:1px; }
.inner-b {width:50px; height:50px; background-color:#99CC66; margin-top:19px;}

inner


or a border-top:

CSS:
.outer-c {background-color:#FF9900; border:1px solid black; width:150px; height:150px; }
.middle-c {width:100px; height:99px; background-color:#666666; border-top:1px solid #666666; }
.inner-c {width:50px; height:50px; background-color:#99CC66; margin-top:19px;}

inner


A clean version of the html file is here.

,

4 Comments