Posts filed under ‘css’

Css Switcher

<html><head><title>Cool and Refreshing</title>
<script>
MaxStyleNum = 3;
StyleNum = parseInt(document.cookie.charAt(6)) % MaxStyleNum + 1;
if (isNaN(StyleNum)) StyleNum = 1;
document.cookie=’style=’ + StyleNum;
StyleFile = “style” + StyleNum + “.css”;
document.writeln(‘<link rel=”stylesheet” type=”text/css” href=”‘ + StyleFile + ‘”>’);
</script>
</head><body>
<h2>Live in Style</h2>
</body></html>

November 5, 2007 at 9:58 am Leave a comment

Css Switcher

<html><head><title>Cool and Refreshing</title>
<script>
MaxStyleNum = 3;
StyleNum = parseInt(document.cookie.charAt(6)) % MaxStyleNum + 1;
if (isNaN(StyleNum)) StyleNum = 1;
document.cookie=’style=’ + StyleNum;
StyleFile = “style” + StyleNum + “.css”;
document.writeln(‘<link rel=”stylesheet” type=”text/css” href=”‘ + StyleFile + ‘”>’);
</script>
</head><body>
<h2>Live in Style</h2>
</body></html>

November 5, 2007 at 9:58 am Leave a comment

solution for paragraph bugs in ie7

here’s the hack which gets rid of this bug in IE7

body>div….. {overflow:hidden;height:1%;}

October 14, 2007 at 5:52 pm Leave a comment

Styling input based on their type with CSS

<style type=”text/css”>
input[type=”text”]
{ width: 200px; }
input[type=”button”]

{ width: 200px;
background:red; }

</style>

body goes here

<body>
Suresh Kumar:<input type=”text” />
<input type=”button” />

</body>

October 14, 2007 at 5:48 pm Leave a comment

IE PNG background fix

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src=’images/misc/sureshkumar.png’);

October 14, 2007 at 5:41 pm Leave a comment

min-height for IE (and all other browsers)

/* for browsers that don’t suck */
.container {
min-height:10em;
height:auto !important;
}

/* for Internet Explorer */
/*\*/
* html .container {
height: 10em;
}
/**/

October 14, 2007 at 5:39 pm Leave a comment

Clear floats without structural markup (CSS)

“.clearfix” is the container that holds all of your floated elements. Works in all browsers that support “float” and “clear”.

clearfix
{
display: inline-table;
/* Hides from IE-mac \*/
height: 1%;
display: block;
/* End hide from IE-mac */
}

html>body .clearfix
{
height: auto;
}
.clearfix:after
{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

October 14, 2007 at 5:37 pm Leave a comment

opacity in IE and Mozilla

<div style=”width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.sureshjain.wordpress.com/.#jpg)”>
</div>
<p style=”width:200px;text-align:justify;position:relative;top:-159px;color:black;”>
This opacity background with
fully opaque text works in
Mozilla and IE.</p>

August 13, 2007 at 8:37 am 1 comment

IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:
<div>
<div class=”hack”>
Your content goes here
</div>
</div>

src=http://www.netmag.co.uk/zine/design-tutorials/20-pro-tips

August 13, 2007 at 5:10 am Leave a comment

em conversion in css

Before converting em’s read the below paragraph carefully.

Originally from the typographic world, an em is a unit that represents the height of the capital letter M for a particular font. In Web pages, one em is the height of the Web browser’s base text size, which is usually 16 pixels. However, anyone can change that base size setting, so 1em may be 16 pixels for one person, but 24 pixels in someone else’s browser. In other words, ems are a relative unit of measurement.

In addition to the browser’s initial font size setting, ems can inherit size information from containing tags. A type size of .9em would make text about 14 pixels tall on most browsers with a 16 pixel base size. But if you have a <p> tag with a font size of .9ems, and then a <strong> tag with a font size of .9ems inside that <p> tag, that <strong> tag’s em size isn’t 14 pixels it’s 12 pixels (16 x .9 x .9). So keep inheritance in mind when you use em values.

August 9, 2007 at 2:53 am Leave a comment

Older Posts Newer Posts


Flickr Photos

Top Clicks

  • None

Blog Stats

  • 730,305 hits