Stay Updated...

Why invest large sums of money on a website when you are going to use photos taken with a $200 camera? 1 week ago@3PointRoss

StylizedWeb is a web design, Wordpress and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Basecamp The Web Design Sketchbook
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

10 best CSS hacks

add to Save to Delicious Save to Stumble Save to Digg

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
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
 
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;}
/**/
 


Leave a comment on Stylized Web Have some feedback? Leave a comment



Talk of the town
  • Bill: As a long time web designer, I have been interested in doing more with my websites to make them SEO friendly. I...
  • gündem online: Thank you for writing this post. It’s exactly what I was looking for.
  • gündem online: Thank you for writing this post. It’s exactly what I was looking for.
  • gündem online: Thank you for writing this post. It’s exactly what I was looking for.
  • gündem online: Thank you for writing this post. It’s exactly what I was looking for. ..
Amigos

What do you think?





422 Responses so far

By matbaa rehberi
on September 7, 2010

Great Post ! very nice thank you…

By düğün davetiyesi
on September 7, 2010

Your articles are very nice thank you…

Great Post !
I enjoyed reading it…

| Web Design | Web Development | WebProject |

By oturma grupları mobilya
on September 3, 2010

it’s such a good article.

By Shahnawaz
on September 2, 2010

Thank you for sharing css hack.I like your website articles.

By Industrial Design
on August 31, 2010

Thanks, I found a really cool CSS hack from this post.

By Davetiye
on August 16, 2010

Really great information. I am glad to see these here and learn easily

By SEO in Nottingham
on August 10, 2010

Thankyou this is going to come in very useful.

By mirc
on August 6, 2010

Your articles are very nice thank you

By Marty Rogers
on July 31, 2010

Some great hacks here, especially the IE ones because we all know how tricky IE is when it comes to CSS compared to other browsers like FF.

Thanks a bundle! Have a great day!

By Buttons Bestellen
on July 22, 2010

Great stuff.
Thanks a lot!
That saved my day…

By Liverpool Builders
on July 20, 2010

really great informative post, I wish these tips will help me in future, thanks

By rottweiler
on July 17, 2010

thank you very much , thanks you for sharing have a nice day

By barkod sistemi
on July 16, 2010

Kann ich mich nur anschliessen, schöne Seite.

Barkod
Barkod sistemi
Barkod okuyucu
Barkod yazıcı

By kayseri emlak
on July 16, 2010

Thank you very much.. very nice comment

By Webdesign
on July 16, 2010

The opacity-hack is essential, especially in that web2.0 – sites!

By Sandra
on July 14, 2010

Kann ich mich nur anschliessen, schöne Seite. Weiter so…

By Lauren
on July 12, 2010

Beautiful website. I am sure your articles will come in handy.

By Kalla
on July 7, 2010

G8 Article..

By How to tweak
on June 28, 2010

These are so nice effects,as m new to web designing i feel like learning everything at the same time.
thnx love all of u your posts

By Wandtattoos
on June 27, 2010

Many thamks for this greas Css Information

By tips seo
on June 27, 2010

Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW

By Online-Medikamente
on June 21, 2010

Excellent list of css-hacks. Thank you very much!

By don tata
on June 21, 2010

Excellent list, bookmarked for use in the near future.

By Criação de Logomarcas
on June 18, 2010

Excellent resources, very useful for beginners like myself. Thanks

By Warren Jerzyszek
on June 11, 2010

Thanks for sharing another useful blog, these are going to be a nice addition to my CSS tricks sheet for future reference… do you know if they all validate with w3c? The minimum height is a good one I never really considered doing it that way. Another morning another thing learnt!

Thanks.

By faceqbe
on May 26, 2010

Good job man, some really cool stuff….nice

By Golak Jena
on May 26, 2010

This is very nice………..

Really this is very useful………….

By Damian Georgopoulos
on May 21, 2010

You should definitely take a look at the free $10 no deposit bonus at SlotoCash. Available now at: SlotoCash. Good luck!

By mobilya modelleri
on May 19, 2010

Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW!

Props. keep ‘em coming.

By cilt bakimi
on May 19, 2010

Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW

By çiçekçi
on May 3, 2010

Methods are really nice.

By clea walford
on April 30, 2010

thanks for the good information and tips!

By Sohbet odalari
on April 24, 2010

Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW

By KUYUMCU KARAGÖZ
on March 11, 2010

What is saying.Really it ripe nice.Yours respectfully.

By Harrison Fry
on February 15, 2010

Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW!

Props. keep ‘em coming.

By Shubham
on February 11, 2010

awesome hacks….! thanks ..! I had problems with CSS..! well explained.!

By saglıkhaberleri
on February 2, 2010

Thanks.good good articlee

By Umarfaruk M
on January 30, 2010

Excellent tuts.

really thanks for this.

i’ve shared this link to all my frnz :-)

By Webstandard-Blog
on January 29, 2010

Especially no.10 is really good to know, thx sharing the tipps!

By SEO Services Nottingham
on January 22, 2010

Great post and especially the bit on opacity – been looking for some simple info on this for ages! Great work!!!

By klip izle
on January 16, 2010

herkesin bildiği şeyler.

By kızlarla sohbet
on January 11, 2010

thanxxxxxxxx

By sohbet
on January 11, 2010

Thanx You Admin or Usher’s Very Good post is :

By criminal defense lawyer
on January 9, 2010

tnk you be güzelms

By çiçek gönder
on January 6, 2010

bence de burada ki kodları kullanarak bu işler olmaz biraz daha geliştirilmesi gerekli

By domuz gribi
on December 31, 2009

swine flu alerts

By Pedro
on December 29, 2009

Nice post!

I realy like this css hacks!
Thanks!
=)

By shoaib
on December 21, 2009

these are just awesome,as m new to web designing i feel like learning everything at the same time.
thnx love all of u guys posts

By Katrina
on December 20, 2009

Tons of resources here. Thank you for share

У нас можно скачать фильм Аватар в отличном качестве

By aksesuar
on December 14, 2009

Thank you for the good words, i really appreciate it!

By Rajeev
on December 10, 2009

Thanks , Help its very use full

By zqOnNodot
on December 8, 2009

i’m a beginner on html & css.
this site so helpful fo me…
thx a lot.

By Domuz Gribi Belirtileri
on November 28, 2009

Thaks

By смотреть порно
on November 16, 2009

Текст реально порадовал. Постеру респект и уважуха. В поддержку темы тоже делюсь тем, что близко мне – http://www.порно-онлайн.su, Заходите – не пожалеете

Пост реально понравился. Автору респект. В поддержку темы тоже делюсь тем, что близко мне – Скандальные новости мира, Заходите – не пожалеете

By ремонт судов
on November 13, 2009

двигатели для любых типов морских судов. оборудование для судоремонта. Поставка из Китая.
Компания «SPS Supply» осуществляет снабжение из Китая всех видов комплектующих для судоремонта, для любых типов морских судов.
морская техника

By wordpress themes
on November 9, 2009

Thanks a lot for sharing your designing experience with the world. I really needed this since a log time. Great! Thanks a lot. :)

By webdesigner freelance
on November 8, 2009

Excellent resources, very useful ! Thanks a lot :)

By Chris - Freelance web designer
on November 8, 2009

Good stuff, pretty handy!

By justin tv
on November 7, 2009

thank you for summary nice site

By Domuz Gribi
on November 5, 2009

Very nice, What do you think? Domuz Gribi

By barhal
on November 5, 2009

Thanks for sharing this list ;)

By domuz gribi
on November 4, 2009

very nice, thxxx

By sex по телефону
on October 29, 2009

Мужчины делятся на достойных и недостойных. Женщины – на молодых и старых.
Смотрите также – телефонный sex

By video
on October 14, 2009

very nice, thxxx

By shaunjudy
on October 4, 2009

Great set of hacks thanks for the share…

By зефир для детей
on September 28, 2009

Хорошая мысль. И вообще все в нашем существовании можно связать с детьми. Так что советую глянуть одним глазком – пища для детей

By abdou
on September 27, 2009

geir

By csi dededektiflik
on September 23, 2009

thanks nice

By druckerei
on September 22, 2009

Excellent resources, very useful for beginners like myself. Thanks

By online druckerei
on September 22, 2009

very nice, thxxx

By Mike
on September 11, 2009

Thanks for the article, I’ll definitely be putting some of these to practice.

By sevişme
on September 4, 2009

Good article thanks from sevişme videoları

By Nanynairl
on September 4, 2009

газ и уголь в России

У моего друга Юрий точный такой же почти

By мир волейбола
on August 31, 2009

А я бы выразился, что скорее здесь коментаторы лохи. Автор отлично пишет! Так держать! Кстати кому интересно – я обитаю тут.

By Godwin
on August 26, 2009

how are can apply this am new in now learning the web design… i will need help over here. how can i can be helped out.

By hasfa
on August 25, 2009

thanks..what a good info and example. Usefull!!..I must try.

By sohbet
on August 23, 2009

tanx see you later

By HiennaAgrisse
on August 21, 2009

Интересный блог- ещё зайду

By Buttons bestellen
on August 19, 2009

Thanks for this awesome resources.

Cheers,
your button shop from germany :-)

By Avery
on August 7, 2009

thanks you

By Online Druckerei
on August 4, 2009

thx. nice hack. greetings from your online druckerei from germany

By izmirde burs veren yerler
on August 3, 2009

thanks you

By personal finance blog
on August 3, 2009

nice code.

By Sikiş izle
on August 3, 2009

very good :)

By Sikiş
on August 3, 2009

good comment

By Sikiş
on August 3, 2009

thanks admin

By Arny R.
on July 26, 2009

on reset css better use * { … }

not all this tags, lmao^^

By Lorne Pike
on July 24, 2009

