Results 1 to 2 of 2

Thread: IE alignment problems

  1. #1
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default IE alignment problems

    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"/>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    hamada76 (04-24-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •