Nope, those won't help here.
For IE 8 and 9 all you need to do is give the page a standards invoking DOCTYPE. Change:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to (the closest standards invoking DOCTYPE):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or more simply (the HTML 5 DOCTYPE):
However, although that will greatly improve things in IE 7, parts of the center will still be way off to the right. To fix that, put this in the head of the page:
Code:
<!--[if lt IE 8]>
<style type="text/css">
#centreTubehead, #centreTube {
left: 50%;
margin-left: -275px !important;
}
</style>
<![endif]-->
Or, if you prefer you can put those rules:
Code:
#centreTubehead, #centreTube {
left: 50%;
margin-left: -275px !important;
}
in an external stylesheet - call it ie7.css, and put this in the head:
Code:
<!--[if lt IE 8]>
<style type="text/css">
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
Or, since those styles will work for all others as well, just put them in the main stylesheet.
What this does is, since the elements are already position absolute, it positions their left edge in the center (left: 50%). And since they're also both 550px wide, by giving them a negative margin-left of half that (-275px), it makes them appear perfectly centered.
Bookmarks