No matter how much we learn and already know, there’s always something new out there. Thanks for these!

By Bolo
on July 23, 2009

Excellent resources, very useful for beginners like myself. Thanks

By Flyer drucken
on July 22, 2009

Great css hack!! Thanks from Germany.

By www.csidedektiflik.com
on July 20, 2009

nice css hack

By Avery
on July 8, 2009

the code is great,and I have learned much from your code,thanks.

Best regards,

Avery

By admın99
on July 4, 2009

thanks its really good job

By göğüs büyütücü
on June 22, 2009

important
you’d better not use ‘!important’, it may not work in some

By Jack
on June 12, 2009

height:auto; !important
you’d better not use ‘!important’, it may not work in some browser.

By Draje
on June 12, 2009

nice css hack

By jynogor
on June 7, 2009

Хорошо пишете. Учились где-то или просто с опытом пришло?

By gificha
on June 6, 2009

Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!

By rofoxya
on June 6, 2009

Спасибо вам за сайт, очень полезный ресурс, мне очень нравится

By dantel
on May 27, 2009

thanks its really good job

By rylocul
on May 25, 2009

Добавил в свои закладки. Теперь буду вас намного почаще читать!

By rylocul
on May 25, 2009

Понравилась статья. А будет ли продолжение ?

By jepukuq
on May 25, 2009

Хм, почему-то у меня вместо заголовка блога вопросики…

By radazuh
on May 25, 2009

Добавил в свои закладки. Теперь буду вас намного почаще читать!

By kumuvuj
on May 25, 2009

Понравилась статья. А будет ли продолжение ?

By xyebony
on May 25, 2009

Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?

By xyebony
on May 25, 2009

Хм, почему-то у меня вместо заголовка блога вопросики…

By Bursa Evden Eve Nakliyat
on May 24, 2009

i like the concept of bed and bookshelf very much

By Akp Haber
on May 23, 2009

yeah

By Medya Manşet
on May 23, 2009

yess this is the best

By Akp Haber
on May 23, 2009

thanks in advance

By kpss
on May 19, 2009

ı learned some knowlagde for yours.

Thx and good idea

By chulato
on May 15, 2009

Интересно, а почему так редко блог обновляете?

By chulato
on May 15, 2009

Все отлично, но вот у любого блога постоянная проблема с трансляцией rss! Хотелось бы и с коментами получать. Но нет. Это вообще решаемо? :)

By zychady
on May 15, 2009

Хорошо пишете. Учились где-то или просто с опытом пришло?

By komamoc
on May 15, 2009

Хотя я уже и читал подобные посты, но не дает мне это покоя. Спасибо за пост.

By komamoc
on May 15, 2009

Все отлично, но вот у любого блога постоянная проблема с трансляцией rss! Хотелось бы и с коментами получать. Но нет. Это вообще решаемо? :)

By ditujih
on May 15, 2009

Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!

By ditujih
on May 15, 2009

Хотя я уже и читал подобные посты, но не дает мне это покоя. Спасибо за пост.

By lutucho
on May 15, 2009

Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?

By lutucho
on May 15, 2009

Вот решил вам немного помочь и послал этот пост в социальные закладки. Очень надеюсь ваш рейтинг возрастет.

By kosihem
on May 15, 2009

Все отлично, но вот у любого блога постоянная проблема с трансляцией rss! Хотелось бы и с коментами получать. Но нет. Это вообще решаемо? :)

By jasytep
on May 15, 2009

Наткнулся случайно на Ваш блог. Теперь стану постоянно просматривать. Надеюсь, не разочаруете и дальше :)

By kynisaz
on May 15, 2009

Хорошо пишете. Надеюсь, когда-нибудь увижу нечто подобное и на своем блоге…

By kynisaz
on May 14, 2009

Спасибо огромное. Почитал и понравилось. Картинок бы ещё.

By kefasot
on May 14, 2009

Хорошо пишете. Надеюсь, когда-нибудь увижу нечто подобное и на своем блоге…

By kefasot
on May 14, 2009

Почему этот вебсайт не имейте другую поддержку языков?

By oyunindiryukle.blogspot.com
on May 14, 2009

Play Free Online Games, sports games, massive multiplayer games, action games, puzzle games, flash games and more, casual games.

By bosageb
on May 13, 2009

Да, жаль, что обновления на блоге происходят не так часто, как хотелось бы.

By bosageb
on May 13, 2009

Ваш пост навел меня на думки *ушел много думать* …

By hebygaf
on May 13, 2009

Что-то футер у вас вправо съехал (в опере при разрешении 1024х768)

By xyyhewy
on May 13, 2009

Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!

By virabux
on May 13, 2009

Добавил в свои закладки. Теперь буду вас намного почаще читать!

By helefyv
on May 13, 2009

Спасибо. Уже не первый раз по делу пишете!)

By helefyv
on May 13, 2009

Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?

thanks you

By Spourryordivy
on May 10, 2009

Ваш пост навел меня на думки *ушел много думать* …

By msn 10
on May 8, 2009

i agree, great list.
I’ve been interested in learning how to do the opacity… but never got around to it. thx

By Bloggerschmidt
on May 7, 2009

Thanks for this nice article. A little mistake: There should stand

[...] height:auto !important; [...] /* true */

instead of

[...] height:auto; !important [...] /* false */

in case 2 Min-Height. Otherwise great!

By peerePher
on May 6, 2009

Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?

By Lyslespoppino
on May 5, 2009

Спасибо. Уже не первый раз по делу пишете!)

By Lyslespoppino
on May 5, 2009

Спасибо за эту информацию, однако осмелюсь внести долю критики, мне кажется автор перестарался с изложением фактов, и статья получилась довольно академичной и “сухой”.

By Druckereien
on May 5, 2009

Hi Dejan,

thanks a lot. Greets from Germany

By Lyslespoppino
on May 2, 2009

Понравилась статья. А будет ли продолжение ?

By domuz gribi
on April 28, 2009

thanks you

By domuz gribi
on April 28, 2009

yes

By domuz gribi
on April 27, 2009

thankssss

By cody
on April 18, 2009

i think that this website is better..all u have to do is go on to it. then log of steam.then download the thing on the site.and then steam will reappear and all u have to do is log in adn u got sick nasty hax

By seo nottingham
on April 17, 2009

The transparency CSS option is really good, great work!

By informatique
on April 13, 2009

Great the CSS Reset !!! Thank you.

By jackalturk
on April 11, 2009

nice css hacks thanks

By simple websites
on April 6, 2009

good job please thank you much

By perdele si draperii
on March 31, 2009

nice article!! thanks for hacks

By davetiye
on March 27, 2009

It is really great. I also used same technic in my web site and it works.

By izmir araç kiralama
on March 26, 2009

thanksssssssssssssz

By sikiş
on March 24, 2009

thanks for codes i revenge it

By mp3
on March 21, 2009

Turkisch free mp3 download.

By drug abuse
on March 19, 2009

abuzer thanks to yuuuu

By mesothelioma
on March 19, 2009

good job please thank you much

By easy loan
on March 19, 2009

thank you

By Michael Blume
on March 17, 2009

A great list and point 7 helps me directly :-)

By evden eve taşımacılık
on March 16, 2009

great article.

By saç ekimi
on March 14, 2009

thanks you

By key ödemeleri
on March 14, 2009

thankss very good

By saç ekimi
on March 14, 2009

This is a great list. Thank you

By sex hikaye
on March 9, 2009

thanksss

By sikiş
on March 9, 2009

thank u

By davetiye
on March 9, 2009

thankss very good

By seo
on March 9, 2009

seo thanks for the css hacks

By mortimer
on March 9, 2009

Thanks for the css hacks and that you share the information

By cilt bakımı
on March 5, 2009

Very very goood ,Thank you…

By cilt bakımı
on March 5, 2009

Thank you.

By cilt bakımı
on March 5, 2009

Thank you.. its helpful

By oto kiralama
on March 5, 2009

good

By manken
on March 5, 2009

thankss

By örgü
on March 5, 2009

thanks

By e-okul
on February 17, 2009

You made me your subscribe with this post. Good job! Keep up the good posts good bye

By Flyer
on February 13, 2009

Thanks for this great hacks. Saves a lot of pain…

By sohpet
on February 8, 2009

This is a great list. Thank you

By sikis
on February 8, 2009

/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}

/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}

By Serkan
on February 7, 2009

That’s great!

By predigt mp3
on February 2, 2009

good job, i will try it, greetings from germany

By terminblock
on February 1, 2009

This is a great list. thank you

By haftnotizen online
on February 1, 2009

thank you for your work!!!

By Digitaldruck
on January 29, 2009

Great stuff this is really what i was looking for..thanks allot!!

By Document Shredding
on January 18, 2009

Good List. Been searching on google for some specific hacks. Your list had them.

Thanks.

By Bedava Sohbet
on January 17, 2009

Thanks for article good css lessons

By Kuntal
on January 17, 2009

Nice one. Its really Helpfull

By ask sohbet
on December 29, 2008

hello vebmaster thansk you l love you

By turk sohbet
on December 29, 2008

This is a great list. Thank you

By muhabbet
on December 29, 2008

This is a great list. Thank you very much.

By gurbet
on December 29, 2008

Thanks for the its much appreciated

By sohbet
on December 29, 2008

Thanks for the its much

By Георгий
on December 28, 2008

Ну вы подеритесь еще, нашли о чем поспорить :)

By xXKronosXx
on December 16, 2008

Thanks for that great list. I was searching a long time for something like your Autoclear-hack – you made my day!

By Peter Schaefer
on December 12, 2008

This is a great list. Thank you very much. In my experience most compatibility issues arise from poor Style sheets and can be resolved by proper coding. Here is a great post on CSS rules:

