Blaze New Media

Have you ever wanted to add a small icon to the start or end of the hyperlinks on your page?

Sure, going through and adding an tag to all your hyperlinks would work, but that’s just tedious.

CSS offers a far easier solution. Here’s a quick, three step guide that will give you funky links in no time.

• Create the icon you want to use. Think about the size, it should be a similar height to the default text size of your site.
• Add the following line of code to your CSS.
  

  a {
  background-image: url(IMAGE_URL);
  background-position: right;
  background-repeat: no-repeat;
  padding-right: 10px; }

  background-image: url(IMAGE_URL);

  It will tell the browser where the icon image is located. Replace IMAGE_URL with the location of your image.
  

  background-position: right;

  In these links, the icon will appear to the right of the text. You can change this to left if you want it at the beginning.
  

  background-repeat: no-repeat;

  We only want the icon to show once. So turn off repeating.
  

  padding-right: 10px;

  This part gives all your hyperlinks some extra space at the end for the icon to sit. (You’‘ll probably want to tweak this value depending on your icon size.) You can change this to ‘’padding-left’’ for icons at the front of links.

• Hey presto, check those links again – easy huh? You can also extend this a little, try changing the icon for the :hover event, you can come up with some simple but stylish looking effects.

I’ve been asked quite a few times recently, how it is possible to get a DIV to expand to 100% of the height of the browser window.

Many people find that even if they set ‘height: 100%’ to a DIV, it will not expand all the way to the bottom of the browser window, but stop right after the content finishes within the DIV.

The solution is actually a very simple one.

For percentages to work properly, the elements parent has to have a defined height. For the DIV in question, the parent is BODY whose parent is HTML.

So, we have to specifically set the heights of these two elements in the CSS like so;

html, body { height: 100%; }

Now, when we set the DIV’’s height to 100% it’s parent will have a height defined, which will allow it to expand to the full height of the browser window.

Simple huh!

I have been the proud owner of a brand spanking new Orange SPV C500 cell phone for about 3 weeks now, and I have been very impressed by its mobile internet capabilities.

The C500 is a mobile smart phone. It comes installed with Windows Mobile 2003, which includes programs like Windows Media Player, MSN Messenger, Internet Explorer, but most importantly lets you install third party applications just like any other version of the Windows software.

After researching mobile browser applications I found that a small browser called ThunderHawk was by far the best. It had an impressive list of standards support and was fully compatible with CSS1 and most of CSS2.

I installed the browser onto my phone and decided to test a well known CSS based website, that of Dave Shea’s Mezzoblue.

I was amazed by the results. Apart from some minor element sizing problems, the site’’s CSS was rendered almost perfectly by ThunderHawk, which by default includes a ‘split-screen’ feature that allows you to see how the site would look on a regular desktop monitor, but also save a section of the screen for you to zoom in and actually read the content. This can be turned off if required, leaving you with the whole screen to scroll around in, just as though you were viewing it on a regular sized screen.

ThunderHawk also overrides your style sheet’s font settings. Instead it uses its own built in font which renders well at a very small size – allowing for more information to fit onto the screen, minimizing the need to scroll.

Cell phone browsers are obviously still in their infant stages, but with new browser releases on the horizon, things are only going to improve. Soon it may be far easier that you ever thought to catch up on your daily visits.