Reference Resources

**LadynRed** · 12:46 PM

This is a free article from Community MX:

http://www.communitymx.com/abstract.cfm?cid=C8A1F

Quote:

Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.

*****If you have new resources, PM me and I'll add them, this thread is now locked ****

**LadynRed** · 03:41 PM

A compilation of reference information for building web pages, solving problems, techiques, etc.
__________________________________________________ ______________

Transparent PNG's in IE 5.5 and 6 - USES CSS
Found a new method for making IE 5.5 and 6.0 display transparent PNG's properly. This is dead simple.

http://bjorkoy.com/past/2007/4/8/the...st_way_to_png/

Unfortunately, due to limitations of the MS Filter, repeating (tiling) transparent PNG's won't work, but this method DOES work for transparent PNG's as BACKGROUND images. Most of the other methods I'd found didn't.

__________________________________________________ __________

Centering a layout
This question comes up a LOT so I thought I'd make it a sticky.
I will caution you that this solution utilizes CSS, which is the preferred way to achieve this. It is also just one of 3 methods to center, using margins.

You need to do 2 things to center a div and have it work cross-browser.

For non-IE browsers (except for IE 7)-
You create a #wrapper div that will contain your entire page layout (you can name it anything you want)

Give your #wrapper (the container you want centered that holds everything else) a defined width. Then you add these rules:

margin: 0 auto;
text-align: left; <-- puts the text back where it belongs

For IE add:
body{
text-align: center;
}

So, your CSS would be:
body{
text-align: center;
}

#wrapper{
width: 760px
margin: 0 auto; -- top and bottom will be ZERO, left and right are "auto"
text-align: left;
}

Your HTML might be something like this for a 2 column centered page:
(this is very simplified)

<body>
<div id="wrapper">
<div id="header"></div>
<div id="leftColumn"> column content </div>
<div id="content">right column content </div>
</div> 
</body>

Putting text-align: center on the #wrapper itself will ONLY center the text and other elements INSIDE #wrapper.

For additional methods of centering block elements (like a div), this is a very good resource:

http://css-discuss.incutio.com/?page...ngBlockElement

More on centering:
Centering an image: http://css-discuss.incutio.com/?page=CenteringAnImage

Centering VERTICALLY:
http://css-discuss.incutio.com/?page...TextVertically
or
http://exanimo.com/css/vertical-cent...a-floated-shim

__________________________________________________ _____

How to prevent tables from becoming too wide (tabular data !)
Great article from Roger at 456BereaStreet

http://www.456bereastreet.com/archiv...ming_too_wide/

Software for CSS Layouts - CSS Sculptor from Eric Meyer:
http://www.webmaster-talk.com/html-f...w-product.html

__________________________________________________ _______

**LadynRed** · 06-06-2007, 04:51 PM

swfIR - SWF Image replacement
This is VERY cool ! First came sIFR - which allows you to use flash text to replace normal text, so you can use ANY font you want on a page. Now comes swfIR - same idea only for images. Easy rounded corners, drop shadows and other effect and it is valid !

http://www.swfir.com/

Quote:

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

__________________________________________________ ____________

**LadynRed** · 06-06-2007, 04:56 PM

Articles having to do with all aspects of building web pages.
__________________________________________________ ____________
Is your coding POSH ?

Quote:

POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it. Pick a page on your web site to begin with, and apply the POSH Checklist to it. Continue with the POSH Process

Read all about POSH and why it's important to modern web design. Tutorials and resources included.

http://microformats.org/wiki/posh
__________________________________________________ ________

**LadynRed** · 01:21 PM

The Web From a Screen Reader User's Perspective

**paladin2** · 06-24-2007, 10:06 AM

Here is another great resource about HTML AND XHTML

**whym** · 10-12-2007, 07:37 AM

I wrote a recent tutorial on getting transparent PNGs to work in IE6 on my blog - I found this method was much easier than the HTC file or Javascript equivalents.

Here's the link if you're interested. Credit for this goes to Adam Web Design who's a member on these forums.

**LadynRed** · 10-01-2009, 12:21 PM

Excellent new book on learning to build web sites using web standards:

http://www.amazon.com/exec/obidos/AS...tandardista-20