Enteries RSS (950) 02
2008
11:56 am
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..
Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div
http://stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */
5. Reset CSS
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}
6. Scrolling Render IE
html {
background : url(null) fixed no-repeat;
}
7. Opacity
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8. PRE Tag
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
9. Li Background Repeat IE
<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>
10. Good to know
@charset “UTF-8″;
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
del.icio.us (
StumbleUpon
Digg
Wong it
132 Responses, May 3rd
2008
21:58 pm
Sorry about those spam comments i was away and i have deleted them now, it’s very annoying i know.
Tobias, well i personally don’t like typing captcha over and over again so i’ll leave it like this for now 
and of course thanks for the good words everyone 
May 2nd
2008
2:39 am
Great CSS tips - I’ve actually just used the 2. Min-Height one, which is why I got to this page through Google.
Looks like you have some form spam going on too… 
should add yourself a Captcha on the form 
Very helpful tips here. But maybe you should moderate your comments to stop the idiots like “hi webmaster” polluting your website comments and thus making them more difficult to read for real people then they ought to be?
Great thread! , i like these tips, its looks that i knew just small part of it.
Great tips, i found all information i was looking for, i will use some of them.
I couldn’t understand some parts of this article nnial 2007 - salvatore iaconesi - del.icio.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
March 26th
2008
14:23 pm
Ralph
You are welcome
@Dejan: Thank you for your tip and i read your article with my rss-reader
Amazing… how much comments get on your article… respect.
Ralph
CSS always rocks for me and this article is also not an exception
March 15th
2008
23:36 pm
@ Ralph
Actually i was thinking about doing that
But until then latest post about CSS tips, tricks
http://stylizedweb.com/2008/03/12/most-used-css-tricks/
Thanks so much! I knew most of them but others not. For example opacity - that’s so cool I’m using it on almost every website im creating but used to insert a second hover image.
March 6th
2008
14:08 pm
@ Bryan Miller
I personally don’t use IE5.5 for testing, you could use browser shots for that, and i have used that same code on my
http://stylizedweb.com/2007/12/30/png-transparency-issues/
article
@ Schoolsonweb
thanks, i appreciate it
Some hacks are really great !!!!!!!! Thanx buddy nice work and knowledge you shared here with us.
Transparent png support for IE 6, works very well.
- Usage -
* html - isolates IE6 (5.5?) browser
Always use a direct path to the image file.
Position content inside of the using the “position:relative;” css property.
- The Code -
* html #transparant-background { height:1%; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='namepng',sizingMethod='scale', enabled='true' ); }
Have not tested in IE 5.5, please let me know how it goes.
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code.
7, 8, and 9 are not valid. :-\
@You’re welcome Dejan. Im using Google Syntax Highlighter for display my code.
February 24th
2008
9:31 am
@ Paul
Yes, of course, go Google min height and you will see same code everywhere
February 24th
2008
8:11 am
On No.2 with !important being outside the semicolon, I’m pretty sure that would do absolutely nothing! Have you for sure verified that this is useful?
February 21st
2008
10:22 am
@ Ross Bruniges
Great, thanks for sharing
so another hack
zoom= 1;
@dejan
basically zoom:1 will trigger ‘hasLayout’ on any element ie IE (and therefore fix about 80% of the weird IE layout bugs.
It will invalidate your CSS as it’s a proprietary technique (created by Microsoft) but if it’s in an IE CSS file then who really cares ;>
February 20th
2008
20:12 pm
@ Mark
I accept the critic. Since i do lot of CSS coding i can see what’s the code for, but i guess it’s not really clear to people who are not really into CSS
http://stylizedweb.com/2008/02/14/10-best-css-hacks/#comment-327
You should put some demos out for the codes. It will help people remember if it was an issue for them
On #5, Resetting CSS, instead of specifying:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
why not just use:
* { margin: 0; padding: 0; }
February 20th
2008
13:16 pm
@ Ross Bruniges
I don’t think I’m familiar with it, can you post it here?
You missed out what surely is the best hack ever - zoom: 1. Triggers IE when needed and won’t cause any problems to exisiting styles :>
It’s literally been a life saver on more projects than I can think of!
February 19th
2008
22:44 pm
@ Andrej
Unfortunately i haven’t had a chance to test it more, i was concentrating on my writing lately
But as i said, it is very good idea and i hope next versions will be better, and if you would like to make an update on that article or write a guess post you are welcome
@ Dejan: So, what is your last take on the issue? Did you have any chance to test the google ie7 javascript some more?
When on my on testing server I did not have any of the problems described in your other post…
Maybe you could do an update on that?
thx
February 19th
2008
19:11 pm
@ All
Thanks for the good words, i appreciate it
@ Andrej
I have written about it here
http://stylizedweb.com/2008/01/11/ie7-javascript-library-review/
Nice extensive list there. Seems like you’ve got the most useful and best CSS hacks listed there.
- Dwayne Charrington.
http://www.dwaynecharrington.com
There is a great javascript-solution for most ie-Hacks and png-transparency:
February 18th
2008
20:29 pm
@ Corey & Fiona
Thanks for the critic, well i have used them before and they are all clear to me this way, but as you are saying people who didn’t have to deal with some of them it can seam confusing a bit
I will try to update it with some screen shots or mention them in later articles
February 18th
2008
17:29 pm
Awesome list! Would it be possible for you to post examples of each of these? I’d like to see them in action, like what the problem looks like and what the fix looks like.
Anyways, just a thought.
Thanks!
February 18th
2008
14:01 pm
I think links to other articles explaining the hack and the problem in more details would be very useful.
You made me your subscribe with this post. Good job! Keep up the good posts
i guess you miss one css hack, Tantec hacks.
btw, nice article.. saved this on my bookmark.
February 16th
2008
21:35 pm
@ All
You are welcome, I’m glad you liked it
Thank you for this list about CSS Hacks. The link is saved already in my bookmarks
From germany
Ralph
February 16th
2008
1:20 am
good list, thank you
February 15th
2008
10:35 am
@ Jermayn Parker
That’s the good one too
For the selector try http://www.w3.org/TR/REC-CSS2/selector.html
@ Floral
here it is more explained http://www.stopdesign.com/examples/ie5mac-bpf/
In response to your min-height hack I personally use a different hack
http://germworks.net/blog/2007/01/31/width-ie-hack/
What does the ’selector’ do?
February 14th
2008
18:23 pm
@ Barney
Thanks for typo and js error, will be fixed
and also thanks for the good words i appreciate it
About no 6, this fixes a very annoying bug in IE by where when you scroll the page becomes corrupted. It relates to the way IE renders pages. This code places a null background image behind, making IE render the page differently.
This can also be place on the body tag unless it already has a background.
Agreed, very nice list.
I’ve been interested in learning how to do the opacity… but never got around to it.
Thanks!
Just realised how overly critical and nasty that post seemed! I might add I discovered your blog last week and it’s at the top of my RSS list right now. Tastefully grungy, unpretentiously clean design = great starting point for any content. Quickly summarised, useful, & professional guides = great blog content.
PS: gravatar is giving me a javascript error every time I enter a character in this form:
hex_md5 is not defined
updateLivePreview()stylizedweb.com (line 106)
[Break on this error] gravatar = ‘http://www.gravatar.com/avatar.php?gravatar_id=’ + hex_md5(eml) + …
Typo: 1. Vertical aling
What’s this?
6. Scrolling Render IE
7. Opacity — Mozilla doesn’t need the proprietary -moz property anymore. It was the first agent to support the untweaked ‘opacity:’ as I remember.
February 14th
2008
13:25 pm
Nice list, thanks.
February 14th
2008
12:11 pm
good list, i just don’t like the order..
- May 6, 2008: SEO & Web Design » Blog Archive » Watch out: Web Designer’s Awesomeness in February
- Apr 21, 2008: Yararlı Bilgiler » Links for 2008-04-18 [del.icio.us]
- Apr 20, 2008: Rss VURSAKnoktacom » Blog Arşivi » Links for 2008-04-18 [del.icio.us]
- Apr 9, 2008: CSS tricks and tips | Website Ideas
- Mar 29, 2008: Most used CSS tricks
- Mar 28, 2008: PHP MYSQL HP-UX CSS AJAX : iNetVista
- Mar 26, 2008: CCS & Ajax Links for March 24th | False Positives
- Mar 19, 2008: Most used CSS tricks « Share4Vn.com Blog
- Mar 19, 2008: Most used CSS tricks « IT Pearls
- Mar 17, 2008: The essential list of CSS tips, tricks & hacks | Jayhan Loves Design & Japan
- Mar 13, 2008: diarioTHC | Los trucos CSS más usados
- Mar 12, 2008: Most used CSS tricks | StylizedWeb.com
- Mar 9, 2008: 10 hacks CSS para que nuestras páginas se vean bien en varios navegadores | ChristianGL.CoM
- Mar 8, 2008: Fatih Hayrioğlu’nun not defteri » 08 Mart 2008 web’den seçme haberler
- Mar 7, 2008: Wochenendbeilage #19 | REDUXO
- Mar 6, 2008: Urls Sinistras » del.icio.us entre 18/02/2008 e 05/03/2008
- Mar 4, 2008: Ragheb Alama
- Mar 3, 2008: Stylize Web 10 Best Cross Browsers CSS Hacks | GreatSo.com
- Mar 3, 2008: Recursos y Tutoriales » Blog Archive » 500 links de recursos para diseñadores y desarrolladores web
- Mar 2, 2008: Un petite tournante de liens et ressources #1 » Emmanuel de Taillac .fr
- Mar 1, 2008: Weekend Links - Best CSS Hacks, Apache Speed Optimization, Ajax File Upload, Image Theft
- Mar 1, 2008: StylizedWeb, web trends and tutorials | blog.bouctoubou.com - path ton chemin
- Feb 29, 2008: Webcreatives » 10 best CSS hacks | StylizedWeb.com
- Feb 29, 2008: Watch out: Web Designer’s Awesomeness in February « outaTiME
- Feb 29, 2008: Watch out : Web Designer’s Awesomeness of February
- Feb 28, 2008: CSS Ninjitsu Links | dBlogIt by Dustin Boston
- Feb 26, 2008: Iconos, hacks CSS y alguna cosa más… -- los chicos de la playa
- Feb 26, 2008: Cool Sites I’ve Stumbled Upon | Project Wicked | Buzz
- Feb 25, 2008: DimidoBlog » Bloglinks 08/2008
- Feb 25, 2008: 10 Best CSS Hacks | dontgetmad
- Feb 24, 2008: Templaterie Blog
- Feb 24, 2008: Интересный интернет - 24 февраля 2008 | AltBlog.ru
- Feb 23, 2008: BlogBuzz February 23, 2008 » Webmaster-Source
- Feb 23, 2008: 171 trucchi, tecniche e suggerimenti per lo sviluppo di CSS : cssblog.it
- Feb 22, 2008: 10 Användbara CSS Hacks « Webbsajter’s Weblog
- Feb 21, 2008: 10 “Best CSS Hacks” | David Bisset: Web Designer, Coder, Wordpress Guru
- Feb 21, 2008: Link notes dal 18 2 2008 al 20 2 2008 » Sapientone
- Feb 20, 2008: Los 10 mejores trucos para CSS | frogx.three
- Feb 20, 2008: Customer Street CSS | 10 Best CSS Hacks And Tricks
- Feb 20, 2008: links for 2008-02-20 | Funny Stuff is all around
- Feb 20, 2008: links for 2008-02-19 « toonz
- Feb 19, 2008: blog of matthew moore » 10 Best CSS Hacks
- Feb 19, 2008: » I 10 migliori hack per CSS | DoZ-log |
- Feb 19, 2008: digitalhexagon.com » Blog Archive » 10 Best CSS hacks
- Feb 19, 2008: links for 2008-02-19 « Ramblings of an Eccentric Soul…
- Feb 19, 2008: Thiemo Gillissen » 10 best CSS Hacks
- Feb 19, 2008: sabel’s blog » Archiv » Die 10 besten CSS-Hacks
- Feb 19, 2008: iLibrarian » Top Ten Top Lists Roundup
- Feb 19, 2008: hype.yeebase.com
- Feb 19, 2008: Max Design - standards based web design, development and training » Some links for light reading (19/2/08)
- Feb 19, 2008: » CSS Hacks — cne _LOG Archiv
- Feb 19, 2008: links for 2008-02-19 « Bob’s Weblog
- Feb 19, 2008: F-LOG-GE » Blog Archive » 10 nützliche CSS-Hacks
- Feb 19, 2008: » links for 2008-02-19
- Feb 19, 2008: perryboy.com » Blog Archive » Daily Links
- Feb 18, 2008: Web 2.0 Announcer
- Feb 18, 2008: Gilbert "Gilbitron" Pellegrom | 10 Best CSS Hacks
- Feb 18, 2008: www.webeame.net
- Feb 18, 2008: Faydalı 10 CSS Yöntemi - Göstergeç.net
- Feb 18, 2008: Los 10 mejores hacks de CSS | unblogged. A blog about nothing. Yeah, nothing
- Feb 18, 2008: Web 2.0 Announcer
- Feb 18, 2008: 10 best CSS hacks
- Feb 15, 2008: Swerdloff » links for 2008-02-15
- Feb 14, 2008: purrl.net |** urls that purr **|
xXKronosXx:
May 9th
2008
13:40 pm
Thank’s a lot for these CSS hacks. It’s fantastic to see again and again what you can do just with CSS.