Red Wrangler

Internet Marketing Resources > HTML and CSS

HTML and CSS

• CSS
  
• Flash
• Internet Explorer Browser Bug Fixes
  
• References
  
• Tips & Tricks
  
• Validators
  

CSS 

BlueprintCSS Resources

http://honeyl.public.iastate.edu/blueprint/
Links to the Google home page for this highly useful tool, as well as additional tutorials and other information to learn how to create CSS more easily than hand-coding.

CSSEdit

http://macrabbit.com/cssedit/
This Mac-only tool is very good for creating and editing CSS.

TopStyle

http://www.newsgator.com/Individuals/TopStyle/Default.aspx
This Windows-only tool also is great for creating and editing CSS.

Flash

SWFObject: Javascript Flash Player detection and embed script

http://blog.deconcept.com/swfobject/
Probably the easiest way to embed and customize Flash objects into web pages, for example, to create transparent backgrounds that work with Internet Explorer browsers. Highly flexible with a link to the Adobe EMBED and OBJECT tag attributes.

Internet Explorer Browser Bug Fixes

The Microsoft Explorer web browsers are so bad, and so non-standards compliant, they merit their own section. Here are bug fixes we've found useful to force Microsoft browsers to behave like standards compliant browsers (e.g. Firefox). One caution: there are lots of complicated hacks online. These are fairly simple to implement and maintain over time.

Basic Explorer Browser Problems

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
The first item, about how IE browsers calculate widths, is particularly useful: use the CSS child selector to tell standards compliant browsers what to do. Apparently the Explorer browsers don't follow that standard. There are other useful hacks.

Disappearing Background Images

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
See #3 on this page. Includes other IE bug fixes.

Double-Width Problem

http://www.positioniseverything.net/explorer/doubled-margin.html
IE6 helpfully and mysteriously doubles the width of floated CSS divs. The solution is non-obvious: add display: inline; to the DIV style.

Getting Fieldset Backgrounds and Legends to Behave

http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie
This IE behavior is particularly frustrating and nasty if you want to build a form with CSS instead of tables.

IE7 Hacks

http://www.last-child.com/ie7-hacks/
http://www.last-child.com/
A quick, clean discussion with examples about how to target IE6, IE7 web browsers. The site itself, www.last-child.com, is an excellent source for small fixes.

Oversized Content in Expanding CSS Box

http://www.positioniseverything.net/explorer/expandingboxbug.html
How to get floated divs to degrade gracefully with oversized content in IE browsers.

PNG Image File Format Compatibility

http://www.twinhelix.com/css/iepngfix/
Remember to open the iepngfix.htc file to set the right folder path for the blank.gif file. Otherwise you'll have a mysterious red x to resolve that appears in the upper left of your PNG image (in IE5 and IE6 browsers only, naturally).

Testing with Multiple IE Browsers on Your Computer

http://tredosoft.com/Multiple_IE
This is a nifty bit of software that lets you install and run IE5 and IE6 on your computer at the same time as IE7 without causing problems with any of the IE browsers. You can see how your pages look without using Browsercam.com right way, a service that shows how your pages look across browsers and operating systems.

References

These sites are useful when you have to look up all the elements of a tag.

HTML Help

http://www.htmlhelp.com
http://htmlhelp.com/reference/css/

Tips and Tricks

Equalizing CSS Column Heights

http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=70#7

Horizontal/Vertical Dropdown Menus with CSS and HTML Ordered Lists

http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/P70/
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/
The cleanest way (especially if you put the javascript at the bottom of your pages) to implement a horizontal or vertical dropdown navigation menu using HTML ordered lists (UL) that works across all browsers.

Ten CSS Tricks and Ten More CSS Tricks

http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
Some of these are obvious, others clever. Worth a quick look in case you see something useful.

Translucent: See-Through Backgrounds for the Masses

http://www.wannabegirl.org/translucent/

Using a Background Image to Replace Text

http://www.stopdesign.com/articles/replace_text/
Great discussion about techniques and accessibility issues for screen readers.

Validators

These tools validate the quality and standards compliance of your HTML and CSS code.

HTML Help List of Validators

http://htmlhelp.com/links/validators.htm
Links to online tools as well as software that will check your links.

Sign Up Now! Only $14.95/month*

First 30 days are free

*Web Professionals: your account is free
when one of your clients has a paid account!