Yes thats correct, another css hack for i.e 6 this time it’s ‘min-height’. As some of you are probably aware i.e 7 now supports the ‘min-height’ css property making our lives much simpler, or rather even more complicated as we have to create hacks or work arounds for old browsers such as i.e 6. 

Show below i have included the css for creating a div element with a minimum height, of course this could be applied to any element of your html document. For the div example that i am showing, this method is incredibly usefull when you have content that does not fill a specified area on your webpage. By using the min-height property you will effectivley allow your div to scale and expand but the hight will go no lower than the specified pixel size (e.g. 200px).

What you will see below is the basics of getting your div to display correctly on nearly all browsers (I haven’t managed to find any that dont support this method).

Example of min-height code

mydivname {
  min-height:200px;
  height:auto !important;
  height:200px;
}

Try it out and see how easy it is to use.

The CSS star hack is one of my most favorite ways for developing any good site in CSS, allowing you to effectively reset any style on any element of your web page, saving you time and code if used correctly. But is it really the best way?

Firstly i will begin by explaining how and where i generally use the star hack within my css document.

Begin by opening your style sheet, and paste the css below to the very top of your style sheet :

Code:

* {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

What does it do?

By doing this we are effectively setting every element of the HTML document to have no margins, no padding and to set the font to verdana.

This can be of major benefit to you when building a website from scratch, mainly due to the fact that all most all browsers apply different padding, margin and font styles to every element. By applying the css shown above we are making things easy for ourselves by setting a blank canvas and stripping any elements of its previous styles.

Pros:

• Can increase productivity/development time.
• Could reduce your code dramatically.
• Resets all HTML elements so they have no predefined styles allowing you to eliminate browser compatibility issues.

Cons:

• Could put more load on you browser.
• Technically it might increase code.

Things to consider:

The CSS star hack is great for removing the margin and padding etc but don’t get too carried away. For example if you set the colour to be black, this will apply this to every element of your web page and can be very annoying, this will mean you have to set the colour on everything that is different thereafter and will increase your code dramatically.

Give it a go and see how much time and coding it can save you. I’ve never looked back since implementing it into every website i create.

So you’ve just build your complete website and its almost read to go live…. but have you validated it making sure its compliant to w3c standards?

Where to validate

Of course you can head straight over to the w3c.org website where you can:
• Validate your XHTML
• Validate your links
• Validate your CSS
• Validate your RSS/Feed

But fingers crossed someone has already or they are working on creating an all inclusive validator to do all of these things in one go.

Dont forget to spell check!! I advise you use the default spell checker in what ever software you are using to create your website, another way you could check is by using an online checker such as http://www.wellho.net/demo/spell.php how ever please bare in mind that this is a free service and only checks single pages.

In my travels i also stumbled accross the WDG HTML Validator, which is available at http://htmlhelp.com/tools/validator/ not only can you check a websites validation, you can check to see if the entire site is validating, this is also very hand as one of its features enabled you to see if your internal pages are linking to pages that dont exist.

Why validate?

Well there are many reason too validate, take a look at the following website for an explanation of reasons to validate - click here to read more.

Give it a go, it worked well for me.

It might not sound a big deal but the new site got an editors pick on w3csites.com yesterday. Featuring on the homepage and the sites page. I only stumbled across it when looking at my analytics account when i was quite confused as to why i had so many hits in such a short period of time.

Look out for some new designs coming soon for my most recent clients!

Some new ones to come include.

• Kayaking southwest website launch (complete website and forum).
• Falcon Ridge Lodges in Cornwall
• Sara Sherwood new website design

Watch this space.

We have just started setting up a new forum for a good friend. ‘Kayaking Southwest’ is set to be one of the best online community websites in the southwest for kayaking enthusiasts. Whilst there you can discuss general chit chat related to kayaking, find out about the best locations and hotspots, tried and tested fishing tackle and bait methods and even learn a few cooking tips!

So if your a kayaking lover head over to http://www.kayakingsouthwest.co.uk/ now!

Spread the word and enjoy.

So at last the new website design has been implimented! Out with the old design, in with a much a more robust framework, gallery and blog. Clean XHTML and CSS all round, and what i believe to be a much nicer designed site. It’s taken about 20 designs, 3 version builds, 120 days, ive lost count how many hours but the website is now live.

So what’s new and better about it?

The website has many new features, from a user perspective and mine. Tackling pngs was one of the most challenging aspects of the design, making the transparency work across multiplue browsers, new and old caused a few issues but nothing that couldnt be sorted.Just a few of the sites new features:

• New design, a fresh new look
• New design and build rates, hosting options and services
• New Client login section, new and existing clients can now watch their designs grow. This is probably the biggest section that has been added but the new functionality allows a much smoother working process between us and the end client.
• Improved Search Engine Optomisation
• Fully integrated Photography Gallery
• Fully integrated Blog
• New emailing system
• Stable framework

If you have any comments id love to hear them.

Using PHP you can return the current url of the page by simply using :

$pageURL = 'http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
echo $pageURL;

By using string manipulation you can also us this function to return the end characters of the url request.

For the following url: http://minimalistics.co.uk/gallery/main.php?g2_itemId=89 we can return the end numbers using the following code:
$pageURL = 'http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
$pageURL = substr($pageURL,strrpos($pageURL,"=")+1);
echo $pageURL;
The result of this would be 89.

If you’ve created your website but want to style or change the formatting of your css depending on the users browser version, ie allows you to set a different css style sheet using this handy little hack.

Internet explorer recognises the following:

If you need to target any users browser that is just internet explorer simply use the follwoing code and place in your <head> </head> tags.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" mce_href="css/ie.css" />
<![endif]-->

If you need to target any users browser that is internet explorer below version 7, e.g. 6, 5, 5.5… use the following code and place in your <head> </head> tags.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6orlower.css" mce_href="css/ie6orlower.css" />
<![endif]-->

After stripping and streamlining my xhtml, css, javascript, php and images for the design and launch of the new website i thought id do a little hunting for a decent website speed checker.

I managed to find ‘Web Page Analyzer‘ which is a free web page analysis tool that calculates page size, composition, and download time and gives speed recommendations based on best practices for usability, HCI, and website optimisation.

This was not only good for showing the data that i was after but it highlighted files that were larger than first expected and pointed out a couple of small but non important errors.

Give it a go.

Changing the right click menu in flash files is relitivley simple. Using the code below and placing it on the root of your document you can add a new right click menu to your published files. This disables the existing zoom in, zoom out ect and enables you to attach functions to the buttons, whether it be launching a new web page or changing the colour of the movie clip document.

So heres what to do:

Paste the following code onto the root of your flash document, directly onto a blank frame, publish your movie, Job done!

And heres the code:

//define any functions to included on a menu item
function launchsite1(){
getURL("http://www.minimalistics.co.uk", _blank);
}

////Declare a new menu item
newmenu = new ContextMenu();//Hide the built in flash menu
newmenu.hideBuiltInItems();//define your new menu items
item1 = new ContextMenuItem("My Home Page", launchsite1);
item2 = new ContextMenuItem("Another Web Page", launchsite2);
newmenu.customItems.push(item1);
newmenu.customItems.push(item2);//Build New Menu
_root.menu = newmenu;

You can change add or remove any of the items above to suit your requirements.