HTML and CSS - most recent to oldest updatedHTML and CSS - most recent to oldest updated

HTML and CSS tips and tricks

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.

Post sort order: Post Date (Newest First) | Post Date (Oldest First) | Alphabetical | Date Updated

Using an image for an unordered list with CSSUsing an image for an unordered list with CSS

Posted May 7th, 2014 in HTML and CSS

I needed to put a checkbox in place of the regular circle used for unordered lists and couldn't remember how to do it (it's been a while!) so thought I'd quickly post it here for future reference. This is the simplest cross browser (including IE8) way to do this; I'll post again in the future an alternative doing straight CSS with no images.

Read more »

Show the at symbol on mobile device on screen keyboardShow the at symbol on mobile device on screen keyboard

Posted June 19th, 2012 in HTML and CSS

If you've used a mobile device (e.g. iPhone, iPad, Android phone or tablet) to fill out web forms you'll often find the @ symbol is present on the on-screen keyboard in email fields sometimes, but not always. Use type="email" instead of type="text" in the input field and it should show the at symbol on the on-screen keyboard.

Read more »

CSS :first-child and :last-child selectorsCSS :first-child and :last-child selectors

Posted January 2nd, 2010 in HTML and CSS (Updated September 26th, 2011)

The CSS selectors :first-child and :last-child are used to apply styling to the first and last child elements of the parent. :first-child is part of the CSS 2.1 specification and :last-child CSS 3 so support is slightly limited for :first-child and more limited for :last-child.

Read more »

Useful :nth-child RecipesUseful :nth-child Recipes

Posted September 26th, 2011 in HTML and CSS and Offsite Articles

While answering a question asked on another post, I needed to work out how to use the CSS nth-child selector to find everything but the first element, and came across an excellet post by Chris Coyier at css-tricks.com.

Read more »

Use base target to target links instead of using JavascriptUse base target to target links instead of using Javascript

Posted September 22nd, 2011 in HTML and CSS

It's easy to overlook the basics sometimes and be a clever dick with some overly complicated Javascript solution when there's a nice easy HTML attribute that can solve the problem. In this post, I'm talking about the target attribute of the <base> tag which I suddenly had an "ohhhhh" moment with yesterday. There's no need to use jQuery/Javascript to target links to _top, for example, just set the target in the base tag.

Read more »

Opacity for Internet Explorer using CSS3 PIE and Alpha TransparencyOpacity for Internet Explorer using CSS3 PIE and Alpha Transparency

Posted September 21st, 2011 in HTML and CSS

Alpha transparency is a much easier way to make a background transparent than having to specify a whole bunch of cross browser CSS opacity statements and works in a wide variety of browsers, with the usual exception of Internet Explorer prior to version 9. If you are using the CSS3 PIE utility in your web project then there's an easy way to use alpha transparency with CSS3 PIE.

Read more »

Solving a couple of gotchas with CSS3 PIESolving a couple of gotchas with CSS3 PIE

Posted September 19th, 2011 in HTML and CSS

CSS3 PIE is a utility for Internet Explorer which adds support for some of the most useful CSS3 properties missing from older versions of the browser, such as border-radius, box-shadow, border-image and multiple background images. I don't wish to duplicate what's in the online documentation in this post, just a couple of gotchas when starting with CSS3 PIE.

Read more »

Stop Internet Explorer from downloading CSS3PIE twiceStop Internet Explorer from downloading CSS3PIE twice

Posted June 30th, 2011 in HTML and CSS

I've been playing around with CSS3PIE the last couple of days; it allows support for various CSS3 features in Internet Explorer 6 to 8, such as box-shadow, border-radius and linear-gradient. This post shows how to prevent IE from downloading the PIE.htc file twice on the first page request, and how to prevent IE9+ from downloading it at all.

Read more »

Hide an element initially with CSS and show it later with jQueryHide an element initially with CSS and show it later with jQuery

Posted June 22nd, 2011 in HTML and CSS and Javascript

This post is to answer a question asked in the comments section of my "Show and hide an element with jQuery - Part 1 of 2" post from a couple of years ago. It's a pretty simple question, asking how to have an element hidden with CSS at first and then show it with jQuery later. It might be triggered automatically, or when a button is clicked or the mouse hovering over something.

Read more »

Style the HTML hr tag with CSSStyle the HTML hr tag with CSS

Posted June 10th, 2011 in HTML and CSS

In the past I've fallen into the trap of creating a special class for rendering lines or separators in an HTML document and assigning the class to a div, ending up with something like <div class="line"></div> or something along those lines. Not only is this not semantic, it's a whole bunch of extra unecessary HTML code which can be simplified by styling and using the often forgotten <hr> tag.

Read more »

Style HTML Anchor Titles with jQuery and CSSStyle HTML Anchor Titles with jQuery and CSS

Posted June 2nd, 2011 in HTML and CSS and Javascript

The title property of anchor tags in HTML show the text in black on a yellow background by default in most browsers, after mousing over the anchor for a second or two. This tutorial will show you how to style the title with CSS using jQuery and a small amount of Javascript and it will appear as soon as the user mouses over the link.

Read more »

border-radius and box-shadow support across browsersborder-radius and box-shadow support across browsers

Posted May 16th, 2011 in HTML and CSS

This post is a reference sheet I needed for myself to show which browsers support the CSS3 box-shadow and border-radius properties, which require vendor prefixes, and which have no support at all.

Read more »

Allowing div layers to float over Flash/Vimeo/YouTube etcAllowing div layers to float over Flash/Vimeo/YouTube etc

Posted August 22nd, 2009 in HTML and CSS (Updated May 13th, 2011)

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+.

Read more »

Float a div over a YouTube iframeFloat a div over a YouTube iframe

Posted May 13th, 2011 in HTML and CSS

Some time back I wrote about how to float a div over Flash/Vimeo/YouTube etc. The method supplied in that post works fine for Flash based media but doesn't work for the newer way to embed YouTube videos using an iframe. This post shows the solution so you can float elements over a YouTube iframe.

Read more »

CSS3 rounded corner inputCSS3 rounded corner input

Posted April 26th, 2011 in HTML and CSS

The CSS3 properties border-radius and box-shadow allow a designer to easily create rounded input boxes with pure HTML and CSS without having to resort to images. This post shows how it can be done and deals with vendor prefixes and other cross browser issues to ensure the input boxes work across all browsers.

Read more »

"Clearing" floats with overflow: auto"Clearing" floats with overflow: auto

Posted January 9th, 2010 in HTML and CSS (Updated April 11th, 2011)

It is so simple to clear floating HTML elements with overflow:auto but this doesn't seem to be common knowledge. The most common way to clear floats is with a float clearing div, a hackish method involving writing content using the :after pseudo property, or unbelievably using <br clear="all"> as I saw posted on another site yesterday. This post looks at the simplicity of overflow:auto.

Read more »

Download/embed fonts with @font-faceDownload/embed fonts with @font-face

Posted August 7th, 2010 in HTML and CSS (Updated February 10th, 2011)

I wouldn't normally bother with anything other than the default web fonts but the design for the new Personalised Plates website (still in development) calls for a stylized font which is similar to that used on the plates themselves for headings, lead-in paragraph text and so on. As a result I've been messing around with @font-face this week and present how to do this here, along with a bunch of useful references online.

Read more »

Resetting an HTML form with a reset input buttonResetting an HTML form with a reset input button

Posted January 11th, 2011 in HTML and CSS

This post covers the HTML reset input button. I know this is very basic HTML but after some recent responses to my "clear a form with jQuery" post I'm beginning to think a lot of web developers must not know how to do a reset with regular old HTML and seem to think you need to use Javascript.

Read more »

HTML form honeypots and autofill/autocompleteHTML form honeypots and autofill/autocomplete

Posted November 11th, 2010 in HTML and CSS

A honeypot field in an HTML form is a hidden input field designed to work out whether or not it is a spam bot submitting your contact form, comments form or similar. For some reason I've never actually covered this myself on this blog so will point you in the direction of a couple of other blogs which explain how these work, and then talk about an issue I discovered recently with autofill in Google Chrome. It may also be an issue with auto complete in other browsers.

Read more »

HTML/CSS background-positionHTML/CSS background-position

Posted May 28th, 2010 in HTML and CSS (Updated October 14th, 2010)

The HTML/CSS background position can be set using px, % and the constants top, center, bottom for vertical positioning and left, center, right for horizontal positioning. This post looks at the order they need to be in, and a "gotcha" that can catch you out when moving from constants to pixels.

Read more »

Meta titles and descriptions and the psychology of search Meta titles and descriptions and the psychology of search

Posted September 23rd, 2010 in HTML and CSS

I run a New Zealand Running Calendar website and it's made me realise something quite interesting when it comes to SERPs (Search Engine Results Pages): you don't need to be first to get good clicks - just make sure your meta title says "I am the authority website" to the searcher.

