Tech Blog » CSS http://www.kensfi.com Home is where you hang your @ Wed, 28 Jul 2010 03:30:27 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 4 ways to declare the CSS for IE http://www.kensfi.com/3-ways-to-define-the-css-for-ie/ http://www.kensfi.com/3-ways-to-define-the-css-for-ie/#comments Sun, 18 Apr 2010 16:02:41 +0000 Ken http://www.kensfi.com/?p=1904 In the last years I have been preoccupied of discovering of new methods for targeting IE when declaring the CSS and reducing as much as possible the amount of CSS code written for Internet Explorer and the number of external CSS files.

I even tried to reduce all these external files to only one stylesheet as Google started to add more weight to the page speed, in the last year especially – less CSS files = less server requests = good speed for loading the page.

I’d started (like everyone I guess) adding the style for IE in the header of the pages.

<!--[if IE 6]>
<style type="text/css">
.className {border:1px solid #999;}
</style>
<![endif]-->

…and I moved along the way to created separately style files using the well know IE conditional declarations :

<!--[if IE 6]><link href="/assets/css/site-ie-6.css" rel="stylesheet" type="text/css" /><![endif]-->

After that I discovered another, interesting method, – the method of double declaration. E.g.:

#divName {padding:10px 0 !important; padding:0 /*IE only*/}

Let me explain this a little. Since !important is not recognized by IE you can force one property to be used for FF and other modern browsers (aka Opera, Chrome, Safari) users and for the rest (which is IE obvious) you’ll have to declare it again with the desired parameter as in above example. The downsize of this method is that you you won’t have a perfect control, is addressing to all IE and you can’t target only a specific IE version.

But the most spectacular and revolutionist method which I just discovered (in fact my colleague, Steff, who’s writing about to how to setup a ModX CMS website, showed me this trick):

<body>
<!-- START IE6 open tag declaration-->
<!--[if IE 6]><div id="ie6"><![endif]-->
<!-- END IE6 open tag declaration-->

<div id="content"
<p>here is the entire html code. Everything will go inside of #ie6 wrapper in Internet explorer 6 only!. In this way you will have a new and easy way of targeting some of your DIVs adding #IE6 as parent</p>
</div>

<!-- START IE6 end tag declaration-->
<!--[if IE 6]><![endif]-->
<!-- END IE6 end tag declaration-->
</body>

Possible style:

#content p {width:960px; padding:10px 15px 3px}
#ie6 #content p {width:960px; padding:10px 0 3px}

You can write a “beautiful” message also for readers who are still using IE6, something like this:

<!--[if IE 6]>
<p>Yo brother, Internet explorer 6 sucks! Get rid of it! Try Firefox!</p>
<![endif]-->
]]> http://www.kensfi.com/3-ways-to-define-the-css-for-ie/feed/ 0 How to Indent First Line of Blog Paragraphs http://www.kensfi.com/how-to-indent-first-line-of-blog-paragraphs/ http://www.kensfi.com/how-to-indent-first-line-of-blog-paragraphs/#comments Sun, 19 Oct 2008 14:53:40 +0000 Ken http://www.kensfi.com/?p=159 I’ve been running a while about this thing of indenting automatically the first line of the paragraph. Finally I solved this issue creating a new attribute for the <p> tag (paragraph tag). Is pretty simple to do this.

Go to your css file, open it in notepad and add

text-indent: 2em;

Be sure the code you insert looks like this.

In my css, the p tag is the first and is looking in this manner:

p {text-indent: 2em;}

The only thing remain is that you need to press enter twice to separate one paragraph from other in order to have the first line with indent.



]]> http://www.kensfi.com/how-to-indent-first-line-of-blog-paragraphs/feed/ 9