My Top Ten CSS Tricks

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "My Top Ten CSS Tricks"

[EOBeav]

An outstanding article to go along with Rachel's Andrew's fine book. I'm going to bookmark this one and refer to it next time I'm laying out a fresh style sheet. Just aof suggestion, how about a "CSS Anthology 201" from Rachel some time in the future?

FFS, stop using thoses nasty CSS hacks ! Instead I suggest you to use conditional comments : http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp .

[peach]

nice read, not much new in the beginning but that last tip is so useful, thats much more convenient than what I used to be doing, thanx!

[sabif]

Nice one, Trenton, I'll be using the last tip on a current project. Cheers!

[Will Kelly]

yeah I used something similar to the last tip to show an 'active' image in some graphical css navigation I did recently. Massive time saving considering my previous 'solution' was a rather complex php script.

Good article though for some reason my mobile phone won't identify itself as a handheld which is a bit annoying...

[Tvienti]

I agree with the rest - the last tip was very useful. The rest were a great refresher. Thanks for the tips.

[Paul O'B]

We should also start thinking about ie7 now as well

  .box 
  { 
  width: 80px; 
  height: 35px; 
  } 
  
  html>body .box 
  { 
  width: auto; 
  height: auto; 
  min-width: 80px; 
  min-height: 35px; 
  }

As documented on the msdn blog ie7 will understand child selectors but so far there is no indication than min and max width/height will be implemented. Therefore the above code will fail in ie7.

Edit:

min and max width are now part of ie7 so the above comments above and below can be ignored although they were true for a while.

Conditional comments will be the only way to ensure that ie7 gets the width and height it requires (assuming of course that the characteristics of width and height aren't changed in ie7 either (which would seem to be the case))

[roblewis100]

How timely! I was tearing my hair out due to some disappearing text in I.E., but #6 helped me solve the problem. Thanks.

[Paul O'B]

due to some disappearing text in I.E.

This is basically a "layout" issue see the faq on "haslayout" which will explain 99% of ie's bugs.

Great Article! The IE Only stuff is really useful.

In tip 10 you repeated "#about .about", I bet you meant to write #contact .about

[WarpNacelle]

Wow! Very nice. These always help to starting thinking in new and different directions.

[KeithMcL]

Great Article! This has explained some of the issues I've come across in my designs. Thanks :)

[TheLunchBox]

This is a very well written article and was a good way for me to introduce some basic CSS-tips to some non-CSS savvy designers in my office.

[alexisb]

Originally Posted by Javan

Great Article! The IE Only stuff is really useful.

In tip 10 you repeated "#about .about", I bet you meant to write #contact .about

Hi, actually I think Trenton meant: "#contact .contact"

Regards!

[haseeb]

Trick #10 is really new to me. Thanks Trenton (y)

Thank you for trick #6!
In vain I spent hours and days to figure out that.

[HPin]

Very good article with great tricks.
Thank you

[all4nerds]

Hello

tip 10

.x{/*commands for highlighted navigation go here*/}

<ul>
<li><a href="#" class="home x">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

[smith288]

Your tip to move content off the screen with a -1000 absolute position will get you in trouble with Google. My company got banned from search results and Google explained that as being the main culprit.

Wow! your tips are brilliant! I cant wait to use some of these scripts!

[eXplosive]

#6 has been bugging me for a while. I will look into to making that fix.

[cssnut]

hi, i'm mostly a beginner to CSS and i must say, i have become obsessed with it. this is my first posting.

i was so excited to try out tip#10 - same nav code on each page - but when I tried it, it didn't work for me. - I think because of this:

I have my main <ul> navigation in a div called "nav" because I have to keep the styling separate from my 'footer nav' which is also in a <ul>. (styled 'inline' and smaller text)

is there a way to make it still work by putting the id into the <body> tag?
or will it always not work if I've got the navigation inside a different div??

right now i have to span a class around the 'active' link, which has to be done manually on every page.

i would appreciate any feedback at all! thanks!

[all4nerds]

Hello

maybe this small demo helps, switch body class from a b c to d

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	.a .aa,.b .bb,.c .cc,.d .dd{color:#ff0000;}
	</style>
	<script type="text/javascript">

	</script>
</head>

<body class="d">

<div class="nav">
<a href="##" class="aa">home</a>
<a href="##" class="bb">page1</a>
<a href="##" class="cc">page2</a>
<a href="##" class="dd">page3</a>
</div>

<div class="subnav">
<a href="##" class="aa">home</a>
<a href="##" class="bb">page1</a>
<a href="##" class="cc">page2</a>
<a href="##" class="dd">page3</a>
</div>

<div class="footernav">
<a href="##" class="aa">home</a>
<a href="##" class="bb">page1</a>
<a href="##" class="cc">page2</a>
<a href="##" class="dd">page3</a>
</div>

</body>
</html>

[cssnut]

thanks for your feedback.
when I tried it, it didn't work for me.
i finally got it to work by moving my font-color from the
li a:link style to just the <li> style....weird.