HTML (Hyper Text Markup Language) is the language behind the web pages of the Internet, created by Tim Berners-Lee, and uses a system of tags for applying layout, formatting and links to content. CSS (Cascading Style Sheets) are used to describe the presentation of the HTML. This section contains howtos, tips and tricks about how to use HTML and CSS.
I’ve previously posted about minifying Javascript using a PHP port of Douglas Crockford’s JSMin Javascript minifier but learned today of the YUI Compressor which does an even better job of minifying by replacing local symbols with 1 letter symbol names and other optimizations. It is also able to compress CSS files.
There are a lot of tutorials around which advocate using pure CSS for forms (and not to use tables) and these often use the <label> tag for the fieldname. An issue I have come across is that <label> is an inline element so setting the width is supposed to have no effect; in practise setting the width will work in Internet Explorer but not other browsers. This post shows the simple solution so other browsers can also assign a width to a label.
By default Flash content in a web page will appear on top of other elements on the page, including floating menus, inline popups etc. This can be pretty annoying if you have a flyout menu on your page and it goes behind the Flash video and this post shows how simple it is to fix. This works in all browsers inclding IE6+.
The webkit based browsers Safari and Google Chrome allow the HTML textarea to be resized by default with a grab handle in the bottom right corner. There may be times when you want to disable this function so a textarea cannot be resized.
When showing an inline popup in a webpage (as opposed to a popup window) it is nice to grey out the background a little to highlight that the user should now interact with the popup rather than the webpage. This post shows how to do the necessary HTML and CSS to achieve this and tomorrow’s post will look at implementing the greyed out background with the jQuery Facebox plug-in.
Firefox, Chrome, Safari and Opera by default only show vertical scrollbars if the content on the page is longer than the window whereas Internet Explorer always shows vertical scrollbars. When moving from page to page where one is short and the next long it can make the layout jump around a bit so this post shows how to fix this for the other browsers.