Category: CSS

TinyMCE – The WYSIWYG Editor for WordPress

TinyMCE EditorTinyMCE is a powerful WYSIWYG editor control for web browsers such as MSIE or Mozilla that enables the user to edit HTML contents in a more user friendly way. The editor control is very flexible and it’s built for integration purposes (usage within systems like Intranets, CMS, and LMS, for example).

TinyMCE:Installation – Moxiecode Documentation Wiki

This is the Text Editor available for WordPress posting (Visual Edit mode). Pretty neat. Perhaps we’ll add a few items…

Here’re some more interesting TinyMCE links:

Perhaps, if I can ever find some time, I’ll be able to play around with this stuff.

Prop-Clear: CSS min-height hack

This is the solution to the perplexing problem of content area overflowing onto footers and su

Prop-Clear: CSS min-height hack

In a nutshell, add this to your CSS style sheet:

.clear { clear:both; height:1px; overflow:hidden; }

… and add <div class="clear"></div> to your HTML:


<div class="contentinnerwrapper">
<?php echo $content_for_layout; ?>
<div class="clear"></div>
</div>

Test your web design in different browsers – Browsershots

Test your web design in different browsers – Browsershots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Dreamweaver: Configuring Third-Party File Compare (aka `diff`)

Adobe – Developer Center : Configuring Third-Party File Compare

This article gives step-by-step instructions to enable the ‘Compare with Remote’ menu item (for Mac & Windows ;-) . It also provides information on where to get and configure file comparison: WinMerge (Windows) and FileMerge (Mac).

NOTE: FileMerge is available free via Mac OS X Developer Tools XCode package, available from http://developer.apple.com/ (free registration).

Mystery Bug – css-discuss

The article below outlines a useful technique in identifying and resolving CSS ‘bugs’ and other problems.

From the article overview:

Mystery Bug – css-discuss
CSS bugs can be obscenely difficult to isolate, especially when they are located amidst a large, complex page with many external style sheets. Compounding this is the fact that few coders have enough experience to be sure that what they’re seeing really IS a bug, and not just incorrect coding.

Often people will, when facing the Mystery Bug, just thrash about almost blindly, and only by pure luck will the answer be found. This need not be.

By following the procedure below, a clear understanding of the problem may be quickly obtained, freeing the coder to find a workaround or avoid the bug altogether.

A couple of useful WebDev links…

I thought I’d post a couple of links to some WebDev sites & tools I use every day…

FireFox Extensions

Most of these are available on Mozilla’s Recommended Addons site.

  • Web Developer – Powerful Web Development tools for outlining DIVs, TABLEs, CSS, etc.
  • User Agent Switcher – change the User Agent on a site or page (pretend your MSIE 6 or 5)
  • Firebug – edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
  • GreaseMonkey – customize pages & sites by adding your own ‘user scripts’
  • AdBlock Plus – block ads & flash
    NOTE: If you need to show blocked ads (i.e., you need to see/test OAS ads -D ), there’s an ‘ABP’ button next to the Google search bar (looks like a red or green stop sign). Click the little disclosure triangle next to the ABP button, and choose ‘Disable on [site-url]’. If you need help, just ask!
  • FlashGot – File/Image/Link downloader
  • Fasterfox – page load timer (right-side of statusbar)

CSS Resources

  • AlistAPart.com – A great place for learning & pilfering^H^H^H experimenting with CSS techniques.
  • meyerweb.com/eric/css – Eric Meyer’s CSS site
    • CSS Edge – life on the edge!
    • …there’s much more here…
  • SelectORacle – a nifty online tool for learning how CSS2 & CSS3 selectors work
  • Rijk’s panelizer – adds W3C’s CSS & HTML specs to your Mozilla Sidebar
    • Just download the panelizer.zip, place it somewhere handy & unzip it. Then open the included ‘panelizer.html’ file, and click ‘Add Panel’. I created a ‘Sidebars’ bookmark folder in my Bookmark Toolbar, and placed the ‘bookmarks’ in there.

Mac Tools

NOTE: The following contains Mac-only tools. If you are afraid of Macs, or have aversions to heights, please close your browser now. This message will self-destruct in five seconds. Good luck team!

Need help with any of the above? Just ask!