Wickham's HTML & CSS tutorial

Frequently Asked Questions

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Centering a page

Hidden drop down menu

Background behind floated divs

Email direct from a web form

The Q tag element

How do I center a page in any resolution?

1 green icon There are two ways to center a page in any viewport (window) resolution. The term viewport or window resolution is used in preference to screen resolution because the user may have reduced the viewport (window) size smaller than the screen size.

For details see Centering Divs.

How do I repeat content on many pages and have just one place to edit the code if it changes?

2 green icon There are two main ways to repeat a section of text or images or any content on several pages and have the code in one place so that you only have to edit it in one place and all the pages will have revised content. Use SHTML Server Side Includes (SSI) or preferably PHP "include" files. These are suitable for use for a header, menu, footer or any other content section. Use one "include" file for each section of a page that you want to repeat on many pages. PHP has far more options for other uses such as form processing, so use PHP in preference to SHTML which is old-fashioned and has limited application.

For details see Server Side Includes & PHP.

How do I get my containing div to show a background-color or background-image behind floated divs?

3 green icon This happens when you have floated divs. You need use overflow: hidden; in the containing div style or insert a clearer div with clear: both and no height below the floated divs before the containing div's </div> closing tag. Floated divs have no height so the container div doesn't know what height to give itself so the floated divs appear to "hang down" below the containing div which doesn't show a background for the height of the floated divs. The div with no float will force the containing div to drag down its background behind the floated divs. The alternative overflow: hidden; in the containing div style is an accepted hack that tricks the containing div into applying a height over the floated divs.

There are two main reasons for using a clearer div:-

1. to drag down the background color or image in a containing div where elements inside have a float. For details see Firefox / IE backgrounds. Item 2b is the example with the clearer div and item 2d is the example with overflow: hidden; but there are others.

2. to follow rows of floated elements to prevent an element which should be on a lower row jumping up into a space in a higher row. The div with clear: both; and no height forms a full-width invisible barrier to stop lower divs moving up into any space above. For details see Two and three Column layouts item 20.

How do I stop my drop down menu being hidden behind Javascript or Flash items?

