Posts Tagged CSS
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>
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!
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.
IE6 HTML CSS div height Extra Space
When you set a HTML div element’s height and width using CSS, you may find that the height rendered on IE6 is not as you expected, it’s thicker than the value you defined. Below is an example:
When you render the following div element in IE6, you will realize that the result is far beyond your imaginaiton
<div style="width:20px; height:1px; background-color:black;"> </div>
The cause of the problem is that IE6 treat line-break as whitespace. So in order to solve this problem, you need to remove the line break, so the following HTML CSS code is the solution to solve the problem:
<div style="width:20px; height:1px; background-color:black;"></div>
Pre YUI CSS Era
Posted by admin in CSS Advanced on January 31, 2008
Recently I have found that YUI CSS was not that holistic. Even before YUI CSS’s release, there were already many people discovered ways to remove the most obvious errors, creating their own default stylesheet, removing or normalizing any element that proves itself problematic across browsers.
There is an interesting article by Tantek Çelik about creating a default scaffolding stylesheet at http://tantek.com/log/2004/09.html#d06t2354. A follow-up by Eric Meyer is located at http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss.
From the problematic information technology and the ascent of CSS techniques, I got one conclusion: In the IT world, there is no ‘Intelligent Design’ only ‘Theory of Evolution’.
CSS – Sprites Irregular shapes
Posted by admin in CSS Advanced on November 18, 2007
Nowadays many CSS designers use CSS sprites instead of sliced images. Dave Shea is one of the first developer came out with this great idea. I mentioned the great advantage of using CSS sprites for rectangle buttons in one of my previous posts(can been viewed here). Recently, I read an article written by Dave Shea, the creator of Zen Garden. From his article, I learned that it was also possible to apply CSS sprites on irregular shapes. The trick is on the master image, instead of just creating two states (hover on and hover off), he split the hover on into many states to avoid overlapping objects.
See the demo below:
Translator
By N2H
