Web development articles - Page 4

ie6 double float margin bug

Here is the quickest fix I have found for fixing the ie6 double float margin bug, where all margin values are doubled on floating elements.

Just apply:#element { display: inline; }

And the element float will be rendered as expected. Go figure...Thanks to http://www.positioniseverything.net/explorer/doubled-margin.html for shining a light on, and fixing this issue.

Read post... Posted in 'Web development'

Vertical align image in a ul li

Here is a quick solution to get a list item with an image to vertically align to the middle of the text in the same li.Simply apply “vertical=align:middle” to the image in the list like this:ul. li img { vertical-align:middle;}

  • Text in the list item

Remember: You are aligning the image to the text so it gets the text-align property!

Read post... Posted in 'Web development'

ie 7 min-width and button bug

A bug for anyone needing ie7 compatible forms using a min-width on the buttons. This also affects ie8 running in compatibility mode.input.submitbutton{ min-width: 100px;}If you are using a min-width for your form submit buttons then sadly ie7 will align button text to the right of the button. It is un-fixable with just css and the only pure solution is to remove the min-width and either use width:auto; or use width:123px;input.submitbutton{ width: 100px;}If however you don’t mind using javascript you can try using the ie7-js which uses javascript to bring any ie browser less than ie8/ie9 to work as the latest one. You can read more about ie7-js on google code: http://code.google.com/p/ie7-js/As a bonus this can also fix any transparent png issues found in ie6!

Read post... Posted in 'Web development'

Facebook Fan Page Feeds

I have been struggling to find out how to get the RSS address of a Facebook fan page for some work that I was doing and it’s been a real pain to find the info on how.... But I finally figured it out so I decided to share the method that ended up working the best (It’s beautiful in it’s simplicity)

  1. Head on over to www.google.com/reader.
  2. Click on the add a subscription (top of menu on the left).
  3. paste the fan page link (http://www.facebook.com/thefanpagename) in the search box and click “Add”.
  4. Once it’s found it click on the settings tab > reader settings (top right).
  5. Click on the subscriptions tab and you should see the full address that you can use in any RSS reader, parser or whatever you need.

There may be an easier way so I would love to find out but this seems pretty simple to me.

Read post... Posted in 'Web development'

jQuery + Firebug = reduced repetitive work

Have you ever had a page that needed styles applying to certain elements again and again (and again) in some sort of pattern. The finished page could have no js either. I just had a long page of tables that the 3rd column had to be formatted differently and it was a pain so I needed a way around the problem. Write a quick bit of jQuery to apply to to the page and preview it in the browser. Then using firebug (firefox plugin), cmd/right click the document root element and click “copy HTML”. Just paste that into a new file and you now have the static HTML which the jQuery applied the styles to. Just remember to delete the jQuery code from the new doc and you are done.This example adds the class “value” to all the third “td” elements in the document: $(document).ready(function() { var str = ":nth-child(3n)"; $("tr td" + str).addClass('value');         });Resources:http://api.jquery.com/nth-child-selector/http://stackoverflow.com/questions/2184862/saving-the-manipulated-dom-html-after-editing-it-with-firebug

Read post... Posted in 'Web development'

Flash Player Control Bar

Part of creating a HTML5 Video player requires a fall back option for the likes of ie, so a flash player is the option. This is the design for the control panel on the flash player. The source and instructions for the flash player will follow on completion.

wpid-player-controls.Y1bYWejTQo6S.jpg

Read post... Posted in 'Web development'

HTML 5 Video ? Flash Fallback

I am nearing completion of the flash player that I have been developing this week. This is the fall back player for browsers such as ie that don’t currently support HTML5 Video tags.The next part of this project will extend to include the HTML5 Player. Currently it is just a regular flash player on a XHTML page.

Read post... Posted in 'Web development'

Website Preflight Checklist

I am currently developing a quick and easy checklist for making sure that all webpages/ sites that get designed follow a sort of quality control and minimum standard.

Please give feedback on anything that I should include.

Read post... Posted in 'Web development'

HTML5 & CSS3 Learning and Resources

EDIT: New links added 25-01-2010So you have probably been hearing a lot about HTML5 and CSS3 on the internet in the recent months and weeks. What are they? What's the deal with them? Why are they important and should I be doing anything yet?.. are a few questions you might have. I have been reading articles and saving links for a few months now so I thought I better share all the goodies with everyone else and hopefully you will be able to answer most if not all of your questions. I have tried to categorize as best I can but there is some overlap! Enjoy!

BOTH

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

HTML 5

What is supported where

http://a.deveria.com/caniuse/

HTML5 feature sand usage

http://diveintohtml5.org/

A Cheat sheet for html 5

http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

HTML5 sites now!

http://seogadget.co.uk/html5-examples-in-the-wild/

HTML5 Tutorials

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

http://html5tutorial.net/

CSS 3

General CSS 3

http ...

Read post... Posted in 'Web development'

Meta Tags

The tags in question are META tags. They are the bits of code that sit in between the <HEAD> </HEAD> tags and tell search engines whats in a page (except google which actually reads a pages text content).

Meta data should be put just after the <TITLE> tags in the <HEAD>. It tales the format <META name="the catagory" content="the information">. The name is usually one of 4 types - "description", "resource-type", "keywords" or "distribution". The information depends on the name. I will briefly cover the two that are most important for a search engine: "description" and "keywords". The "keywords" are a list of main topics covered by the page in question. This blog has the keywords "photoshop, illustrator, dreamweaver, Hints, Tips, Techniques, Carl Topham" since thats the main list that covers it. Separate each keyword with a comma (and space). Keywords can be two words so "Carl Topham" is counted as one keyword. Try to keep the keywords restricted to less than about 250 characters as some search engines actually reduce page ...

Read post... Posted in 'Web development'