Mar
13
2010
0

Provide Alternative Content for Flash Files on iPhone and Flash Disabled Browsers

Problem: How to downgrade your site gracefully for non-flash browsers such as the iPhone. The iphone is nice enough to show you a icon in place of the flash content so you’re aware that something is not displaying correctly on the page. However, this can get in the way of a good design.

Solution:
You can’t use Dreamweaver’s built in javascript to drag and drop the SWF on to the page, unfortunately. You have to use a different javascript class file from Adobe, SWFObject 2.

Here’s the help page from Adobe going over how to use it;
Alternative Content for SWF

In case that page is ever taken down, here is the link to the zip file with the examples of how to use the object.
alternative_content_examples.zip

Written by Tom in: CSS,SEO |
Sep
04
2009
0

Javascript and CSS Drop Downs over Flash?

JQueryTools FlashEmbed

I long thought it impossible to have a drop down fall over a flash movie as you would often want in a header of a website.

However, I just saw a website where they accomplished this. After investigating, I found a JQuery library that allows you to do this.

It involves a new way of embedding flash into pages. With just a div tag and a few lines of javascript you can easily embed flash AND have the opportunity to display drop downs over them.

Here’s the link showing it in action:
http://flowplayer.org/tools/demos/flashembed/wmode.html

If you know of any other ways, please pipe up and let us know.

Here’s another link for a great CSS drop down menu:
http://htmldog.com/articles/suckerfish/dropdowns/

Update
It turns out that it’s not the awesomeness of jquery tools that allows you to do this. It’s simply a parameter wmode=transparent that allows it. Jquery tools does look really cool, however.

Another good link for CSS menus is http://purecssmenu.com/ It is an online CSS menu generator.

Written by Tom in: CSS,Javascript | Tags: , , ,
Aug
05
2009
0

CSS: Default Padding/Margin for a p element

Resetting your css styles is a good thing to do to ensure that your site is rendered the same on all browsers.

Unfortunately, this often wipes out the default p tag padding and margin. The following style will restore a p to it’s normal margin (it doesn’t have a padding).

Each browser styles the p tag differently, thus this restores it to what it would look like in Firefox, creating a uniform look. Exactly what we’re going for.
p{
margin: 1em 0px;
}

Source

Here’s a link on how to use CSS Style Resets correctly:
Resetting Yoru Styles with CSS Reset

Written by Tom in: CSS | Tags:
Jul
07
2009
4

IE5 and IE6 CSS Hacks

Wow! That was annoying. As most know, IE5 and IE6 both tend to misinterpret standard CSS forcing us to resort to hacks designed to make them comply and display correctly.

I just recently found two very useful resources when it comes to making div tags float and pad correctly:

First explains and gives a fix for the odd fact that IE5 and IE6 will double the left margin of an element that has a float:left in it.

The fix is awesomely simple. You just set display:inline;.

http://www.positioniseverything.net/explorer/doubled-margin.html

The other explains gives a fix for the fact that IE5 and IE6 treat padding differently. Per CSS specifications, padding should add to the overall width. So, if you have a 100px div tag with 20px padding on all sides, it should be 140px wide.

The previous versions of IE keep the width exactly and simply pad inward rather than outward. All fine and dandy, except all other browsers don’t.

This is a bit more complicated, here’s the overall hack:
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* CSS1 UAs should see and use 2nd width */

html>body .content { width:300px }

http://tantek.com/CSS/Examples/boxmodelhack.html

Written by Tom in: CSS | Tags:
Jan
28
2009
1

Testing Your CSS and HTML accross multiple browsers

It’s very important to test your code on multiple browsers. Your audience could have any of them and you want your site to look the best no matter what, even if they have an ancient computer.

I’ve found several very good resources out there that have excellent free options.

CrossBrowserTesting.com

I love this site. It actually gives you a remote desktop session with the OS and the browsers that you need to test.
NOTE: They used to have a free option, but it is gone now. Lowest cost is $19.95 for one month subscription.

BrowserShots.org

Enter your URL and it returns screen shots of your site in over 80 browser and OS combinations. It even gives you the option of downloading them all as a zip file. Extremely handy!

Lastly, if your site is running into problems with older versions of IE, there is no easy way to install previous versions of IE on top of a more current version.

Tredo Soft has a program you can install called Multiple IE’s. It lets you do just what you couldn’t. Install previous versions of IE and test them on your computer. No more waiting for browser sessions on CrossBrowserTesting.com just to test IE! Here is the link:

http://tredosoft.com/Multiple_IE

If you’re using Vista, Multiple IE’s won’t work, however. You may need to use My DebugBar’s IE Tester:
http://www.my-debugbar.com/wiki/IETester/HomePage

Best,
Tom

Written by Tom in: CSS |
Mar
04
2008
0

Picking Colors

KulerOne the hardest tasks, at least I find, is picking a good color scheme for a website. There are a number of good color pickers out there, but they all generally work off of a set formula. A good example of them is ColorMixers.com.

Adobe came out with a great innovation when it comes to this task. It’s a new flash based color picker that emulates some of the features in the new CS3 suite and allows for social interaction.

It’s located at kuler.adobe.com

Check it out!

Written by Tom in: CSS |
Jan
11
2006
0

Great Photo Display Script (JavaScript & CSS)

Great piece of javascript mixed with CSS enlarges a thumbnail in response to a click. It greys out the rest of the screen and shows the whole image. Hardly any programming required too!
http://www.huddletogether.com/projects/lightbox/

Written by Tom in: CSS,Javascript |
Nov
14
2005
3

CSS Hand Cursor (clickable)

I have in the past wanted to have the cursor look like it was hovering over a link when it was not in fact over an link. As you know, when the cursor is over a link it shows up as a hand. Well, what if you want them to click something that isn’t a link – how do you communicate that it is clickable.

The answer is cursor:hand for Internet Explorer (IE) and cursor:pointer for Mozilla and Netscape (NS).

Here’s the cross browser CSS:

p.pointerhand {
cursor: pointer;
cursor: hand;
}

More information on cursor styles: http://www.quirksmode.org/css/cursor.html

Written by Tom in: CSS |

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes