ie9 not applying css to header or footer, firefox works great

roberts...@gmail.com

unread,

May 22, 2013, 1:43:08 PM5/22/13

to

Hi,

I am trying to rewrite a website in html5. The code I have works in firefox, but it doesn't work in IE9. In IE9 the blue bars are missing and the header is left justified even though I told it right justification. I did a search for IE9 css problems only to find css problems for IE8 and below. I ran the code through validator.w3.org and it comes back clean. I am using IE9 fully patched on a fully patched Windows 7 x64 computer. IE10 won't be deployed until next year so I have to use IE9. Am I doing something wrong?

Thank you,
Bob

<!DOCTYPE html>
<html>
<head>
<title>website</title>
<meta charset="UTF-8">
<meta name="description" content="This is a test website">

<style>
html {
height: 100%;
}

body {
width: 800px;
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
background: -webkit-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#C13B5A), color-stop(100%,#ffffff));
background: -moz-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
background: -o-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
background: linear-gradient(to bottom, #C13B5A 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C13B5A', endColorstr='#ffffff', GradientType=0 );
}

section,article,aside{
display: block;
}

header {
display: block;
line-height:22px;
vertical-align:middle;
height:106px;
text-align:right;
background-color:#36436F;
background-repeat: no-repeat;
padding-right:10px;
}

footer {
line-height: 22px;
vertical-align:middle;
height:22px;
text-align:left;
background-color:#36436F;
background-repeat: no-repeat;
color:#ffffff;
padding-left: 25px;
}
</style>
</head>

<body>
<header>
<a href="/" style='color:white'
onmouseover="this.style.color='yellow';"
onmouseout="this.style.color='white';">Home</a> 
• 

<a href="/News.asp" >News</a>
• 

<a href="/ContactUs.asp" style='color:white'
onmouseover="this.style.color='yellow';"
onmouseout="this.style.color='white';">Contact Us</a>
</header>

<p> this is a test</p>

<footer>
Footer info.
</footer>
</body>
</html>

Thomas 'PointedEars' Lahn

unread,

May 22, 2013, 4:55:14 PM5/22/13

to

roberts...@gmail.com wrote:
^^^^^^^^^^^^^^^^^^^^^^^^
Please fix that.

> I am trying to rewrite a website in html5. The code I have works in

_HTML5_

> firefox, but it doesn't work in IE9. In IE9 the blue bars are missing and
> the header is left justified even though I told it right justification. I
> did a search for IE9 css problems only to find css problems for IE8 and
> below. I ran the code through validator.w3.org and it comes back clean.

The W3C Validator cannot not check for semantic or compatibility problems.
Also, HTML5 support is still experimental there.

> I am using IE9 fully patched on a fully patched Windows 7 x64 computer.

You should post the unforged User-Agent header field value (or
navigator.userAgent value) next time.

> IE10 won't be deployed until next year so I have to use IE9. Am I doing
> something wrong?

Probably, see <news:2354532.M...@PointedEars.de>

> <!DOCTYPE html>
> <html>
> <head>
> <title>website</title>

<http://www.w3.org/QA/Tips/good-titles>

> <meta charset="UTF-8">
> <meta name="description" content="This is a test website">

You can't be serious.

> <style>

It is probably a good idea to still specify the ”type” attribute on the
“style” and “script” elements for the time being.

> html {
> height: 100%;

Without effect as the element is not positioned.

> }
>
> body {
> width: 800px;
^^^^^
You can't be serious. Ever heard of wide-screen displays and Responsive Web
Design (RWD)?

> margin: 0 auto;
> padding: 0;
> background-color: #FFFFFF;

background-color: #fff;

is more compatible.

The corresponding “color” declaration is missing, potentially causing
usability issues:

<http://www.w3.org/QA/Tips/color>

> background: -webkit-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
> background: -webkit-gradient(linear, left top, right bottom,
> color-stop(0%,#C13B5A), color-stop(100%,#ffffff));

AFAIK the order of those two declarations should be swapped.
-webkit-gradient(…) is the older, AFAIK less efficient, more buggy, less
standards-compliant function for earlier Safari versions, now deprecated:

<https://www.webkit.org/blog/1424/css3-gradients/>

> background: -moz-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
> background: -o-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
> background: -ms-linear-gradient(top, #C13B5A 0%, #ffffff 100%);
> background: linear-gradient(to bottom, #C13B5A 0%, #ffffff
> 100%); filter:
> progid:DXImageTransform.Microsoft.gradient(startColorstr='#C13B5A',
> endColorstr='#ffffff', GradientType=0 );
> }

For the corporate website of a large international company we had eventually
decided not to use gradients for IE at all (neither filter nor -ms-linear-
gradient) because of text on those elements becoming partially translucent
and “click-transparent” (for lack of a better word) in IE < 9. Since that
was for a dropdown navigation menu, this behavior was not acceptable since
the text links could not be triggered in all places of the glyphs as a
result.

> section,article,aside{
> display: block;
> }
>
> header {
> display: block;
> line-height:22px;

^
Please don't.

> vertical-align:middle;
> height:106px;
^^
Please don't.

> text-align:right;
> background-color:#36436F;

If the value #333366 for a similar color would be acceptable instead, you
could use the color-depth independent value, #336:

<http://www.w3.org/TR/css3-color/#numerical>

> background-repeat: no-repeat;

No “background-image” declaration, no need to declare “background-repeat”.

> padding-right:10px;

Your design does not scale to the font-size. Use “em” instead of ”px”
almost always.

> }
>
> footer {

Missing

display: block;

> [same problems as above]
> }
> </style>
> </head>
>
> <body>
> <header>

This should probably be

<header>
<nav>

See also: <http://html5doctor.com/downloads/h5d-sectioning-flowchart.png>

> <a href="/" style='color:white'
> onmouseover="this.style.color='yellow';"
> onmouseout="this.style.color='white';">Home</a> 

Please do not use client-side scripting for that, there are CSS pseudo-
classes (*at least* the hyperlink text colors should differ between normal,
:hover, :visited, :focus and :active):

<http://www.w3.org/TR/css3-selectors/#pseudo-classes>

> • 
> <a href="/News.asp" >News</a>

This is asemantic, therefore not interoperable and not accessible. Use list
elements like “ol”, “ul”, or “dl” instead:

<http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#grouping-content>

And please do not misuse the   CRE for spacing. If you need more
spacing, use margins and/or paddings:

<http://www.w3.org/TR/CSS2/box.html#box-dimensions>

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

Thomas 'PointedEars' Lahn

unread,

May 22, 2013, 4:56:02 PM5/22/13

to

roberts...@gmail.com wrote:
^^^^^^^^^^^^^^^^^^^^^^^^
Please fix that.

> I am trying to rewrite a website in html5. The code I have works in

_HTML5_

> firefox, but it doesn't work in IE9. In IE9 the blue bars are missing and
> the header is left justified even though I told it right justification. I
> did a search for IE9 css problems only to find css problems for IE8 and
> below. I ran the code through validator.w3.org and it comes back clean.

The W3C Validator cannot check for semantic or compatibility problems.

Also, HTML5 support is still experimental there.