CodeinWP CodeinWP

The Right Way to Add Custom List Markers to Unordered Lists

Custom List MarkersMost experienced web developers now understand that using CSS’s built-in method for adding custom list markers (also referred to as “bullets”) to style an unordered list is not an option. The unpredictable bugs that occur in Internet Explorer when using the list-style-image property render that method quite useless.

Fortunately, because of CSS’s inherent flexible nature, we can still customize the list marker on an unordered list. This is done by placing a background image on the list items. Here’s how most developers do this:

Read Article

Audio Comments on Blogs — Now That’s a Great Idea!

Audio CommentsI was reading an interesting article on Boagworld called The biggest ecommerce lies and how to avoid them and I noticed that the author posted an audio comment to respond to some of the other comments that had been posted.

What a fantastic idea. I don’t know if he’s the first one to do this, but I think it’s a great way to respond to a number of comments quickly without cluttering the comments section on your blog. Of course, some preparation would be required initially to set up something like that. Or maybe he’s using a plugin? I really don’t know, but I thought it was very innovative and could be a trend that others may follow. It’s certainly a great way to personalize your blog.

Read Article

Will EOT Become the Standard for Font Embedding?

Will EOT Become the Standard for Font Embedding?If you’re at all familiar with the various methods in use today to embed custom fonts in web pages (sIFR, Cufon, @font-face, etc), then you also may have heard of a font format called EOT. Well, if Microsoft has it their way, EOT will become the standard, allowing web developers — with permission from font vendors — to be free to use virtually any font in a text-friendly manner in their web pages.

So what is EOT, and how has Microsoft pushed to standardize this method? Embedded OpenType fonts are compact OpenType fonts designed by Microsoft for use as embedded web fonts. They are recognizable by their “.eot” file extension. By means of data compression and removal of superfluous data, EOT files are made small in size and include features that protect the fonts themselves from being copied and used in unauthorized ways.

Read Article

Take the Pedals Off Your Bicycle and Become a Better Web Developer

Take the Pedals Off Your Bicycle and Become a Better Web DeveloperOver the weekend, my wife and I had the privilege of taking care of two of our friends’ children, while their parents had a night out at a local show. When the kids’ mom was showing us a few things around their apartment, we noticed that their daughter’s bicycle had no pedals on it. That was a little peculiar, so we inquired about it.

Her mother said she wanted her daughter (who is about 5 years old) to have her feet on the ground as she learned to ride her bicycle. This would allow her to remove her feet from the ground only for short amounts of time, thus practicing her balance without pedals or training wheels. In this way, she could focus purely on balancing herself, and not worry about trying to do more than one thing at a time.

I’m not really sure where her mom got this idea from, or even if it is any good for learning to ride a bike, but it reminded me of what I personally prefer when it comes to learning new skills in web design or development.

Read Article

The Ultimate Guide to Embedding Sound in Web Pages

The Ultimate Guide to Embedding Sound in Web PagesThis exhaustive article includes relevant links, best practices, and other useful resources that will enable all web developers to incorporate sound effects into their web projects in a manner that conforms to the latest in standards and best practices.

If you’re looking for a reference that you can bookmark and use for any project where you’re asked to include some type of audio clip into a web page — whether it’s MP3, MP4, WAV, WMA, and more — this is the article for you.

This is the one and only resource you’ll need to assist with all your audio-embedding needs.

Read Article

10 Ways to Generate Ideas for Web Development Articles & Tutorials

10 Ways to Generate Ideas for Web Development ArticlesSince I started blogging and, more recently, started submitting articles to other sites, I have used a number of different sources of inspiration for generating ideas to formulate articles. I thought I would list a bunch of interesting ways that blogging developers, designers, programmers, tutorial writers and others can come up with new and fresh brainstorms that can lead to new ideas.

These are a mix of methods that I’ve personally used, or that I’ve considered using, so I hope you’ll find them useful. And feel free to include your own methods for generating blog post and tutorial ideas in the comments.

Although this article is specifically geared towards generating ideas for web developers, the methods discussed could also be a basis for other fields of writing.

Read Article

Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7

Targeting Elements Using getElementByIdEvery week this website gets about 700 unique visits from Google searches, mostly from people searching for solutions to problems with JavaScript and CSS. I’m flattered, and I hope I can continue to publish useful articles that will assist people and help with the exchange of ideas and techniques. One search phrase that leads surfers to my site pretty much every day is something along the lines of “getElementById explorer 7”.

If you type this phrase into Google, Impressive Webs currently comes in at around result 115. Not to mention the fact that the article that comes up doesn’t really address this issue directly. That’s not a very good ranking for that search phrase — yet somehow people are still finding one of my pages through that search.

It is obvious that developers — likely beginners — are having issues getting the proper results when utilizing the getElementById method available in JavaScript, particularly in Internet Explorer versions 6 and 7. And since the users seem to be searching through dozens of web pages looking for a solution to their particular problem, then obviously the pages discussing this JavaScript method are either too confusing or don’t specifically provide a practical solution.

Read Article

CSS Opacity That Doesn’t Affect Child Elements

CSS Opacity That Doesn't Affect Child ElementsThis is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But I’m sure it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.

First, here is the CSS code necessary to make an HTML element semi-transparent:

Read Article

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript

Custom Trendy Border Using JavaScriptOne particular design trend that has caught my attention of late on web development and graphic design blogs is the fancy gray border that surrounds images in blog posts. There are subtle variations of it around the web, which you can see on a number of blogs and tutorial sites.

Sometimes it’s just an image with a solid border and slightly lighter shaded background. Elsewhere it’s a linked image with the same effect, plus a rollover state that changes the color of the border and/or background. And sometimes it’s seen in the ads on a design blog.

Read Article