Reveal new window links and links to non-HTML files with a user stylesheet

An interesting article about displaying what a link will do when you click on it. By adding a stylesheet on your browser you can visualize on each link what will happen.

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

2 usefull firefox plugins

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

Quotes

Some quotes and links from the Fronteers2008 Panel CSS with Andy Clarke, Stephen Hay and Bert Bos.

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”

The abnormal line-height story by Eric Meyer

I have always had problems with line-height. When I had 2px difference in a header between IE and Firefox, the solution was line-height. When my sIFR title was smaller in IE and bigger in Firefox, the solution was line-height.

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

The best of March 2008 by Smashing Magazine

Smashing Magazine

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/

CSS compatibility and IE

With each new release of Windows Internet Explorer, support for the Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3.

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

CSS properties index

A continuously updated list of all CSS properties. From CSS 1 to CSS 3… A good initiative, I hope he will keep the list updated.

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

CSS min-height and min-width

Cross browser minimum height or minimum width. Most of you will already know this little trick to give your website/element a min-height or a min-width. There are a lot of techniques to make it work, but this one is the easiest and it’s a good reminder for myself when I need the use this hack.

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.

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.