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> <!-- close #wrapper --> </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/ __________________________________________________ _______
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/
Articles - HTML, CSS, Web Standards Articles having to do with all aspects of building web pages. __________________________________________________ ____________ Is your coding POSH ? Read all about POSH and why it's important to modern web design. Tutorials and resources included. http://microformats.org/wiki/posh __________________________________________________ ________
The Web from a Screen Reader User's Perspective - Accessibility http://www.webmaster-talk.com/html-forum/90465-the-web-screen-reader-users-perspective.html __________________ Web Mistress & Web Standards Evangelist - Tables Be Gone !! "Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
And another great resource about HTML AND XHTML www.web-articles.info/e/a/subcat/HTML-XHTML-and-CSS/ And Thanks