Read more »

Using HTML <label> to toggle and select fieldsUsing HTML <label> to toggle and select fields

Posted September 14th, 2010 in HTML and CSS

I recently had a comment on my how to check and uncheck a checkbox with jQuery post suggesting to use a convuluted method to make the text alongside a checkbox toggle its state. I suggested using <label>s instead which is much easier and not reliant on Javascript but it got me thinking that perhaps a lot of people don't know about the very useful <label> tag, hence this post.

Read more »

Avoid over-using CSS classesAvoid over-using CSS classes

Posted January 23rd, 2010 in HTML and CSS (Updated August 6th, 2010)

A couple of weeks ago I checked out a new site that had just launched and decided I'd take a look at the source and see what they'd done behind the scenes. The overuse of CSS classes on that website was what prompted me to write this post. You don't need to make every sub-element have a class; give the parent the class instead and simplify your code and style sheets with child element styling.

Read more »

Vendor-prefixed CSS Property OverviewVendor-prefixed CSS Property Overview

Posted August 6th, 2010 in HTML and CSS and Offsite Articles

CSS allows for vendor-specific extensions which can start with a dash or an underscore, although in practise they all appear to start with a dash. Although this is declared in the official syntax reference, the W3C does recommend that authors should avoid vendor-specific extensions. Nevertheless, they exist and this post links through to an overview of all the vendor-specific extensions available.

Read more »

Valid characters for the HTML ID attributeValid characters for the HTML ID attribute

Posted April 4th, 2009 in HTML and CSS (Updated August 2nd, 2010)

The ID attribute in HTML tags has a limited set of allowable characters and a web page will not validate if invalid characters are used. This post summarizes what is allowed. Note that this post is specific to HTML4; for the rules in HTML5 please read "HTML5: Valid characters for the ID attribute"

Read more »

HTML5: Valid characters for the ID attributeHTML5: Valid characters for the ID attribute

Posted August 2nd, 2010 in HTML and CSS

A while back I posted the rules around the use of the HTML ID attribute; the post was specific for HTML4 and I obviously need to post an update to allow for HTML5 which is a lot more flexible.

Read more »

HTML5 Tips, Tricks and TechniquesHTML5 Tips, Tricks and Techniques

Posted July 28th, 2010 in HTML and CSS and Offsite Articles

The post "HTML5 Unleashed: Tips, Tricks and Techniques" over at w3avenue has a really good introduction to HTML5 covering new features, browser support, semantic markup, form enhancements and more, along with some screenshots and demos.

Read more »

HTML5: Wrap Block-Level Elements with anchor tagsHTML5: Wrap Block-Level Elements with anchor tags

Posted July 27th, 2010 in HTML and CSS and Offsite Articles

David Walsh posted "HTML5: Wrap Block-Level Elements with A’s" which looks at a new feature in HTML5 which allows anchor tags to contain block level elements such as divs. This saves having to put many additional <a> tags within elements to make them all contain the same link, or do workarounds with Javascript.

Read more »

jQuery: hide text when the page is loaded and show it laterjQuery: hide text when the page is loaded and show it later

Posted June 21st, 2010 in HTML and CSS and Javascript

This post is a response to a question asked on my "Show and hide an element with jQuery - Part 1 of 2" article about how to hide text when the page loads and then show it with a button (or some other method to reveal the text at a later time).

Read more »

Different CSS style rules for printingDifferent CSS style rules for printing

Posted May 26th, 2010 in HTML and CSS

This post looks at how to specify different CSS style rules for printing: using a secondary style sheet for print only, or defining the print styles in the main style sheet using @media print.

Read more »

Cross browser transparencyCross browser transparency

Posted February 20th, 2010 in HTML and CSS (Updated May 12th, 2010)

The CSS3 standard introduces the opacity property for making elements opaque or transparent. Older browser also have support for opacity using various other properties and, in the case of Internet Explorer, filters. This post looks at how to achieve cross-browser, and backward compatible transparency.

Read more »

CSS background transparency that doesn't affect the text on topCSS background transparency that doesn't affect the text on top

Posted May 12th, 2010 in HTML and CSS

A little while back I posted how to do cross browser transparency, using an example with some white text on top of a div with a black background which had opacity set to 75% so the content behind it could show though. As pointed out by a reader in the comments on that post, this makes the content contained within the element also transparent so this post shows a way to make the background opaque but the text on top of it not.

Read more »

Change element's properties with CSS based on body id or classChange element's properties with CSS based on body id or class

Posted May 6th, 2010 in HTML and CSS

This post shows a similar technique to the one used in my CSS Sprites - making one of the buttons active with the body id post from the other day. In this post I show how to modify a particular element on a page depending on the body's id or class. In this example it's to change the masthead that appears at the top of the page.

Read more »

Aligning HTML bullet points against the marginAligning HTML bullet points against the margin

Posted May 4th, 2010 in HTML and CSS

Paddings and margins on <ul> and <ol> elements in HTML are fairly inconsistent across browsers, even when they are both explicitly set. This post looks at how to try to align these bullets points against a margin as consistently as possible across browsers.

Read more »

CSS Sprites - making one of the buttons activeCSS Sprites - making one of the buttons active

Posted August 8th, 2009 in HTML and CSS (Updated April 26th, 2010)

A few months ago I posted using CSS sprites for image navigation which looks at how to use a single image for navigation; when the mouse moves over the background position is changed and some effect happens e.g. the background color changes. I recently received an email asking how to make one of the buttons active/selected so have written this breif follow-up post covering this.

Read more »

Using CSS sprites for image navigationUsing CSS sprites for image navigation

Posted February 28th, 2009 in HTML and CSS (Updated April 26th, 2010)

I normally stay away from using images for navigation but when I do it's useful to use CSS image sprites so a single image can be downloaded for the navigation. This saves time and bandwidth and means there's no chance of lag of the mouseover image between mousing over and the image being grabbed from the server, or having to bother about pre-loading images.

Read more »

CSS Sprites - making one of the buttons active with the body idCSS Sprites - making one of the buttons active with the body id

Posted April 26th, 2010 in HTML and CSS

In a couple of posts last year I covered how to use CSS sprites for navigation and then how to make one of the buttons active on the page. This post is in response to a comment by "Jessica" on the second page which shows how to make one of the buttons active based on the id of the page's <body> tag.

Read more »

Google Analytics Asynchronous TrackingGoogle Analytics Asynchronous Tracking

Posted January 30th, 2010 in HTML and CSS and Javascript (Updated April 19th, 2010)

Google recently released updated tracking code for Google Analytics which allows for asynchronous tracking. This means the analytics tracking can be done at the same time as rendering other content and therefore won't delay other page content from rendering. This results in what appears to be faster rendering pages.

Read more »

Required attributes for HTML5 image inputRequired attributes for HTML5 image input

Posted March 20th, 2010 in HTML and CSS

I recently validated an HTML 5 page using the W3C validator service and was surprised to discover which attributes are required (and not required) for an image input. Note that of course the HTML5 specification is still under development at the time of this post so is subject to change.

Read more »

Show an icon in an HTML input using CSSShow an icon in an HTML input using CSS

Posted March 6th, 2010 in HTML and CSS

Today's post is a relatively simple tip to add an icon into an HTML text input using CSS so that it sits inside the input box and the text does not appear over it at all.

Read more »

Remove webkit border on input on focusRemove webkit border on input on focus

Posted February 28th, 2010 in HTML and CSS

When a text input has focus it is slightly highlighted in Firefox and Internet Explorer and much more so in the the webkit based browsers (Chrome, Safari, Konqueror). Normally this behavior should be left as-is but I personally recently needed to prevent the highlighting behavior, especially in the webkit based browsers.

Read more »

Add an icon before or after a link with CSSAdd an icon before or after a link with CSS

Posted February 6th, 2010 in HTML and CSS

CSS has a matching syntax for selectors which makes it possible to match the filename extension at the end of an href. This makes it easy to add an icon which relates to the link before or after the text part of the link.

Read more »

How to specify custom user styles in FirefoxHow to specify custom user styles in Firefox

Posted December 27th, 2009 in Applications and HTML and CSS

It is possible to specify custom user styles in Firefox. These override the default browser styles, and are in turn overridden by the website's styles. User styles can be made to not be overridden by making them !important.

Read more »

Make an entire table row clickable with jQueryMake an entire table row clickable with jQuery

Posted December 22nd, 2009 in HTML and CSS and Javascript

If an HTML table row contains only one <a> link it can be useful to make the entire row clickable and make it activate that link. This post shows how to make the entire row clickable with jQuery so that clicking anywhere in the row is the same as clicking that link.

Read more »

Getting ready for HTML 5Getting ready for HTML 5

Posted December 12th, 2009 in HTML and CSS

I started working on the template for a new website today and decided to have a look at HTML 5 for laying it out. Everything was looking nice until I discovered that Internet Explorer does not allow CSS styling for elements which it does not know about (e.g. <header> <section> etc). There is a Javascript workaround but I prefer not to use that so show here my solution for the time being.

Read more »

Using ellipsis with HTML and CSSUsing ellipsis with HTML and CSS

Posted December 5th, 2009 in HTML and CSS and Javascript

If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there's more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn't work for Firefox but there's a workaround that can be done with jQuery.

Read more »

How to preserve comments with the YUI CompressorHow to preserve comments with the YUI Compressor

Posted November 28th, 2009 in HTML and CSS and Javascript

I use the YUI Compressor to minify Javascript and CSS files. By default it will remove all comments from the files but there is a simple solution to retaining comments in files, which is often necessary for example when preserving copyright and license terms of use etc.

Read more »

Style an HTML input field by name and typeStyle an HTML input field by name and type

Posted November 8th, 2009 in HTML and CSS

If a form has a number of input fields they can each be styled using the element's "name" property as well as the "id" property. This is useful if you don't want to have to assign ids to all of your form elements.

Read more »

Starting an HTML ordered list with a number other than 1Starting an HTML ordered list with a number other than 1

Posted October 10th, 2009 in HTML and CSS

Last week I looked at how to use letters and roman numerals instead of numbers in an HTML ordered list and in this week's HTML post look at how the numbering can be started from a number other than the default 1.

Read more »

How to use letters and roman numerals instead of numbers in an HTML ordered listHow to use letters and roman numerals instead of numbers in an HTML ordered list

Posted October 3rd, 2009 in HTML and CSS

HTML ordered lists <ol> use normal numbers by default but it's also possible to use lower or upper case latin letters (i.e. a b c and A B C) and roman numbers in upper or lower case (i.e. i ii iii and I I III) by using the "type" attribute.

Read more »

Solution for <label> ignoring width stylingSolution for <label> ignoring width styling

Posted September 26th, 2009 in HTML and CSS

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.

Read more »

Minify Javascript and CSS with YUI CompressorMinify Javascript and CSS with YUI Compressor

Posted September 25th, 2009 in HTML and CSS and Javascript

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.

Read more »

HTML form workaround for dealing with mutiple submit buttons and the <enter> keyHTML form workaround for dealing with mutiple submit buttons and the <enter> key

Posted September 19th, 2009 in HTML and CSS

If there are multiple submit buttons on a form, browsers will usually "click" the first one on the form if the user presses the <enter> key when in a text input field. This can be an issue if the first submit button isn't the one you want to submit the form by default. This post shows a workaround for this.

Read more »

Prevent dotted border from appearing when clicking links in FirefoxPrevent dotted border from appearing when clicking links in Firefox

Posted September 12th, 2009 in HTML and CSS

The other day I wrote about how to do an animated information box with jQuery and in doing so was reminded of an annoying habit Firefox has of putting a dotted outline around links when they're clicked. This post shows the simple solution to this problem.

Read more »

CSS cursor propertyCSS cursor property

Posted September 5th, 2009 in HTML and CSS

Occasionally I've needed to specifically make the mouse a hand with HTML and CSS when mousing over a particular area and I'm always forgetting the property used to set it, so this quick post is for my own quick reference, and shows example of the other property values too.

Read more »

HTML entities for British Pound and Euro symbolsHTML entities for British Pound and Euro symbols

Posted August 29th, 2009 in HTML and CSS

The HTML entities for the British Pound and Euro are as obvious as they should be, but I found myself recently having to look them up just to make sure I was right...

Read more »

CSS hack for IE6 and IE7CSS hack for IE6 and IE7

Posted August 15th, 2009 in HTML and CSS

A couple of days ago I was having some very minor layout issues in IE6 and IE7 when trying to fit some form controls into an exact sized box. All other browsers and versions rendered the layout the same except for IE6 and IE7 so I needed a CSS hack which would work in those two browsers only.

Read more »

Disable textarea resizing for Safari and ChromeDisable textarea resizing for Safari and Chrome

Posted July 4th, 2009 in HTML and CSS

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.

Read more »

Grey out a webpageGrey out a webpage

Posted June 26th, 2009 in HTML and CSS and Javascript

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.

Read more »

Always show a vertical scrollbar in Firefox, Chrome, Safari and OperaAlways show a vertical scrollbar in Firefox, Chrome, Safari and Opera

Posted June 20th, 2009 in HTML and CSS

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.

Read more »

How to do a strikethrough with CSSHow to do a strikethrough with CSS

Posted June 13th, 2009 in HTML and CSS

This very short post covers something most people who work with CSS should already know how to do: how to do a strikethrough with CSS. I needed to do this today but didn't know which property sets it so had to look it up. I usually find by writing a short post like this I remember it in the future and never need to look it up again :)

Read more »

Style HTML form elements optgroup and option with CSS in SafariStyle HTML form elements optgroup and option with CSS in Safari

Posted May 30th, 2009 in HTML and CSS (Updated June 8th, 2009)

This post is part of a series looking at how to style optgroup and options with CSS. Previously I have looked at Firefox, Internet Explorer and Opera and this post looks at Safari. At the end of the series I'll present the findings in a tabular format so it's easy to see what can and can't be styled consistently across browsers.

Read more »

Style HTML form elements optgroup and option with CSS in OperaStyle HTML form elements optgroup and option with CSS in Opera

Posted May 24th, 2009 in HTML and CSS (Updated June 8th, 2009)

This post is part of a series looking at how to style optgroup and options with CSS. Previously I have looked at Firefox and Internet Explorer and this post looks at Opera. At the end of the series I'll present the findings in a tabular format so it's easy to see what can and can't be styled consistently across browsers.

Read more »

Style HTML form elements optgroup and option with CSS in Internet ExplorerStyle HTML form elements optgroup and option with CSS in Internet Explorer

Posted May 23rd, 2009 in HTML and CSS (Updated June 8th, 2009)

Last week's HTML/CSS post looked at stlying optgroup and options with Firefox and this post does the same but for Internet Explorer. This will be followed up with posts about the same for Opera, Chrome and Safari and then I'll present the findings in a tabular format so it's easy to see what can and can't be styled consistentlyacross browsers.

Read more »

Style HTML form elements optgroup and option with CSS in FirefoxStyle HTML form elements optgroup and option with CSS in Firefox

Posted May 16th, 2009 in HTML and CSS (Updated June 8th, 2009)

Last week's HTML/CSS post looked at using optgroup to group options in an HTML select box and this time I'll look at how to style optgroup and options with CSS. This post concentrates on Firefox.

Read more »

Style HTML form elements optgroup and option with CSS in ChromeStyle HTML form elements optgroup and option with CSS in Chrome

Posted May 31st, 2009 in HTML and CSS (Updated June 8th, 2009)

This post is part of a series looking at how to style optgroup and options with CSS. Previously I have looked at Firefox, Internet Explorer, Opera, Safari and this post looks at Google Chrome. Next week's HTML/CSS post will present the findings in a tabular format so it's easy to see what can and can't be styled consistently across browsers.

Read more »

Styling select, optgroup and options with CSSStyling select, optgroup and options with CSS

Posted June 6th, 2009 in HTML and CSS

Over the past three weeks I've looked at some CSS styles that can be applied to select, optgroup and option tags and how they are rendered differently across different browsers. The information is summarised here in tablular format so it's easier to compare.

Read more »

Absolutely position an element within another element with CSSAbsolutely position an element within another element with CSS

Posted May 30th, 2009 in HTML and CSS

When an element is positioned absolutely with CSS it is by default relative to the window as a whole and not to the parent element. This post shows how to absolutely position an element within another element with CSS.

Read more »

Using optgroup to group options in an HTML select boxUsing optgroup to group options in an HTML select box

Posted May 9th, 2009 in HTML and CSS

Following on with my current theme of looking at some useful form tags in HTML (last week I looked at fieldset and legend and the week before at label) this week's HTML post will look at using the optgroup tag to group options together in a select box.

Read more »

Fieldset and legend tags in HTML formsFieldset and legend tags in HTML forms

Posted May 2nd, 2009 in HTML and CSS

Last week I looked at the very useful <label> tag for HTML forms and this week look at the also very useful <fieldset> and <legend> tags which can help when breaking up a large form into several logical sections, or just to add a bit of style to a small form.

Read more »

Using the <label> tag for HTML formsUsing the <label> tag for HTML forms

Posted April 25th, 2009 in HTML and CSS

The <label> tag is useful in HTML forms and is an often overlooked (or not known at all) tag in the HTML coder's arsenal. I know that I often overlook it myself. This post looks at how it is especially useful with checkboxes and radio buttons.

Read more »

Using CSS letter-spacing  to space out titlesUsing CSS letter-spacing to space out titles

Posted April 18th, 2009 in HTML and CSS

I was casting about for ideas for this HTML/CSS post and came across the letter-spacing property for setting spacing between letters in CSS, a property I wasn't previously aware of, and thought it would make a good topic. Adding spacing between letters can be an excellent way of making titles (e.g. <h1> <h2> <h3> etc tags) stand out more.

Read more »

Blockquotes and XHTML StrictBlockquotes and XHTML Strict

Posted April 11th, 2009 in HTML and CSS

Jeffrey Way posted an interesting tutorial about CSS Shapes at Nettuts and wrote an observation about the <blockquote> tag at the end of the post: "Did you know that, if you want your document to validate, you can't place text directly into a blockquote? It needs to be nested within a parent element." So I decided to check it out with this post of my own using the W3C validator to check the results of my tests.

Read more »

Add an offsite link icon after external links with CSSAdd an offsite link icon after external links with CSS

Posted March 27th, 2009 in HTML and CSS

It can be useful to have an offsite link icon next to external links on a web page. This is easy to implement using CSS without having to add any additional elements to your anchor tags or additional image tags to the HTML source.

Read more »

Multiple CSS classes for a single elementMultiple CSS classes for a single element

Posted March 21st, 2009 in HTML and CSS

A useful CSS technique is to apply multiple CSS classes to a single element; this is something I didn't know was possible when I first started with CSS several years ago and I often find people do not realise it can actually be done.

Read more »

Force reload of updated CSS and Javascript files with unique filenamesForce reload of updated CSS and Javascript files with unique filenames

Posted March 20th, 2009 in Apache, HTML and CSS, Javascript and PHP

When a CSS or Javascript file is changed the visitor's browser needs to get the latest copy of the file to reflect the changes, but it will have been cached and may cause rendering or functionality issues depending on the changes. To force reloading of the CSS and Javascript file the files should be renamed each time they are changed; this can be automated by using PHP to add the timestamp of the file into the filename.

Read more »

Wide background image header with CSSWide background image header with CSS

Posted March 14th, 2009 in HTML and CSS

Last week I looked at how to do a stretchy image header banner with CSS so that as you resize the browser window the header image remains the full width of the window and the height changes. One of the issues with this method is the image can get quite tall and lose quality as the browser window gets wider. This post looks at how to instead have a really wide background image only showing what the browser window can fit. The rest disappears into the ether.

Read more »

Stretchy Image Header Banner with CSSStretchy Image Header Banner with CSS

Posted March 7th, 2009 in HTML and CSS

One of the issues with a fully liquid layout on a web page is the banner image is usually fixed in size and when you resize the window bigger there's always going to be some space around the image that you need to deal with. This post looks at how to stretch an image using CSS creating a stretchyimage header banner on a web page.

Read more »

How to make a font italic with CSSHow to make a font italic with CSS

Posted February 21st, 2009 in HTML and CSS

I am always forgetting how to make a font italic with CSS so this very brief post shows how to do it.

Read more »

Favicon tagFavicon tag

Posted February 7th, 2009 in HTML and CSS

A favicon is the little icon you see in your browser address bar and in your favorites/bookmark list. By default web browsers look for the file favicon.ico in your website's root directory but it's possible to specify a different location for the favicon. I'm always having to look this up myselfif I need to specify a different location so am posting how to do this here as my reference point.

Read more »

Using !important with CSSUsing !important with CSS

Posted January 31st, 2009 in HTML and CSS

The CSS !important declaration is something I've seen in CSS code before but never knew what it meant until a few days ago, so I thought I'd write a post looking at !important to show what it does.

Read more »

Internet Explorer 6 min-width hack Part 2Internet Explorer 6 min-width hack Part 2

Posted January 25th, 2009 in HTML and CSS

Yesterday I looked at a commonly known min-width hack for Internet Explorer 6 using the CSS/Javascript expression() which works only in IE and a couple of problems it presents. This post looks at an alternative solution which works and does not require Javascript to be enabled using a table hack and IE's conditional comments.

Read more »

Internet Explorer 6 min-width hack Part 1Internet Explorer 6 min-width hack Part 1

Posted January 24th, 2009 in HTML and CSS

Although Internet Explorer 6 usage has dropped dramatically it's still there in large numbers (it's at around 20% across the websites I work on). IE6 does not support the CSS min-width property and there's a commonly known hack using "width: expression". This post will look at some issues with this particular hack and tomorrow I'll look at another solution.

Read more »

Basic 3 Column Fixed Width CSS LayoutBasic 3 Column Fixed Width CSS Layout

Posted January 15th, 2009 in HTML and CSS

This post looks at how to create a very basic fixed width three column layout using CSS where the footer will appear below the three columns no matter how long each of the columns is.

Read more »

Fixed footer example using HTML and CSSFixed footer example using HTML and CSS

Posted January 8th, 2009 in HTML and CSS

This tutorial post shows how to have a footer appear at the bottom of a webpage using HTML and CSS even if the content for the page is short and doesn't fill the whole height of the browser window. When then browser is resized it stays at the bottom and moves with the window, but will not overlap the content area. If the content is higher than the browser window then the footer will remain underneath it.

Read more »

Switch off autocomplete for an HTML form fieldSwitch off autocomplete for an HTML form field

Posted December 6th, 2008 in HTML and CSS

Auto complete in form fields in web browsers can be extremely useful for helping a user to quickly complete a form. However there are times when you want to disable it, for example with the fields on a credit card payments form. This post looks at how to switch off autocomplete for an HTML form field.

Read more »

How to do the TM symbol in HTMLHow to do the TM symbol in HTML

Posted November 8th, 2008 in HTML and CSS

The character symbols for copyright and registered trademark are part of the HTML specification (those are the C and R in the circle symbols) but the superscript TM symbol to denote trademark is not. This short post looks at how you can insert the TM symbol into your HTML but be aware that because it is not supported by the HTML spec it may not render across all browsers and all operating systems correctly.

Read more »

Remove cellpadding and cellspacing from an HTML table with CSSRemove cellpadding and cellspacing from an HTML table with CSS

Posted November 5th, 2008 in HTML and CSS

The pre-CSS way to remove cellpadding and cellspacing from tables was to set the table cellpadding and cellspacing attributes to zero. However it's a nuisance to have to do this to all tables and it's easier to do this with CSS. This post looks at how to remove the default padding and spacing from an HTML table with CSS.

Read more »

Style an HTML form input with CSS and jQueryStyle an HTML form input with CSS and jQuery

Posted July 26th, 2008 in HTML and CSS and Javascript

It's possible with CSS to style a particular form input type without having to assign a class to each one with the special style. For example you may want to add a margin before radio buttons in a form but not all the other input elements. Unfortunately this doesn't work in Internert Explorer 6 (which still has about 25% market share as at the writing of this post) but there is a way around this using Javascript. In this post I'll look at both the CSS way of doing this and then also using the jQuery Javascript library.

Read more »

Targeting specific versions of Internet Explorer and other browsers with conditional commentsTargeting specific versions of Internet Explorer and other browsers with conditional comments

Posted June 18th, 2008 in HTML and CSS

Internet Explorer's conditional comments can be useful for applying different style sheets to older versions of Internet Explorer without having to hack your style sheets up too much. There are several different ways to target versions of Internet Explorer with condition comments by making the code between the conditions look like a regular HTML comment to other browsers. It is also possible to target particular versions of IE and also let all other browsers access the code between the comments. This post looks at how to do this, using a Javascript include file as an example.

Read more »

Internet Explorer 8's compatibility flagsInternet Explorer 8's compatibility flags

Posted May 30th, 2008 in HTML and CSS

Nick MacKechnie at Microsoft blogged about how Internet Explorer 8 is coming and that has a special flag which developers can but into a web page to make it render the page in IE7 mode. There is more info at the MSDN website and their defining document compatibility page.

Read more »

Using Internet Explorer Conditional Tags for Style Sheet SelectionUsing Internet Explorer Conditional Tags for Style Sheet Selection

Posted May 21st, 2008 in HTML and CSS

Internet Explorer has conditional commenting which allows you to put HTML into your web pages which show/not show depending on the version of Internet Explorer. This post looks at how to do this for selecting different or additional style sheets to load depending on the version of Internet Explorer used.

Read more »

Centering a page with HTML and CSSCentering a page with HTML and CSS

Posted May 6th, 2008 in HTML and CSS

This post looks at how to center the layout of a page in a web browser, so that it is initially centered and if the user resizes their browser it will remain centered. It is very easy to do using HTML and CSS with only a minor issue in older versions of Internet Explorer to deal with.

Read more »

Javascript and CSS file timestamps with PHPJavascript and CSS file timestamps with PHP

Posted November 1st, 2007 in HTML and CSS, Javascript and PHP

Many websites I have worked on have frequently modified CSS style sheets and Javascript library files. In order to prevent Javascript errors or layout and style issues caused by web browsers caching these files, I used to rename the file for each revision, and then modify the name of the CSS or JS file in my PHP header include files. This article looks out how I now do this using the modified timestamp of the file.

Read more »