Articles for Browsers, HTML and CSS

Kill all chromes

Web scraping with html agility pack

Pure CSS Aspect Ratio

You can keep the aspect ratio in CSS/HTML using padding

javascript animation

Favicons

Tool for generating Favicons for all platforms and browers.

jDrop file uploader

jDrop is a jQuery extension for uploading files. It is fully customizable and can be configured to work with any web site. It features Progress Bar and Drag & Drop if the browser supports them. It works by extending an existing control, and specifying user elements. It will detect if your browser and is compatible with HTML5, it falls back to implementing an iFrame for older browsers, so that there are no post backs required. It supports FireFox, Chrome, Safari, Opera, and Internet Explorer 6 +.

Given a chunk of text, assign that text a constant colour

Cross browser testing screenshot tool from Microsoft

How to write an mvc view to a string

useful when returning ajax

How to do cool radio buttons or select buttons

from twitch

HTML fragments in view page - can be called over and over - eg in a loop

When you are writing a report, sometimes you have a chunk of html that you need to call over and over - like subtotal. You can use an Action and an anoymous 'function' full of html to do this. - like a renderaction and an ascx, but inline on the page. This reduces files in the project, and you dont need an actionresult method in the controller.

Colourbox and forms

Problems when forms disappear from colorbox (colorpowered)

Awesome network tool - TNM

We use Total Network Monitor - TNM to monitor our sites, servers, client sites, phones, and even local wifi clients.

Printing in IE - why doesnt it have print preview like Chrome does!

How to fix an IE print issue

How to create nice css only buttons

Use a generator

Routing issues in MVC

I had an issue when including a warningbar in admin, caused by strange routing behaviour in MVC related to html.renderaction and html.action

Customise Radio Group To Look Like Buttons

Radios are Ugly, here is a cool way to style them to make them look like buttons.

Web fonts - usage

Web fonts are great, but they do require some searching, fiddling around, and are not going to render perfectly in every browser and OS.

Mobile Websites

Cubiq.org Matteo Spinelli has got lots of mobile optimised javascript demos and libraries. http://cubiq.org/category/projects SwipeView - Provides swipe enabled slideshow with hardware accelerated animation iScroll - Proper scrolling DIVs on mobile Add to Home Screen Slide in Menu - a really nice ...

IE 10 Default Align TD Problem in HTM5

IE 10 seems to center table cells that should be left aligned by default.

Mobile frameworks

How to get rid of friendly messages in IE10

HTML Placeholder Styling

In addition to the Jquery placeholder styles we currently use (<html5): .placeholder-active{ /* awesome styles*/ } You can add the following classes so you can style the placeholder text in the html 5 (which will automatically take presidence over the jquery placeholder) ::-webkit-input-pl...

Character Encoding

Character encoding options Thought I would share some charset guidelines. A client had with a funny character where there should have been an acute accent. I have always found that ISO encoding works best: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> And NOT: &...

CSS

Better Semantics with CSS Combinators & Selectors http://designfestival.com/better-semantics-with-css-combinators-and-selectors/ 7 Quick CSS Enhancements for Better User Experience http://davidwalsh.name/css-enhancements-user-experience Here are some seo oriented image replacement techniqu...

HTML

HTML5 and the Future of the Web http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/ How to Code HTML Email Newsletters http://articles.sitepoint.com/article/code-html-email-newsletters A Collection of HTML5 Resources and Tutorials http://speckyboy.com/2009/12/11/a-collec...

CSS Sticky Footer

HTML <!--[if lt IE 7]><style type="text/css">#sfWrap {display:table;height:100%}</style><![endif]--> <div id="sfWrap"> <div id="sfMain"> </div> </div> <div id="sfFooter"> </div> CSS /* sticky footer stuff */ html, body {height:...

Paste as plain text

When entering data into a web site, do you type it directly, or paste in from word/web sites? If you paste in, use a 'paste as plain text' if it exists, or perhaps go via windows notepad to see if there are any odd characters as notepad will not be able to handle them. Then you can remove them, ...

Firefox

13 Firefox Add-ons For Web Development http://www.sitepoint.com/blogs/2009/07/21/13-firefox-add-ons-for-web-development/

Stretched Background Image

http://www.quackit.com/html/codes/html_stretch_background_image.cfm http://www.quackit.com/html/codes/html_stretch_background_image_example.cfm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Str...

Upload and file transfer times

Approximate File Transfer Times FILE SIZE 28.8 kbps Modem 56 kbps Modem 128 kbps ISDN 256 kbps DSL 1.5 mbps T1 1 Mb File 6 Minutes 5 Minutes 1.5 Minute 40 Seconds 6 Seconds 2.5 Mb File 15 Minutes 13 Minutes 3.5 Minutes 1.75 Minutes 15 Seconds 5 Mb File 30 Minutes 26 Minutes 7 Minutes 3.5...

IE8 Browser Problems

Having problems with an old site not working in ie8? Put this in the head tag

Fonts

How to Identify a font by uploading a picture of it What the font http://www.myfonts.com/WhatTheFont/ Web safe fonts: Verdana Arial Courier New Georgia Times New Roman Trebuchet MS Impact http://alicious.com/2009/2009-font-survey-safe-web-fonts/ http://web-design.lovetoknow.com/Web_Safe_Fon...