Log in

View Full Version : IE alignment problems


TomK82
04-11-2012, 08:30 PM
Hi, this is my first time posting and building a website so forgive my naivety.

I have built the following site: http://www.top-farm.info/
which displays fine in FF, Safari, Goggle chrome but not IE.

I have been recommended to drop in the one of the following codes to over come this problem:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

or

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
jscheuer1
04-11-2012, 11:58 PM
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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to (the closest standards invoking DOCTYPE):


<!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):


<!DOCTYPE html>

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:


<!--[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:


#centreTubehead, #centreTube {
left: 50%;
margin-left: -275px !important;
}

in an external stylesheet - call it ie7.css, and put this in the head:


<!--[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.