http://www.allwebdesignresources.com/webdesignblogs/graphics/30-css-cheat-sheets-quick-reference-guides/

Thanks,
Lautus Design

By amir
on December 12, 2008

it was better if you specify the usage of every hack.anyway thanks.

good thanks

thanks

By Druckerei
on December 7, 2008

thx. great tipps. like you.
greetings from germany!

By chat
on December 3, 2008

thanks you

By arkadas
on November 21, 2008

thanks very.

By ur mom
on November 15, 2008

how do u make th hax work??

By Esperanza Rhodes
on November 12, 2008

hq9g0qw261umyx0k

By Cts
on November 6, 2008

Wow…very nice list. Thanks for sharing. “10. Good to know” helped me a lot.

By Webandsoftwarelearn
on November 6, 2008

Great list!

By Mahbub
on October 28, 2008

Cool Hacks.

By cinsel urunler
on October 22, 2008

Thanks you !.

By milan
on October 20, 2008

Thanks for sharing with us! :D

By Dejan Cancarevic
on October 10, 2008

Dex,
no difference

By dex online
on October 10, 2008

what difference is between * html and *html for IE6?

By Matthew Hunt
on October 4, 2008

These are great and all but NOT ALL of these are hacks.. How is reset css or clearfix hacks? Hacks are generally categorized as non-standard approaches or work arounds.. Maybe you just need that magic #10 for a top 10 list? hehe.

By psycho
on October 1, 2008

thanks great list

By stephanazs
on September 20, 2008

Interesting facts.I have bookmarked this site. stephanazs

By ElazigLee
on September 15, 2008

thank you

By ilyas TEKER
on September 10, 2008

great… thanks for sharing…

By risque
on September 8, 2008

Good scripts, thanks. I’d like to chare with you this page : http://coursgratuits.net/classement-google-pr/

It’s for classifiying results by Page Rank.

good night for everyone

By coursgratuits.net
on September 8, 2008

Je vous remercie infiniment pour ces scripts.

Bonne continuation

By BilgiDeposu
on August 31, 2008

nice post.. thanks for share!

By guest
on August 26, 2008

how can i use dem??? im new

By Şahin
on August 23, 2008

Nice.Thaks for post.

By Nick
on August 19, 2008

Perfect! Thank you for these hacks. It helps a lot.
But 2. Min-Height doesn’t work:
height:auto; !important

correct:
height:auto !important;

By prefabrik
on August 19, 2008

PNG transparency Thank You stylizedweb

By Volkan
on August 12, 2008

A lot of thanks

By Nefret ve Ayrılık Nickleri
on August 8, 2008

thank you nice list

By basicxman
on August 4, 2008

Great list! lol, I completely forgot about the tag

By Michael
on July 28, 2008

Thank you for these css hacks. It helps :-)

By muhabbet kusu budgerigar
on July 25, 2008

nice sharing thank

By visit now
on July 20, 2008

Recommend this site for great pleasure.

By american national life insurance
on July 18, 2008

Sehr informative Seite. Vielen Dank für die Infos!

By contents insurance landlord property insurance quote
on July 17, 2008

Hi! very amused by the website .

By uk grand
on July 12, 2008

Your website is beautifully decorated and easily navigated. I have enjoyed visiting this site today and hope to visit many more times in the future.

By articles
on July 12, 2008

Thanks.
Nice sharing.

By homeowner
on July 10, 2008

Could you please send to me the contacts of developer of your site? It looks so damn good!

By discount
on July 10, 2008

Great Website! It helps me a lot with my tough homework. I’m not so hot in that class :-) Thanks for the hard work, keep it up!

By contents
on July 10, 2008

Boy, this is some high-class site

By video poker kasino
on July 10, 2008

just a quick hello and congratulations to your nice website ! i’ll visit you again!

By infromation
on July 10, 2008

Man, what a well set-up website!

By car insurance for woman
on June 23, 2008

This is one super duper site

By giochi casin online gratis
on June 22, 2008

Hi! Nice site you got there!

By casino online legali
on June 22, 2008

I think that your site is very interesting and nice. Good job !

By vip casino
on June 22, 2008

I just wanted to say WOW! your site is really good and i’m proud to be one of your surfers

By vincere casino
on June 22, 2008

great site great site great site BRAVO!

By casino italiano inlinea casino eurogrant
on June 22, 2008

I put my step in to your guestbook like I always

By Dejan Cancarevic
on June 22, 2008

reviews,
Tell me what are you looking for, maybe it’s here ;)

By reviews
on June 22, 2008

Please let me know if there are any equally great sites like this you can recommend to me. Thanks Again

By Lyrics
on June 19, 2008

Hallo thank you for a lovely web site I enjoyed

By John Sullivan
on June 19, 2008

I think your site is awesome and I will be learning a lot from here and wanted to thank you:)
Hey got a line of code that could round my edges on my site
when I added that lame header
Hey I’m trying
I want to BLOGROLL you this site is TIGHT
Thanks

