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.
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;
}
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! :)
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!
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>
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;
}
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!
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]-->
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! :)
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.










