4 green icon You need to use a z-index and a position (usually position: relative but it could be position: absolute). Apply the lower z-index to the javascript parent div and the higher z-index to the drop down menu parent div. The position enables the z-index to operate (it sometimes does without the position, but don't assume that it always will).

The CSS code might be like this:-

#menu { position: relative; z-index: 5; }
#image-slider { position: relative; z-index: -1; }

For Flash videos you need to add code into the object and embed tags to make the flash transparent. The position: relative; z-index: -1; code above isn't necessary.

The HTML markup code might be like this:-

<param name="wmode" value="transparent">
wmode="transparent" <--added into the embed tag-->

How do I show a .mpg, .mp4 or .swf video in my webpage?

5 green icon The object tag and nested embed tag method is still popular because it plays in most old browsers but the embed tag doesn't validate. Flash .swf files can be made to validate if only the object tag is used but Adobe Flash Player needs to be pre-installed, so Flash may not work in some browsers until Flash Player is downloaded and installed. There are many different video formats and many different codes, so you may need to search for an answer to suit your requirements.

For details of code for .mpg or .mp4 videos see Video examples and for code for .swf Flash videos see Flash video examples.

The HTML5 <video>...</video> video tag is processed by Firefox, Safari, Google Chrome and Opera but not by IE6, IE7 or IE8. However, IE9 and above support the H.264 (for mp4) video format with the <video> tag. These pages from Mozilla (Theora - ogg type ogv format) and Safari Reference Library (H264 - mp4 format) and Kaltura and dev.opera.com (Theora - ogv format) show the code. The working draft of the HTML5 video and audio standard is at whatwg.org. The audio element is similar and html5doctor is a tutorial.

At present browsers process different formats from each other but you can code the same video or audio in several different source types (formats) and a browser will play the first format that it is able to play. If the following video doesn't play in your browser it's because I haven't coded an extra format suitable for your browser. This Wikipedia page lists appropriate formats for different browsers.

<video width="320" height="256" controls="controls">
<source src="images/tutorial.mp4" type="video/mp4">
<source src="images/tutorial.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>

The .ogv format is a .ogg type and was given when I converted from another format using this online converter from online-convert.com.

Flash in HTML5

It seems that for .swf Flash files the <embed.../> tag will be used instead of the <video>...</video> tags. The embed tag has been reintroduced in HTML 5 and will validate in the future but at present it remains an IE vendor-specific tag which doesn't validate. There is no closing tag, as shown in this w3resource.com tutorial:-

HTML markup:-

The code is:-

The CSS code is:-

embed { width: 500px; height: 450px; }

How do I get form data sent to my email address or database without spammers getting hold of my email address and without needing an email client?

6 green icon Use a PHP form. Viewers and spambots cannot see your email address because it is hidden in the PHP process page which is not accessible. It enables a viewer to send an email if he/she is using another computer without his/her normal email client, for instance from an Internet Café.

It's best to download and install a script which has security measures against spammers. There are scripts available at Form Processor Pro and Formmail.

There are basic examples of web forms here:- Forms to email and a database form here:- Form to database.

Additional code for security will probably be required so use a search engine or forum for help when you know what type of spammer you have (nuisance poster or spambot).

How do I send an HTML email?

7 green icon HTML emails are difficult because browsers process the code very differently. It's usual to use only old-fashioned HTML table code and even that needs simplification.

For details see "General advice regarding HTML emails" near the bottom of this page:- HTML emails.

Why does my page content shift sideways when I move to another page?

8 green icon It's the effect you get in browsers like IE8 and above, Firefox, Safari, Opera and Google Chrome which don't show a vertical scrollbar unless it's necessary, so the window width is greater, so the content is a little further to the right on the page without a vertical scrollbar and you see the page shift when you move from a page with a vertical scrollbar to one without. It doesn't happen in IE6/7 which has a dummy scrollbar but IE8 and above and other browsers don't show a dummy scrollbar when there isn't much content height.

Add this at the top of your stylesheet:- html { overflow-y: scroll; } which creates a dummy vertical scrollbar in IE8 and above, Firefox, Safari, Opera and Chrome to match the real vertical scrollbar on another page which has more height than the viewport.

How do I make my page fit any screen resolution width?

9 green icon You can achieve that by coding all widths in % (divs, forms, tables, lists, every element including side margins and side padding, all to total 100%.

Side borders can't be sized in % so if you have them, leave them in px and make the total of the other items 97% or 98% to allow for the borders.

You also need to code images in % width (don't state a height and the height will adjust in proportion) like

You will find that your page will look very squashed up in a small window like 320px (hand-held resolution) and very spaced out in a large window like 1920px, so you need to be careful with your design. It works best if there isn't much on the page, or all text which breaks into lines.

A different solution is not to use % for anything, but use a containing div with max-width and min-width and elements with no width inside will expand or contract within those limits. IE6 doesn't process min or max width so you have to use a conditional comment with a fixed container width for IE6.

How do I make the q tag the same in all browsers?

10 green icon The q tag, used for short inline quotations, behaves differently in different browsers. Some add vertical style " quotation marks, some add ' marks, some in curved style ‘ ’ and some in “ ” and IE doesn't add any.

An additional complication is that w3.org says "Authors should not put quotation marks at the beginning and end of the content of a Q element.". If you do add your own quote marks you will see double quotes in some browsers.

The current solution as set out in A List Apart seems to be to have reset styles which will disable quotes in all browsers and then add your own OUTSIDE the <q> and </q> tags which is still valid and sorts out all problems including adding them into IE. Meyer's reset Meyer reset is a popular reset choice where these two styles have been added:-

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

I usually add italic to the q style because I like to see quotes in italics:-

q { font-style: italic; }

The code for a typical quote inside other text might be:-

<p>The w3.org website says "<q>Authors should not put quotation marks at the beginning and end of the content of a Q element.</q>" so don't do it, put them outside the content of the q tag.</p>

How do I make all columns the same height?

11 green icon If you have background-color or background-image to several columns that are floated side by side, the backgrounds will be different heights depending on the div content height.

The easiest method to code if you want a plain background-color the same height to all columns is to use "faux-columns" where a background-image is used with repeat-y to extend it down over all columns, see item 18 here:- Faux-columns but this method must be for fixed width columns.

If you want a fluid width layout or background-images to the columns with a pattern or photo, use this tutorial:- matthewjamestaylor.com where any column can have the most height, but the code is a bit complicated.

If you know which column will always have the most height, even after future editing, for instance a content column on the right with a shorter sidebar on the left, you could use item 16a here:- Two equal columns or for a three column design where the middle column has the most height, use item 17a here:- Three equal columns.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev