HTML and CSS
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
Google's remarketing code inserts an iframe (with no content) directly below the opening <body> tag, which is 300x13px and can throw out a website's layout. This post looks at how to effectively hide it with CSS in a couple of different ways that hopefully shouldn't mess with its functionality at all.
There may be times you need to apply a style if an element is empty, or if it is not empty. Use the :not & :empty selectors to do this, as shown in this post. They are supported by all modern browsers, and Internet Explorer from 9 and up.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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+.
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.
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.
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 :)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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"
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.
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.
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.
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.
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.
I am always forgetting how to make a font italic with CSS so this very brief post shows how to do it.
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.
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.
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.
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.
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.
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.
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.