Embed Code Plugin For FCKEditorHere's a plugin I just whipped up for FCKEditor which makes it easy to add embedded HTML code such as YouTube and Vimeo videos.
To install, download the plugin below and unzip it in your plugin folder. Then add the following line to your fck_config.js:
FCKConfig.Plugins.Add('embed');
You will also need to add an 'Embed' entry to your toolbar array in fck_config.js. Download the FCKEditor Embed Plugin Now. One problem you should be aware of is that browsers now try to protect users from XSS (Cross-Site Scripting) injection, so if you send iframe tags in the embed code, they might get stripped out. To fix this problem, you need to ensure your server adds the following header: X-XSS-Protection: 0
|
Outlook 2010 Ignores CSS PaddingWow, Microsoft write some pretty spaced out stuff. Or not-so-spaced-out, as the case may be. I just learnt that Outlook 2010 ignores CSS padding styles on all elements except <td>. Why? I have no idea. |
How To Remove The Border From Facebook and YouTube WidgetsFacebook and YouTube have neat little widgets to help your website visitors easily subscribe to your videos and like your facebook page. The only problem is they both went ahead and put dog ugly borders around their widgets which you can't style using css because it's all in an iframe. Fortunately, we can still style our own content and here is a little trick you can use to hide those pesky borders. It works by simply tucking the iframe under a div on your site. The markup and css looks like this: |
Safari CSS3 Bug :empty Pseudoclass Imagine the following scenario: You have some div’s, p’s or any other kind of block element, which, for various reasons - usually because some editor inserts empty paragraphs in the rich text editor - are empty. That would not be a major problem per se (even if it’s an ugly code). But if you have margins and padding asigned to these elements, the layout will be ugly as well. Therefore, you could say that when they’re empty, they should not be displayed. This is accomplished with the css3 :empty pseudoclass. Just declare in the css file - div:empty, p:empty {display:none} and you’re done. Not so for Safari. Safari 3.x (for both Windows and Mac) sometimes will consider ALL div’s and p’s as empty, and you will see a completely empty page. Even more weird, if you want to take a look at the source code for that page, the content will suddenly and miraculously appear! I did not figure out a fix for this yet. I haven’t detected what triggers it (for instance, this site has the :empty declared for div’s and paragraphs, but they are still viewable in Safari. |
Fluid CSS Menus and Sub-Pixel WorkaroundA long standing CSS problem, best described by John Resig in his blog, is the different approach browsers use when rounding widths calculated from percentages. Firefox rounds alternately up and down in order to make elements fit perfectly, Opera and Safari always round down so that elements will never overflow the container, and Internet Explorer always rounds up so elements often overflow their container and developers get to practise using profanities. My use case is a fluid css menu with no gaps between the elements or at the end. If you don't know how to build css menus you might want to start by reading my blog on css menus. CSS menus are useful because they are built with <ul> and <li> markup which is a natural representation for hierarchies. The problem is that since menu items are floated, using percentage widths does not guarantee the space will used perfectly (unlike tables). The basic concept behind the workaround is to leave the last element of the list unfloated so it occupies the entire width of the menu bar underneath the floated elements. Essentially the last item has the following style:
.web_cssMenu li.web_last { float: none; width: auto; }
|
position: fixed on IE6Just for the record, here's a common workaround for IE's lack of support for position: fixed.
Oh, and while I'm at it, here is a common workaround for just about every layout defect in Internet Explorer (especially those involving floats):
element { zoom: 1; }
Heck, here's another one to use if your text gets cut off because of incorrectly inherited line-heights in IE:
element { line-height: normal; }
We could go on like this all night really. |
width: auto; on Floats in IEI think CSS 2.0 required that widths be explicitely set on floated elements, but CSS 2.1 removed this restriction. Either way, Microsoft Internet Explorer 6.0 equates width: auto; with width: 100%; for floats. Not very helpful for building CSS menus. I searched the web and didn't find any workarounds, but I came up with this simple one myself:
element { float: left; _width: 0px; }
The underscore hack targets IE 6 but not IE 7 (which behaves correctly). IE6 also automatically expands the width of the block to fit when the specified width is too small, which is why this hack works. When I say 'works' I mean it in the Microsoft sense of the word of course. Hope it helps! |
Horizontal vs Vertical CSS MenusJust yesterday I had a request from a customer to build a vertical menu down the side of the page in their design. I've always had a strong preference for horizontal menus, but have never really known exactly why. When trying to disuade my customer she naturally asked me this question: why? Well, now I've thought about it I've come to the conclusion that there are some good reasons to go horizontal instead of vertical. Here are mine:
What do you think? |
Centering Multiple Line Content with CSSAt last... an opportunity to spend some quality time blogging :) . I've had some very positive feedback from my previous blogs which is always nice and motivates you to write more. Well, today I wanted to nail a long standing issue with positioning blocks of text in the center of containing elements. It all started when a customer rang me and said they wanted the text in their menu items wrapped. They were already centered using #menu { line-height: 70px; text-align: center; }, but this method breaks if you need to wrap lines, because both lines become 70px high. So... what should I do? Tell the customer that wrapping text is just too hard?! |
Javascript Fade EffectsRecently, I was asked to build a rotating testimonials block in the sidebar of a site. The block would display each testimonial for 5 - 10 seconds before it changed. Loud and rapid changing elements on a website make me cringe. It's like listening to somebody scape their fingernails on the blackboard. Conversely, soft or slowly changing elements make me feel great! No, really, they do - especially fade effects. I can watch them over and over fading in and out... it feels so good. I'd seen some people put non-flash fade effects to good use on a few sites so I thought I'd try to give it a go myself. Nobody wants reams and reams of code for some simple effects like this though, so I implemented a few simple javascript functions to do the job for me. Here's how it works. The fade effect is implemented by modifying the opacity of the element. Recent versions of Firefox, Safari and Opera implement the CSS3 opacity style which can be used as you might expect. Older versions of the browsers, and Microsoft Internet Explorer have the own proprietary methods to set the opacity. If you wanted to give an element fixed opacity you could use the following CSS declarations: |
