Your articles are very nice thank you…
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
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.
http://stylizedweb.com/2008/02/01/vertical-align-div/
selector { min-height:500px; height:auto; !important height:500px; }
http://stylizedweb.com/2007/12/30/png-transparency-issues/
.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 */
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; }
html { background : url(null) fixed no-repeat; }
#transdiv { filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; }
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+ */ }
<!--[if lt IE 7]> <style> #leftnav li { zoom: 1;} /* haslayout=true */ </style> <![endif]-->
@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;} /**/
Have some feedback? Leave a commentYour articles are very nice thank you…
Great Post !
I enjoyed reading it…
it’s such a good article.
Thank you for sharing css hack.I like your website articles.
Thanks, I found a really cool CSS hack from this post.
Really great information. I am glad to see these here and learn easily
Thankyou this is going to come in very useful.
Your articles are very nice thank you
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!
Great stuff.
Thanks a lot!
That saved my day…
really great informative post, I wish these tips will help me in future, thanks
thank you very much , thanks you for sharing have a nice day
Kann ich mich nur anschliessen, schöne Seite.
Thank you very much.. very nice comment
The opacity-hack is essential, especially in that web2.0 – sites!
Kann ich mich nur anschliessen, schöne Seite. Weiter so…
Beautiful website. I am sure your articles will come in handy.
G8 Article..
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
Many thamks for this greas Css Information
Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW
Excellent list of css-hacks. Thank you very much!
Excellent list, bookmarked for use in the near future.
Excellent resources, very useful for beginners like myself. Thanks
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.
Good job man, some really cool stuff….nice
This is very nice………..
Really this is very useful………….
You should definitely take a look at the free $10 no deposit bonus at SlotoCash. Available now at: SlotoCash. Good luck!
Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW!
Props. keep ‘em coming.
Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW
Methods are really nice.
thanks for the good information and tips!
Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW
What is saying.Really it ripe nice.Yours respectfully.
Thanks for the goods. This is news to me, will be utilized. Scrolling render FTW!
Props. keep ‘em coming.
awesome hacks….! thanks ..! I had problems with CSS..! well explained.!
Thanks.good good articlee
Excellent tuts.
really thanks for this.
i’ve shared this link to all my frnz 
Especially no.10 is really good to know, thx sharing the tipps!
Great post and especially the bit on opacity – been looking for some simple info on this for ages! Great work!!!
herkesin bildiği şeyler.
thanxxxxxxxx
Thanx You Admin or Usher’s Very Good post is :
tnk you be güzelms
bence de burada ki kodları kullanarak bu işler olmaz biraz daha geliştirilmesi gerekli
swine flu alerts
Nice post!
I realy like this css hacks!
Thanks!
=)
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
Tons of resources here. Thank you for share
У нас можно скачать фильм Аватар в отличном качестве
Thank you for the good words, i really appreciate it!
Thanks , Help its very use full
i’m a beginner on html & css.
this site so helpful fo me…
thx a lot.
Thaks
Текст реально порадовал. Постеру респект и уважуха. В поддержку темы тоже делюсь тем, что близко мне – http://www.порно-онлайн.su, Заходите – не пожалеете
Пост реально понравился. Автору респект. В поддержку темы тоже делюсь тем, что близко мне – Скандальные новости мира, Заходите – не пожалеете
двигатели для любых типов морских судов. оборудование для судоремонта. Поставка из Китая.
Компания «SPS Supply» осуществляет снабжение из Китая всех видов комплектующих для судоремонта, для любых типов морских судов.
морская техника
Thanks a lot for sharing your designing experience with the world. I really needed this since a log time. Great! Thanks a lot.
Excellent resources, very useful ! Thanks a lot
Good stuff, pretty handy!
thank you for summary nice site
Very nice, What do you think? Domuz Gribi
Thanks for sharing this list 
very nice, thxxx
Мужчины делятся на достойных и недостойных. Женщины – на молодых и старых.
Смотрите также – телефонный sex
very nice, thxxx
Great set of hacks thanks for the share…
Хорошая мысль. И вообще все в нашем существовании можно связать с детьми. Так что советую глянуть одним глазком – пища для детей
geir
thanks nice
Excellent resources, very useful for beginners like myself. Thanks
very nice, thxxx
Thanks for the article, I’ll definitely be putting some of these to practice.
Good article thanks from sevişme videoları
У моего друга Юрий точный такой же почти
А я бы выразился, что скорее здесь коментаторы лохи. Автор отлично пишет! Так держать! Кстати кому интересно – я обитаю тут.
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.
thanks..what a good info and example. Usefull!!..I must try.
tanx see you later
Интересный блог- ещё зайду
Thanks for this awesome resources.
Cheers,
your button shop from germany
thanks you
thx. nice hack. greetings from your online druckerei from germany
thanks you
nice code.
very good
good comment
thanks admin
on reset css better use * { … }
not all this tags, lmao^^
No matter how much we learn and already know, there’s always something new out there. Thanks for these!
Excellent resources, very useful for beginners like myself. Thanks
Great css hack!! Thanks from Germany.
nice css hack
the code is great,and I have learned much from your code,thanks.
Best regards,
Avery
thanks its really good job
important
you’d better not use ‘!important’, it may not work in some
height:auto; !important
you’d better not use ‘!important’, it may not work in some browser.
nice css hack
Хорошо пишете. Учились где-то или просто с опытом пришло?
Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!
Спасибо вам за сайт, очень полезный ресурс, мне очень нравится
thanks its really good job
Добавил в свои закладки. Теперь буду вас намного почаще читать!
Понравилась статья. А будет ли продолжение ?
Хм, почему-то у меня вместо заголовка блога вопросики…
Добавил в свои закладки. Теперь буду вас намного почаще читать!
Понравилась статья. А будет ли продолжение ?
Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?
Хм, почему-то у меня вместо заголовка блога вопросики…
i like the concept of bed and bookshelf very much
yeah
yess this is the best
thanks in advance
ı learned some knowlagde for yours.
Thx and good idea
Интересно, а почему так редко блог обновляете?
Все отлично, но вот у любого блога постоянная проблема с трансляцией rss! Хотелось бы и с коментами получать. Но нет. Это вообще решаемо?
Хорошо пишете. Учились где-то или просто с опытом пришло?
Хотя я уже и читал подобные посты, но не дает мне это покоя. Спасибо за пост.
Все отлично, но вот у любого блога постоянная проблема с трансляцией rss! Хотелось бы и с коментами получать. Но нет. Это вообще решаемо?
Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!
Хотя я уже и читал подобные посты, но не дает мне это покоя. Спасибо за пост.
Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?
Вот решил вам немного помочь и послал этот пост в социальные закладки. Очень надеюсь ваш рейтинг возрастет.
Все отлично, но вот у любого блога постоянная проблема с трансляцией rss! Хотелось бы и с коментами получать. Но нет. Это вообще решаемо?
Наткнулся случайно на Ваш блог. Теперь стану постоянно просматривать. Надеюсь, не разочаруете и дальше
Хорошо пишете. Надеюсь, когда-нибудь увижу нечто подобное и на своем блоге…
Спасибо огромное. Почитал и понравилось. Картинок бы ещё.
Хорошо пишете. Надеюсь, когда-нибудь увижу нечто подобное и на своем блоге…
Почему этот вебсайт не имейте другую поддержку языков?
Play Free Online Games, sports games, massive multiplayer games, action games, puzzle games, flash games and more, casual games.
Да, жаль, что обновления на блоге происходят не так часто, как хотелось бы.
Ваш пост навел меня на думки *ушел много думать* …
Что-то футер у вас вправо съехал (в опере при разрешении 1024х768)
Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!
Добавил в свои закладки. Теперь буду вас намного почаще читать!
Спасибо. Уже не первый раз по делу пишете!)
Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?
thanks you
Ваш пост навел меня на думки *ушел много думать* …
i agree, great list.
I’ve been interested in learning how to do the opacity… but never got around to it. thx
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!
Я извиняюсь, что немного не в тему, а что такое RSS? и ка на него подписаться?
Спасибо. Уже не первый раз по делу пишете!)
Спасибо за эту информацию, однако осмелюсь внести долю критики, мне кажется автор перестарался с изложением фактов, и статья получилась довольно академичной и “сухой”.
Hi Dejan,
thanks a lot. Greets from Germany
Понравилась статья. А будет ли продолжение ?
thanks you
yes
thankssss
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
The transparency CSS option is really good, great work!
Great the CSS Reset !!! Thank you.
nice css hacks thanks
good job please thank you much
nice article!! thanks for hacks
It is really great. I also used same technic in my web site and it works.
thanksssssssssssssz
thanks for codes i revenge it
Turkisch free mp3 download.
abuzer thanks to yuuuu
good job please thank you much
thank you
A great list and point 7 helps me directly
great article.
thanks you
thankss very good
This is a great list. Thank you
thanksss
thank u
thankss very good
seo thanks for the css hacks
Thanks for the css hacks and that you share the information
Very very goood ,Thank you…
Thank you.
Thank you.. its helpful
good
thankss
thanks
You made me your subscribe with this post. Good job! Keep up the good posts good bye
Thanks for this great hacks. Saves a lot of pain…
This is a great list. Thank you
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
That’s great!
good job, i will try it, greetings from germany
This is a great list. thank you
thank you for your work!!!
Great stuff this is really what i was looking for..thanks allot!!
Good List. Been searching on google for some specific hacks. Your list had them.
Thanks.
Thanks for article good css lessons
Nice one. Its really Helpfull
hello vebmaster thansk you l love you
This is a great list. Thank you
This is a great list. Thank you very much.
Thanks for the its much appreciated
Thanks for the its much
Ну вы подеритесь еще, нашли о чем поспорить
Thanks for that great list. I was searching a long time for something like your Autoclear-hack – you made my day!
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:
Thanks,
Lautus Design
it was better if you specify the usage of every hack.anyway thanks.
good thanks
thanks
thx. great tipps. like you.
greetings from germany!
thanks you
thanks very.
how do u make th hax work??
hq9g0qw261umyx0k
Wow…very nice list. Thanks for sharing. “10. Good to know” helped me a lot.
Great list!
Cool Hacks.
Thanks you !.
Thanks for sharing with us! 
Dex,
no difference
what difference is between * html and *html for IE6?
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.
thanks great list
Interesting facts.I have bookmarked this site. stephanazs
thank you
great… thanks for sharing…
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
Je vous remercie infiniment pour ces scripts.
Bonne continuation
nice post.. thanks for share!
how can i use dem??? im new
Nice.Thaks for post.
Perfect! Thank you for these hacks. It helps a lot.
But 2. Min-Height doesn’t work:
height:auto; !important
correct:
height:auto !important;
PNG transparency Thank You stylizedweb
A lot of thanks
thank you nice list
Great list! lol, I completely forgot about the tag
Thank you for these css hacks. It helps
nice sharing thank
Recommend this site for great pleasure.
Sehr informative Seite. Vielen Dank für die Infos!
Hi! very amused by the website .
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.
Thanks.
Nice sharing.
Could you please send to me the contacts of developer of your site? It looks so damn good!
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!
Boy, this is some high-class site
just a quick hello and congratulations to your nice website ! i’ll visit you again!
Man, what a well set-up website!
This is one super duper site
Hi! Nice site you got there!
I think that your site is very interesting and nice. Good job !
I just wanted to say WOW! your site is really good and i’m proud to be one of your surfers
great site great site great site BRAVO!
I put my step in to your guestbook like I always
reviews,
Tell me what are you looking for, maybe it’s here
Please let me know if there are any equally great sites like this you can recommend to me. Thanks Again
Hallo thank you for a lovely web site I enjoyed
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
It’s a great website of yours. I surfed by and found it very informative. Bookmarked and check you back in a while
Hallo thank you for a lovely web site I enjoyed
Hi – big thanks (great site!).
thank you nice sharing
reset, opacity, vertical align.
thanks for the contribution
Excellent, its very handy to have all these hacks in one place. Thanks very much.
very nice working.
good nice..
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.
Thank’s a lot for these CSS hacks. It’s fantastic to see again and again what you can do just with CSS.
thank you nice sharing
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
Superb list! It is amazing what you can find on Google!
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.
This is very useful!
Great tips, thank you !
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.
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
very useful information
This is very useful!
CSS always rocks for me and this article is also not an exception
@ 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/
Do you create part two of this Css Hacks
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.
So good hacks..LOL..
@ 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. :-\
Great list and definitely worth a bookmark.
@You’re welcome Dejan. Im using Google Syntax Highlighter for display my code.
A lot of thanks! Very intresting post!
@ Paul
Yes, of course, go Google min height and you will see same code everywhere
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?
Really Handy . Thanks for sharing this.
@ Ross Bruniges
Great, thanks for sharing
so another hack
zoom= 1;
great post thanks for the info
@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 ;>
@Dejan : Ok, thanks. I’ll check back again.
@ 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; }
@ 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!
I thought that the -moz property aren´t necessary today
@ 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
@ 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
Great list. Keep it up!
There is a great javascript-solution for most ie-Hacks and png-transparency:
@ 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
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!
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
great post. i liked it…
i guess you miss one css hack, Tantec hacks.
btw, nice article.. saved this on my bookmark.
@ 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
Some cool hacks i will use. thanks
wow.. i love your article. thanks!
good list, thank you
@ 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/
mac IE is * html>body
MacIE
——————————————————–
* html>body
——————————————————–
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?
@ 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.
Nice list, thanks.
Great list … never mind the order … bookmark!
good list, i just don’t like the order..
on September 7, 2010
Great Post ! very nice thank you…