Top banner is not showing up in IE

HTML & CSS
1

In Firefox and chrome the banner shows up. In IE it does not. Anyone know why?

Thank!

2

This page uses what is widely known as the HTML5 DOCTYPE <!DOCTYPE HTML>.

IE8 and below do not recognise HTML5 elements such as <header>, to which the banner image is applied as a background, hence the no-show.

Here’s an HTML5Doctor article on the subject.

As the above link will tell you, there are scripts that can coax earlier IEs and other older browsers into recognising HTML5 elements, but obviously the image would not be visible for visitors with javascript disabled, and other HTML5 elements may not render as intended.

As far as I can see, this is the only page on the site with the HTML5 DOCTYPE, other pages having XHTML 1.1 (which is itself not usually recommended. See the XHTML vs HTML FAQ).

Are you planning to recode your other pages to HTML5? Mixing and matching DOCTYPE’s within a site isn’t really advisable.

Also, there’s some confusion as to the site’s intended character encoding. The server appears to be set to UTF-8 whereas the XHTML pages use a META element to specify iso-8859-1. See the W3 Validator

Some CSS errors are also reported.

3

Okay, I changed the header to a div and the issue is resolved. So what version of HTML is recommended for best accessibly if HTML 5 and HTML 1.1 is not? I don’t actually have any HTML 5 elements in my code so I don’t think it would be an issue to change it.

4

One approach to choosing a Doctype would be to use the Doctype selector in the W3 validator to validate your pages against XHTML 1.0 Strict and HTML 4.01 Strict to find which one the markup most closely adheres to.

A quick look shows the markup has aspects of both XHTML and HTML, but it appears less work would be required to make your pages validate as XHTML 1.0 Strict.

Here are the changes required:

Home

Change the DOCTYPE and html tag:

Before

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

After


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Add a slash before the closing bracket of all link and img elements e.g.

Before

<link href="css/desktop.css" rel="stylesheet" type="text/css">

After

<link href="css/desktop.css" rel="stylesheet" type="text/css" />

Remove the <hgroup> and </hgroup> tags.

Remove target=“_blank” from this anchor:

Before

<a href="http://www.eternitywebdev.com" target="_blank">ETERNITY WEB DEVELOPMENT</a>

After

<a href="http://www.eternitywebdev.com">ETERNITY WEB DEVELOPMENT</a>

If you consider it essential to force a page to open in a new window, rather than allowing the user to choose, look into achieving this with javascript. If you’d rather avoid scripting and instead retain target_blank, I’d suggest staying with a Strict DOCTYPE and accepting this as an invalid element in the markup, rather than switching to Transitional merely to accommodate one exception.

All other pages

Change DOCTYPE and html tag:

Before


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

After


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Set the character encoding to UTF-8.

Before

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

After

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Add a slash before the closing bracket of this link element:

<link href=“SpryAssets/ics_menu.css” rel=“stylesheet” type=“text/css”>

Remove instances of target=“_blank” from anchors.

Program

Fix or remove the incomplete inline style of this img:

Before

<img padding:15px;" title="Burlington Daycare" src="assets/images/300s/153.jpg" alt="Burlington Daycare" />

After

<img style="padding:15px;" title="Burlington Daycare" src="assets/images/300s/153.jpg" alt="Burlington Daycare" />

Or

<img title="Burlington Daycare" src="assets/images/300s/153.jpg" alt="Burlington Daycare" />

Enrollment

Add slash to close this line-break:

Before

1 Executive Drive<br>

After

1 Executive Drive<br />

Contact Us

Add closing slash to this input, and all others on the page:

Before

<input  type="text" name="first_name" maxlength="50" size="30">

After

<input  type="text" name="first_name" maxlength="50" size="30" />

Remove extra quote from this td:

Before

<td valign="top"">

After

<td valign="top">

Remove the maxlength attribute from this textarea:

Before

<textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>

After

<textarea  name="comments" cols="25" rows="6"></textarea>

There is an end tag for a div that is not open. It would be safest for you to validate the page and check exactly where this is in your code.