By online black jack bonus casino code
on June 18, 2008

It’s a great website of yours. I surfed by and found it very informative. Bookmarked and check you back in a while

By online slot game
on June 16, 2008

Hallo thank you for a lovely web site I enjoyed

By holdem poker online
on June 15, 2008

Hi – big thanks (great site!).

By dunya
on June 13, 2008

thank you nice sharing

By alojaweb
on June 13, 2008

reset, opacity, vertical align.

thanks for the contribution

Excellent, its very handy to have all these hacks in one place. Thanks very much.

By ankara
on June 6, 2008

very nice working.

By Orides Tomkiel
on May 28, 2008

good nice..

By Denver Web Design
on May 17, 2008

As a whole, the IE Conditional Statements are vital. They’re so much easier to do than trying to hack css to work with every possible browser.

By xXKronosXx
on May 9, 2008

Thank’s a lot for these CSS hacks. It’s fantastic to see again and again what you can do just with CSS.

By cep program
on May 5, 2008

thank you nice sharing

By Dejan
on May 3, 2008

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 :D

By Zoe
on May 2, 2008

Superb list! It is amazing what you can find on Google!

By Tobias
on May 2, 2008

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 :)

By Ivan
on May 1, 2008

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?

By SERVICES
on April 23, 2008

Great thread! , i like these tips, its looks that i knew just small part of it.

By Widgets
on April 21, 2008

This is very useful!

By Shane
on April 10, 2008

Great tips, thank you !

By Stronghold
on March 28, 2008

Great tips, i found all information i was looking for, i will use some of them.

By Daniel
on March 27, 2008

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.

By Dejan
on March 26, 2008

Ralph
You are welcome ;)

By Ralph
on March 26, 2008

@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

By stronghold
on March 25, 2008

very useful information :)

By Jeremy Smith
on March 20, 2008

This is very useful!

By Welcome to Paradise
on March 18, 2008

CSS always rocks for me and this article is also not an exception

By Dejan
on March 15, 2008

@ 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/

By Ralph
on March 15, 2008

Do you create part two of this Css Hacks ;)

By JanB
on March 9, 2008

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.

By Yiwu
on March 8, 2008

So good hacks..LOL..

By Dejan
on March 6, 2008

@ 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

By Schoolsonweb
on March 6, 2008

Some hacks are really great !!!!!!!! Thanx buddy nice work and knowledge you shared here with us.

By Bryan Miller
on March 6, 2008

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.

By atom
on March 4, 2008

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. :-\

By terry
on March 3, 2008

Great list and definitely worth a bookmark.

By kerberoS
on February 26, 2008

@You’re welcome Dejan. Im using Google Syntax Highlighter for display my code.

By LifeStyle
on February 25, 2008

A lot of thanks! Very intresting post!

By Dejan
on February 24, 2008

@ Paul
Yes, of course, go Google min height and you will see same code everywhere

By Paul
on February 24, 2008

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?

By PraP
on February 21, 2008

Really Handy . Thanks for sharing this.

By Dejan
on February 21, 2008

@ Ross Bruniges
Great, thanks for sharing

so another hack
zoom= 1;

By almog, media
on February 21, 2008

great post thanks for the info

By Ross Bruniges
on February 21, 2008

@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 ;>

By mark
on February 20, 2008

@Dejan : Ok, thanks. I’ll check back again.

By Dejan
on February 20, 2008

@ 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

By mark
on February 20, 2008

You should put some demos out for the codes. It will help people remember if it was an issue for them :)

By Daniel Marino
on February 20, 2008

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; }

By Dejan
on February 20, 2008

@ Ross Bruniges
I don’t think I’m familiar with it, can you post it here?

By Ross Bruniges
on February 20, 2008

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!

By Alex
on February 20, 2008

I thought that the -moz property aren´t necessary today

By Dejan
on February 19, 2008

@ 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 :)

By andrej
on February 19, 2008

@ 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 :)

By Dejan
on February 19, 2008

@ 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/

By Dwayne Charrington
on February 19, 2008

Nice extensive list there. Seems like you’ve got the most useful and best CSS hacks listed there.

- Dwayne Charrington.
http://www.dwaynecharrington.com

By Sarah
on February 19, 2008

Great list. Keep it up!

By andrej
on February 19, 2008

There is a great javascript-solution for most ie-Hacks and png-transparency:

http://code.google.com/p/ie7-js/

By Dejan
on February 18, 2008

@ 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

By Corey
on February 18, 2008

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!

By Fiona
on February 18, 2008

I think links to other articles explaining the hack and the problem in more details would be very useful.

By Gyorgy Fekete
on February 18, 2008

You made me your subscribe with this post. Good job! Keep up the good posts

By Paranaque
on February 18, 2008

great post. i liked it…

By armando
on February 18, 2008

i guess you miss one css hack, Tantec hacks.
btw, nice article.. saved this on my bookmark. :)

By Dejan
on February 16, 2008

