Applying these rules will of course affect the way many websites look, and may occasionally cause minor layout problems. Links that already alert the user that they will open in a new window or point to a non-HTML document will also be affected, so the information will be repeated.

Read the article

source 456bereastreet.com

I found 2 usefull firefox plugins on 456bereastreet.

Find inline CSS and JavaScript with Inline Code Finder
Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them:

- Inline JavaScript events
- Inline style
- javascript: links

https://addons.mozilla.org/en-US/firefox/addon/9640

Obtrusive JavaScript Checker
Finds HTML elements with inline events and javascript: links.

https://addons.mozilla.org/en-US/firefox/addon/9505

A link from Andy Clarke:
www.dowebsitesneedtolookexactlythesameineverybrowser.com

“If it’s not cross browser it’s not a solution”

“Designers need to understand the medium”

“Design with HTML & CSS in your browser and show that to your client”

“Don’t design in Photoshop”

Eric Meyer gives his thoughts about the line-height layout.

“The point here is that line layout is very difficult to truly understand—even given everything I just said, I’m still not convinced that I do—and that there are often surprises lurking for anyone who goes looking into the far corners of how it happens. As I’ve said before, my knowledge of what goes into the layout of lines of text imparts a sense of astonishment that any page can be successfully displayed in less than the projected age of the universe.”

Read the entire article of Eric Meyer

Every month Smashing Magazine take a look around and select some of the most interesting web-development-related web-sites. You’ll find useful references, tutorials, services, tools, techniques and articles Smashing Magazine have found over the last 30 days.

Make sure you check:
- Vintage Logotypes
- jQuery Tutorials for Designers
- CSS Message Box collection
- Most used CSS tricks
- Feed Analysis v1.1
- Acid3 Test Released

http://www.smashingmagazine.com/2008/03/27/best-of-march-2008/

“If the browsers your Web site is targeting include earlier versions of Internet Explorer, however, you want to know the level of CSS compliance for those as well. This article provides an at-a-glance look at CSS compliance across recent versions of Internet Explorer, including support in Internet Explorer 8 Beta 1 for Developers and planned support in the final version of Internet Explorer 8.“

Why don’t they make the effort to make all the features from CSS3 to work and not SOME features? Anyhow, the list might be useful…

http://msdn2.microsoft.com/en-us/library/cc351024(VS.85).aspx

http://meiert.com/en/indices/css-properties/

min-height


.minHeight {
min-height:400px;
height: auto !important;
height: 400px;
}


min-width


.minWidth {
min-width:300px;
width: auto !important;
width: 300px;
}


I don’t use the min-width a lot, but the min-height is really useful for example to keep an element the same height when it has less content.

Older IE versions doesn’t support min-height or !important. The browser sees height: auto, then height:300px. Height works fine in these older IE versions. When there is more content then the 300px height the element will just expand. So you use the misunderstanding from IE to your advantage.

He has made some updates of his reset.css file. The most important change is removing font-family: inherit; from the first block.

“[The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don’t want it to, but that’s something I’ll catch during the browser testing phase.”

http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers.

http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

Preparation

Make a image in Photoshop that you want to be printed. You can use your company logo and/or the url.

Integration

1. At the print.css somewhere between the <head>-tag
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />

2. Insert this code in your html/php/aspx/… file:
<div id="print-logo"><img src="/img/YOUR-IMAGE.gif" alt="Whatever" /></div>
OR a better solution is <img src="/img/YOUR-IMAGE.gif" alt="Whatever" id="print-logo" /> (thanks Nathan)

You can place this code wherever you want, I prefer after the <body>-tag of before the </body>-tag. This way, your logo will be presented at the top or bottom of your entire content.

3. Insert this code in your general style sheet:
#print-logo {display:none;}

4. Insert this code in your print style sheet:
#print-logo {display:block;}

Result

If someone prints your webpage, your logo and/or url is displayed on the printed page. Here are some examples that I made:

You can find a lot of free icons on the web, check the post of Smashing Magazine “Freebies Round-Up“

If you define your print style sheet, don’t forget to define your body tag font size and font family. It’s more fun to read Tahoma or Arial, then Times New Roman.

Only print what is necessary. Navigation, footer or header are necessary in your website, but when you print a webpage, you only need the important content parts.

Eric Meyer with CSS rules to apply during development which call attention to markup problems

Where does he get the ideas, why don’t I come up with them :’) ??

http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/

Every month Smashing Magazine take a look around and select some of the most interesting web-development-related web-sites. You’ll find useful references, tutorials, services, tools, techniques and articles Smashing Magazine have found over the last 30 days.

Make sure you check:
- Dynamic CSS With Variables
- CSS List Expander
- rsizr - intelligent image resizing !!!
- CSS Sprite Generator
- New unobtrusive dynamic flickr badge
- Firebug Tutorial - Logging, Profiling and CommandLine Firebug
- Sizcons - Random Jabber
- Logo Trends 2007

http://www.smashingmagazine.com/2007/10/10/best-of-september-2007/

Everybody knows Facebook, I started a new group CSS. If you use Facebook and you love css, don’t hesitate to become member!

http://www.facebook.com/group.php?gid=6188112651

Every month Smashing Magazine take a look around and select some of the most interesting web-development-related web-sites. You’ll find useful references, tutorials, services, tools, techniques and articles Smashing Magazine have found over the last 30 days.

Make sure you check:
- CSS: The right sprite
- Creating a table with dynamically highlighted columns
- A Stripe of List Style Inspiration
- Fade Out Bottom
- CSS Sculptor
- Photoshop Secret Shortcuts
- DatePicker using Prototype and Scriptaculous
- Logo Trends 2007