CSS Tips And Tricks

CSS Resources, Tutorials, Tips and Tricks (please report broken links)

1. Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/...rebuilding.html

2. The University of Arizona - Cascading Style Sheets http://uaweb.arizona.edu/resources/...css/index.shtml

3. W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/

4. Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml

5. Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en

6. How to build a web site without tables http://www.mako4css.com/Tutorial.htm

7. CSS Quick Reference http://www.devguru.com/Technologies.../css_index.html

8. Real World Table Free Site Development http://www.womendesignersgroup.com/articlerachel.shtml

9. CSS Bugs and Workarounds http://css.nu/pointers/bugs.html

10. How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/

11. Hiding CSS form Netscape 4+ http://www.v2studio.com/k/css/n4hide/

12. External link icons the CSS way: http://www.kryogenix.org/days/173.html

13. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0. http://moronicbajebus.com/playground/cssplay/top-menu/

14. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>). http://moronicbajebus.com/playgroun.../hover-sidebar/

15. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playgroun...er-button-menu/ This does not work in Internet Explorer.

16. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6. http://moronicbajebus.com/playgroun...reformat-table/

17. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... http://moronicbajebus.com/playgroun...ge-replacement/

18. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people. http://moronicbajebus.com/playgroun...y/markyourjump/

19. Horizontal Menu using CSS http://moronicbajebus.com/playground/cssplay/hormenu/

20. Add banner positioning with CSS http://www.peterbailey.net/test/banner.htm

21. Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html

22. Designing for two Style Sheets - This method is suitable for use when you have a site that is laid out using CSS positioning as opposed to tables, and where the content is likely to get displayed badly in older browsers.
By carefully planning your layout you can create an alternate stylesheet that will display correctly in older browsers and still be able to do an advanced CSS layout for the rest. http://www.edgeofmyseat.com/showarticle.do?AID=5

23. Use CSS to Color Your Forms http://www.edevcafe.com/viewdoc.php?id=6

24. CSS-driven tabs http://www.clagnut.com/writings/csstabs/

25. CSS: Mix and match Classes http://catcode.com/csstips/classes.html

26. CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html

27. CSS: Centered Tables http://catcode.com/csstips/center_table.html

28. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5%. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS).
The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support. http://www.mako4css.com/Issues.htm

29. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter...0&format=html#6

30. CSS Positioning Properties http://www.miswebdesign.com/resourc...properties.html

31. CSS Menus - Uberlink CSS Rollovers: http://www.projectseven.com/tutoria...st_01/index.htm

32: CSS-TD CSS Table Design: http://www.projectseven.com/tutorials/css_t/index.htm

33. Css Iframe Mimics http://www.beforethedog.com/tutoriali/tut1.htm - NEW!

-------

Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool: http://www.fu2k.org/alex/css/layout...dAbsolute.mhtml

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh: http://www.westciv.com/style_master/

Thx for the links! Theyre really interesting!

Brilliant. Thx Webnauts - you really pulled together a very comprehensive bunch o' info. I especially like the iframe mimics and CSS rollovers links. I highly recommend StyleMaster & LayoutMaster to any handcoders out there using CSS in their design - they're both helpful tools for speedy styling - LayoutMaster works great with Photoshop slices.

Robsta

Thanks webnauts, the Netscape 4 and CSS info was pretty good for me.

hi,

my css project is working properly in pc iexplorer properly. Mac IE crashed when the client clicked on a link
Now what i want is,

what should i see, when iam writing a code using style sheet for both platforms(pc & mac)

please help me to sort it out.


Shiva

Hai name, I would suggest you to have a look here: http://devedge.netscape.com/library...03/css-support/
I guess this link can support you.