@ All
You are welcome, I’m glad you liked it

By Ralph
on February 16, 2008

Thank you for this list about CSS Hacks. The link is saved already in my bookmarks ;)

From germany

Ralph

By Dito
on February 16, 2008

Some cool hacks i will use. thanks

By blacque
on February 16, 2008

wow.. i love your article. thanks! :)

By Marko
on February 16, 2008

good list, thank you

By Dejan
on February 15, 2008

@ 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/

By floral
on February 15, 2008

mac IE is * html>body

By floral
on February 15, 2008

MacIE
——————————————————–
* html>body
——————————————————–

By Jermayn Parker
on February 15, 2008

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?

By Dejan
on February 14, 2008

@ 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.

By Brian Purkiss
on February 14, 2008

Agreed, very nice list.
I’ve been interested in learning how to do the opacity… but never got around to it.

Thanks!

By Barney
on February 14, 2008

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) + …

By Barney
on February 14, 2008

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.

By Ivan Nikolic
on February 14, 2008

Nice list, thanks.

By 3kolone
on February 14, 2008

Great list … never mind the order ;-) … bookmark!

By John
on February 14, 2008

good list, i just don’t like the order..

  1. Jul 3, 2010: Week 9: CSS Extra + Web Multimedia Content « MIA Web Design Study
  2. Apr 13, 2010: Spotlight Ideas » 250 Excellent Blog Articles for Web Designers
  3. Feb 22, 2010: dZero | Tampa Web Design Company | Tampa Web Development ›› Bookmarks that help me design
  4. Dec 16, 2009: 9 Top CSS Essential Skills That Every Web designer Should Learn | DevWebPro
  5. Dec 1, 2009: 250 Top Blog Articles for Web Designers | Advertising News
  6. Dec 1, 2009: 250 Excellent Blog Articles for Web Designers | Advertising News
  7. Oct 30, 2009: 9 Top CSS Essential Skills : Nauman Akhtar
  8. Aug 24, 2009: Mes favoris du 24-08-09
  9. Jul 18, 2009: Bloglinks 08/2008 | DimidoBlog
  10. Jun 14, 2009: The Technology Post for June 11th, 2009 | rapid-DEV.net
  11. May 16, 2009: Tagz | "10 best CSS hacks | StylizedWeb.com" | Comments
  12. Apr 11, 2009: 10 Beste CSS Hacks und Tricks | Dimido.Net
  13. Mar 31, 2009: 我想网 » Blog Archive » 10 best CSS hacks
  14. Mar 21, 2009: her web tasarımcının öğrenmesi gereken 9 önemli css yeteneği |
  15. Jan 2, 2009: Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber
  16. Aug 26, 2008: 9 Top CSS Essential Skills That Every Web designer Should Learn « Kurt’s Rasmussen Class Weblog
  17. Aug 21, 2008: 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net
  18. Aug 18, 2008: Readers Pick: 12 Excellent Websites to Follow if You’re into Web Design | [w3b]ndesign
  19. Aug 14, 2008: Los trucos CSS mas usados | Web Articulos
  20. Aug 12, 2008: CSS tricks and tips
  21. Jun 24, 2008: css hacks
  22. Jun 16, 2008: 48569107e2
  23. Jun 15, 2008: rascunho » Blog Archive » links for 2008-06-15
  24. Jun 5, 2008: best background check
  25. Jun 4, 2008: adderall
  26. May 31, 2008: Webpage Templates Design Your Own Kitchen Kitchen Island Design
  27. May 22, 2008: css hacks
  28. May 21, 2008: Quem nunca usou hacks que atire a primeira pedra [no IE] - Cleiton.net
  29. May 6, 2008: SEO & Web Design » Blog Archive » Watch out: Web Designer’s Awesomeness in February
  30. Apr 21, 2008: Yararlı Bilgiler » Links for 2008-04-18 [del.icio.us]
  31. Apr 20, 2008: Rss VURSAKnoktacom » Blog Arşivi » Links for 2008-04-18 [del.icio.us]
  32. Apr 9, 2008: CSS tricks and tips | Website Ideas
  33. Mar 29, 2008: Most used CSS tricks
  34. Mar 28, 2008: PHP MYSQL HP-UX CSS AJAX : iNetVista
  35. Mar 26, 2008: CCS & Ajax Links for March 24th | False Positives
  36. Mar 19, 2008: Most used CSS tricks « Share4Vn.com Blog
  37. Mar 19, 2008: Most used CSS tricks « IT Pearls
  38. Mar 17, 2008: The essential list of CSS tips, tricks & hacks | Jayhan Loves Design & Japan
  39. Mar 13, 2008: diarioTHC | Los trucos CSS más usados
  40. Mar 12, 2008: Most used CSS tricks | StylizedWeb.com
  41. Mar 9, 2008: 10 hacks CSS para que nuestras páginas se vean bien en varios navegadores | ChristianGL.CoM
  42. Mar 8, 2008: Fatih Hayrioğlu’nun not defteri » 08 Mart 2008 web’den seçme haberler
  43. Mar 7, 2008: Wochenendbeilage #19 | REDUXO
  44. Mar 6, 2008: Urls Sinistras » del.icio.us entre 18/02/2008 e 05/03/2008
  45. Mar 4, 2008: Ragheb Alama
  46. Mar 3, 2008: Stylize Web 10 Best Cross Browsers CSS Hacks | GreatSo.com
  47. Mar 3, 2008: Recursos y Tutoriales » Blog Archive » 500 links de recursos para diseñadores y desarrolladores web
  48. Mar 2, 2008: Un petite tournante de liens et ressources #1 » Emmanuel de Taillac .fr
  49. Mar 1, 2008: Weekend Links - Best CSS Hacks, Apache Speed Optimization, Ajax File Upload, Image Theft
  50. Mar 1, 2008: StylizedWeb, web trends and tutorials | blog.bouctoubou.com - path ton chemin
  51. Feb 29, 2008: Webcreatives » 10 best CSS hacks | StylizedWeb.com
  52. Feb 29, 2008: Watch out: Web Designer’s Awesomeness in February « outaTiME
  53. Feb 29, 2008: Watch out : Web Designer’s Awesomeness of February
  54. Feb 28, 2008: CSS Ninjitsu Links | dBlogIt by Dustin Boston
  55. Feb 26, 2008: Iconos, hacks CSS y alguna cosa más… -- los chicos de la playa
  56. Feb 26, 2008: Cool Sites I’ve Stumbled Upon | Project Wicked | Buzz
  57. Feb 25, 2008: DimidoBlog » Bloglinks 08/2008
  58. Feb 25, 2008: 10 Best CSS Hacks | dontgetmad
  59. Feb 24, 2008: Templaterie Blog
  60. Feb 24, 2008: Интересный интернет - 24 февраля 2008 | AltBlog.ru
  61. Feb 23, 2008: BlogBuzz February 23, 2008 » Webmaster-Source
  62. Feb 23, 2008: 171 trucchi, tecniche e suggerimenti per lo sviluppo di CSS : cssblog.it
  63. Feb 22, 2008: 10 Användbara CSS Hacks « Webbsajter’s Weblog
  64. Feb 21, 2008: 10 “Best CSS Hacks” | David Bisset: Web Designer, Coder, Wordpress Guru
  65. Feb 21, 2008: Link notes dal 18 2 2008 al 20 2 2008 » Sapientone
  66. Feb 20, 2008: Los 10 mejores trucos para CSS | frogx.three
  67. Feb 20, 2008: Customer Street CSS | 10 Best CSS Hacks And Tricks
  68. Feb 20, 2008: links for 2008-02-20 | Funny Stuff is all around
  69. Feb 20, 2008: links for 2008-02-19 « toonz
  70. Feb 19, 2008: blog of matthew moore » 10 Best CSS Hacks
  71. Feb 19, 2008: » I 10 migliori hack per CSS | DoZ-log |
  72. Feb 19, 2008: digitalhexagon.com » Blog Archive » 10 Best CSS hacks
  73. Feb 19, 2008: links for 2008-02-19 « Ramblings of an Eccentric Soul…
  74. Feb 19, 2008: Thiemo Gillissen » 10 best CSS Hacks
  75. Feb 19, 2008: sabel’s blog » Archiv » Die 10 besten CSS-Hacks
  76. Feb 19, 2008: iLibrarian » Top Ten Top Lists Roundup
  77. Feb 19, 2008: hype.yeebase.com
  78. Feb 19, 2008: Max Design - standards based web design, development and training » Some links for light reading (19/2/08)
  79. Feb 19, 2008: » CSS Hacks — cne _LOG Archiv
  80. Feb 19, 2008: links for 2008-02-19 « Bob’s Weblog
  81. Feb 19, 2008: F-LOG-GE » Blog Archive » 10 nützliche CSS-Hacks
  82. Feb 19, 2008: » links for 2008-02-19
  83. Feb 19, 2008: perryboy.com » Blog Archive » Daily Links
  84. Feb 18, 2008: Web 2.0 Announcer
  85. Feb 18, 2008: Gilbert "Gilbitron" Pellegrom | 10 Best CSS Hacks
  86. Feb 18, 2008: www.webeame.net
  87. Feb 18, 2008: Faydalı 10 CSS Yöntemi - Göstergeç.net
  88. Feb 18, 2008: Los 10 mejores hacks de CSS | unblogged. A blog about nothing. Yeah, nothing
  89. Feb 18, 2008: Web 2.0 Announcer
  90. Feb 18, 2008: Web 2.0 Announcer
  91. Feb 18, 2008: 10 best CSS hacks
  92. Feb 15, 2008: Swerdloff » links for 2008-02-15
  93. Feb 14, 2008: purrl.net |** urls that purr **|
  94. Feb 14, 2008: roScripts - Webmaster resources and websites