Zooiblog has an article on fixed positioning and backgrounds; I thought you might be interested in this since it mentions the PNG transparency hack we were discussing a couple of weeks ago.

WebCredible has a condense, informative article on CSS hacks and Browser Dectection. This is a really good page to print out and add to your web tricks binder. There are a lot of other CSS and other web resources on this site that you may find useful.

I know that I posted a neat color selector tool the other day, but I found another one that I really like. Color Mixers allows you to select a primary color and it will display eight matching colors.

Something else interesting - "A designologue is a conversation between two designers in the medium they
understand best - design. Comparisons can be made to Coudal’s Photoshop Tennis
where two designers alternately modify the others image using Photoshop." There is some pretty delicious imagery at designologue.

456 Berea Street has a nice list of Efficient CSS with shorthand properties. While you’re there, take the time to read Basics of search engine optimisation.

Why standards-compliant HTML matters, a rather timely article on standards compliance.

To go along with our CSS theme of late, Evolt.com has an article on 10 CSS Tricks You May Not Know, the original article by Trenton Moss can be found at his site, webcredible.

And All that Malarkey has a variety of articles on web standards, CSS, and web development; be sure to read Web Standards Trifle and CSS: A tribute to selectors.

Looking for a way to style a list? Try Listamatic, I’ve never seen so many list styles in one location. Be sure to see the rest of the tutorials and list resources at Max Design including their float tutorials.

Steve Dolphin has a really nice Color Scheme Selector that should be helpful when you’re deciding the colors that you want to use for your web site. You may also want to check out the other tutorials and resources on his site.

Last week Mani Sheriar of Sheriar Designs spoke to our class about separating content from style. She gave us a lot of wonderful tips on CSS design and I have written up some notes from her talk that you can find below.

Relatively Absolute - This is the article that made positioning "click" for Mani. After visiting the site, I found another article on floats that you may find useful.

PNG Transparency - Mani displayed Nomad Ecological Consulting; where she utilized PNG Transparency - I found a resource on how to use PNG files in IE. AListAPart also has an article on Cross-Browser Variable Opacity with PNG: A Real Solution. You can see the actual JavaScript that she used for the Nomad site here. Webfx also has an article on PNG Behavior. Main said the PNG Transparency script that has worked best thus far is as follows:

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
}
       }
        }
        }

Resetting the padding and margins - Mani also discussed the trick for resetting margins and padding since browsers tend to have inconsistent settings. Here is the code that should be used at the top of your CSS file:

* {
margin:0;
padding:0;
}

Heading Images - Helping search engines index you site - The problem with having a heading image at the top of your web page is that search engines need text at the top of the page to properly index your site. Mani showed us a way to provide search engines with the needed text while still creating a beautiful design.

In the CSS code create an ID with the the background set as the image banner.

#logo2 {
width:745px;
height:149px;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
background:url(../images/logo.jpg) no-repeat top left;
}

Position the nested H1 tag off the page.

#logo h1 { /* hides H1 headings in browsers that support css so that only image is seen ... H1 headings will display in browsers not supporting CSS*/
        font-size:.01em;
        position:relative;
        left:-5000px;
        margin:0;
        padding:0;
        }

In the XHTML document enclose an h1 heading tag inside a div container that uses the above ID.

!important ignored by Internet Explorer

If you would like to add some CSS code that will be ignored by IE, use !important

 margin-left: 2.7em !important; (all browsers with the exception of Internet Explorer with have a 2.7em left margin.
margin-left: 2em (Internet Explorer will have a 2em left margin) 

Commenting CSS - It’s important to use detailed comments in your CSS code.

Here are a few of the helpful sites that Mani mentioned or sent to me

1. StopDesign
2. Position is Everything - A web site dedicated to this issues of CSS positioning.
3. CSS Discuss
4. Web Standards Project
5. CSS Zen Garden
6. MezzoBlue
7. Eric Meyer
8. SimpleBits
9. Web Standards Group
10. Andy Budd
11. Layout Resovoir
12. Brain Jar
13. CSS Max Design
14. Design Meme
15. Design Principles
16. Digital Web Magazine
17. Evolt
18. HTML Dog (Son of Suckerfish - Menus)
19. Autistic Cuckoo - Relatively Absolute Article
20. What Do I Know
21. Saila
22. Steel Dolphin

ArtPad is a part of Art.com, an online retailer of fine art posters. At ArtPad you can draw your own beautiful creations or just doodle. It’s a neat service and it’s free. You can also sign up for a free account at Art.com and upload your own photos for selling, printing, or just sharing with family and friends.

Preventing Hotlinking - After finding that several of my images were being "hotlinked" to without my permission, I replaced existing images with this one and sites started looking like this. I then found a good article on the problem of Hotlinking at NetMechanic. This article led me to The SiteWizard.com and a fix for the problem using an .htaccess file. This file prevents others from displaying my images off my site. It’s not ideal, I can no longer "hotlink" to my own photos and of course it does not stop people from downloading my photos and uploading them to their own servers, but at least I won’t have to pay bandwidth costs. Static8 also has a good article on hotlinking. I also found this article on removing your images from Goggle Image Search (that might be a little extreme for the moment). I think the best solution I’ve seen is over at cockeyed.com.