IE9 causing broken layout

I am trying to find a solution as to why in IE9, my layout is broken, as you will see from the attached grab. However, in all other browsers, inc IE10, it displays correctly. I have spent the last two days trying to find a solution as to this problem and have tried many things inc various clear options. I stripped my code down to the bare skeleton, with the minimum css, but cannot find a way to repair this broken layout.

Can someone please tell me where I am going wrong as I am going nuts trying to sort it. Many thanks.

IE9 Broken layout
IE9 Broken layout
IE10 Correct Layout
IE10 Correct Layout
html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title> ie9 test page</title>

<link href="cp.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="TopColumn">
<br /><br />
<span class="setsName">Hello, <?php echo $_SESSION['kt_name_usr']; ?></span>
<br /><br />
<span class="setSubTitle">Welcome to the Logistor customer control panel.</span>
</div>
<br />

<div id="cpContainer">
        <div id="settingsDiv">
            <p>
                <span id="setHeader">Settings</span>
                <span id="setHeaderRight" class="tooltip" title="Close"></span>
            </p>
                <hr />
                <div id="setsTitle">
                    <div id="setContainerDiv" style="float:left; width: 100%; margin: 30px 0 44px -6px; font-size: 11px; text-align: center; color: #A8A8A8 !important;">

                    <div id="setIconLeft" style="float:left; width: 32%; margin: 0 0 0 -10px;">
                    <a href="#"><img src="images/smlDeptIcon.png" height="48" width="48" class="tooltip" title="This is the dept" id="setDept"><a/><br />Departments
                    </div>

                    <div id="setIconMid" style="float:left; width: 33%; margin: 0 0 0 0;"">
                    <a href="#"><img src="images/smlProfileIcon.png" height="48" width="48" class="tooltip" title="This is the profile" id="setProfile"><a/><br />Profile
                    </div>

                    <div id="setIconRight" style="float:left; width: 33%; margin: 0 0 0 0;">
                    <a href="#"><img src="images/smlChgPassIcon.png" height="48" width="48" class="tooltip" title="This is the pass" id="setPass"><a/><br />Change Password
                    </div>

               </div>
        </div>
        <br />

        </div>

        <div id="DestructionDiv">
            <p><span id="destHeader">Destruction</span></p>
              <hr />
                <div id="DestructTitle">
                    <div id="destContainerDiv" style="float:left; width: 100%; margin: 30px 0 44px -6px; font-size: 11px; text-align: center; color: #A8A8A8 !important;">

                        <div id="destIconLeft" style="float:left; width: 33%; margin: 0 0 0 -10px;">
                        <a href="#"><img src="images/smlDestructIcon.png" height="48" width="48" class="tooltip" title="destruction schedule administration" id="destSchedule"><a/><br />Schedule
                        </div>

                        <div id="destIconMid" style="float:left; width: 33%; margin: 0 0 0 0;"">
                        <a href="#"><img src="images/destCertIcon.png" height="48" width="48" class="tooltip" title="Destruction Certificates. Coming Soon" id="setDestCert"><a/><br />Certificates
                        </div>

                        <div id="destIconRight" style="float:left; width: 33%; margin: 0 0 0 0;">
                    <a href="#"><img src="images/batchDestIcon.png" height="48" width="48" class="tooltip" title="Batch destroy boxes. Coming Soon" id="setBatch"><a/><br />Batch Destruction
                    </div>
                </div>
             </div>
        </div>
  </div>
</body>
</html>

Open in new window


css

#cpContainer  {
        background-color: #f0f0f0;
        float:left; 
        width: 96%; 
        border: 1px solid #ccc; 
        margin-left:30px;
        margin-top: 10px;
        margin-bottom: 70px;
        -wekbit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }

    #settingsDiv {

        background-color: #fff;
        float:left; 
        width: 35%;
        border: 1px solid #ccc; 
        margin:10px 10px;
        -wekbit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        background-image: url("../images/settingsIcon32.png");
        background-repeat: no-repeat;
        background-position: 20px 7px;
        clear:right;
    }

    #DestructionDiv {

        background-color: #fff;
        float:left; 
        width: 35%;
        border: 1px solid #ccc; 
        margin:10px 10px;
        -wekbit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        background-image: url("../images/DestructIcon.png");
        background-repeat: no-repeat;
        background-position: 20px 7px;
    }

    #FilesDiv {

        background-color: #fff;
        float:left; 
        width: 35%;
        border: 1px solid #ccc; 
        margin:10px 10px;
        -wekbit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        background-image: url("../images/file_icon_32.png");
        background-repeat: no-repeat;
        background-position: 20px 7px;
    }

    #SideDiv {

        background-color: #fff;
        float:left; 
        width: 24%;
        border: 1px solid #ccc; 
        margin:10px 10px;
        -wekbit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        background-image: url("../images/ComeSoonIcon32.png");
        background-repeat: no-repeat;
        background-position: 20px 7px;
        vertical-align:top;
    }

    #TopColumn  {
        background-color: #f3f3f3;
        height:130px;
        margin-top: -2px;
    }

    #setsTitle  {

        font-family: Verdana, Geneva, sans-serif;
        font-size: 11px;
        color: #a8a8a8;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 10px;
        line-height: 30px;
    }

    div#setsTitle a {

        /*color: #000;*/
        text-decoration: none;
    }

    div#SideTitle a {

        color: #000;
        text-decoration: none;
    }

    #DestructTitle  {

        font-family: Verdana, Geneva, sans-serif;
        font-size: 11px;
        color: #a8a8a8;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 10px;
        line-height: 30px;
    }

    #FilesTitle  {

        font-family: Verdana, Geneva, sans-serif;
        font-size: 11px;
        color: #a8a8a8;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 10px;
        line-height: 30px;
    }

    #SideTitle  {

        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #a8a8a8;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 10px;
        line-height: 30px;
    }

    div#setsTitle a {

        /*color: #000;*/
        text-decoration: none;
    }

    div#SideTitle a {

        color: #000;
        text-decoration: none;
    }

    div#DestructTitle a {

        /*color: #000;*/
        text-decoration: none;
    }

    #setHeader{

        width: 90%;
        font-size: 20px;
        margin: 0 0 20px 60px;
        color: #3D80E4;

    }

    #setHeaderRight{

        float:right;
        margin-right: 20px;
        margin-top: -5px;
        height: 32px;
        width: 33px;
        cursor: pointer;
    }

    #destHeader{

        font-size: 20px;
        margin: 0 0 20px 60px;
        color: #3D80E4;

    }

    #FilesHeader{

        font-size: 20px;
        margin: 0 0 20px 60px;
        color: #3D80E4;

    }

    #sideHeader{

        font-size: 20px;
        margin: 0 0 20px 60px;
        color: #3D80E4;

    }

    #setDeptShow{

        width: 90%;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 12px;
        color: #a8a8a8;
        margin-left: 30px;
        margin-bottom: 40px;
    }

    #setProfileShow{

        width: 90%;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 12px;
        color: #a8a8a8;
        margin-left: 30px;
        margin-bottom: 40px;
    }

    #setDestScheduleShow{

        width: 90%;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 12px;
        color: #a8a8a8;
        margin-left: 30px;
        margin-bottom: 40px;
    }

    #setChgPassShow{


        width: 90%;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 12px;
        color: #a8a8a8;
        margin-left: 50px;
        margin-bottom: 40px;
    }

    span.setsName{

        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: #3d80e4;
        margin-left: 34px;

    }

    span.setSubTitle{

        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 22px;
        color: #a8a8a8;
        margin-left: 34px;

    }

    hr {
     border: 1px solid #e1e9f5;
     background: #e1e9f5; 
     width: 90%; 
     height: 1px;
     margin: 10px 0 1px 20px ;
    }

img {

    outline: none;
    border: 0;

}

Open in new window

peter-cooperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eoin OSullivanConsultantCommented:
There are a few errors in the HTML . ...
All your <a> anchor closing tags are incorrect .. should be </a>

The inline style applied to the div destContainerDiv is not helping your overall layout

Remove all the inline styles  in the HTML and try and apply all the CSS in the css file instead so that it is easier to manage

See the block of code below .. I've added a class to all the icons/buttons so that you can style them in the CSS
<div id="cpContainer">
    <div id="settingsDiv">
        <p><span id="setHeader">Settings</span><span id="setHeaderRight" class="tooltip" title="Close"></span></p>
        <hr/>
        <div id="setsTitle">
            <div id="setContainerDiv">
                <div id="setIconLeft" class="button"><a href="#"><img src="images/smlDeptIcon.png" height="48" width="48" class="tooltip" title="This is the dept" id="setDept"/></a><br/>Departments
                </div>

                <div id="setIconMid" class="button">
                    <a href="#"><img src="images/smlProfileIcon.png" height="48" width="48" class="tooltip" title="This is the profile" id="setProfile"></a><br/>Profile
                </div>

                <div id="setIconRight" class="button">
                    <a href="#"><img src="images/smlChgPassIcon.png" height="48" width="48" class="tooltip"  title="This is the pass" id="setPass"></a><br/>Change Password
                </div>

            </div>
        </div>
        <br/>

    </div>

    <div id="DestructionDiv">
        <p><span id="destHeader">Destruction</span></p>
        <hr/>
        <div id="DestructTitle">
            <div id="destContainerDiv">
                <div id="destIconLeft" class="button">
                    <a href="#"><img src="images/smlDestructIcon.png" height="48" width="48" class="tooltip" title="destruction schedule administration" id="destSchedule"></a><br/>Schedule
                </div>

                <div id="destIconMid" class="button">
                    <a href="#"><img src="images/destCertIcon.png" height="48" width="48" class="tooltip"  title="Destruction Certificates. Coming Soon" id="setDestCert"></a><br/>Certificates
                </div>

                <div id="destIconRight" class="button">
                    <a href="#"><img src="images/batchDestIcon.png" height="48" width="48" class="tooltip" title="Batch destroy boxes. Coming Soon" id="setBatch"></a><br/>Batch Destruction
                </div>
            </div>
        </div>
    </div>
</div>

Open in new window


Add the following code to your CSS
    #setContainerDiv .button,
    #destContainerDiv .button {
        float:left;
        width: 33%;
        margin: 0 0 0 0px;
        text-align: center;
    }
    #setContainerDiv div:first-of-type,
    #destContainerDiv div:first-of-type {
            margin: 0 0 0 -10px;
        }

Open in new window

aaaa.html
0
peter-cooperAuthor Commented:
Thanks for reply.
All your <a> anchor closing tags are incorrect .. should be </a>
I realised that when I posted. But hasn't made any difference. I shall try your code and report back. Thanks
0
Eoin OSullivanConsultantCommented:
The <a> anchor tag issue wasn't a cause .. but worth fixing nonetheless
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jcimarronCommented:
eoinosullivan--
I am no expert on coding webpages.  So the following may be pretty rudimentary to you.
Why doesn't your webpage look correct using IE 9?  Because you did not code for IE9.  It would seem your coding is correct for IE10.  The standards for coding the two versions of IE are quite different.

http://msdn.microsoft.com/en-us/hh779632.aspx

W3C offers a lot of info on coding including a Validation Tool
http://validator.w3.org/
And click some of the other links for a ton of more info.
0
Eoin OSullivanConsultantCommented:
@jcimarron - I assume you're directing your comment at peter not me?

I didn't want to get into all the idiosyncracies of IE browser versions as just about every browser and version has its own variances from the official W3C standards ..

There's no 100% standards compliant browser Firefox, Chrome, Safari and Explorer all have subtle differences.  Unless your coding for a closed environment where all users have a standard browser it is never a great idea to code for one specific browser such as IE9.  It is best to try and use a standard-compliant code and then put in over-rides/exceptions to fix or workaround the variations in certain browsers (Explorer being the most common to deviate).

Apart from the incorrect anchor tag there were no fundamental code errors in peter's HTML or CSS so the W3C validator would not help him with this issue.  The problem lies in differences between the rendering engine of IE9 and IE10 (which is more standard compliant) and the box model interaction between elements with % widths and px margins.
0
jcimarronCommented:
eoinosullivan--
peter-cooper--

Yes, http:#a40408712 should have been directed at peter-cooper.  Hope it helps.
0
peter-cooperAuthor Commented:
So to cut a long story short guys, whats the answer. Convert widths to px for ie9? Thanks for comments.
0
Eoin OSullivanConsultantCommented:
Did you load the HTML file in IE9 on your PC?  How does it look?  The aaaa.html file looks fine in IE9 for me.
If it still has issues .. you'll need to clarify what screen size are you working with?

Using all % or all px will give you a more reliable result ..

Looking at your code .. the 2 enclosing divs only use 70% of cpContainer .. and have 10px margins either side and borders.
You've also mixed floating elements with elements inside which are not floating which makes the overall object model a little unstable.


cpContainer (width: 96%)
-> settingsDiv (width 35% & float)
--> setsTitle (no float and margins)
---> setContainerDiv
-> DestructionDiv  (width 35% & float)
--> DestructTitle (no float and margins)
---> destContainerDiv

Apart from substantially rewriting the CSS or HTML .. the short answer is that I'd not start from this code as it seems to be overly nested and there's a lot of unnecessary code.

You're using margin-left -10px on your buttons to override an unnecessary margin you introduced in the enclosing divs (setsTitle & DestructTitle).
remove all margins from setsTitle & DestructTitle, float them left and set width to 100% and it will begin to simplify things.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jcimarronCommented:
peter-cooper--
This may also be of interest
http://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx
0
peter-cooperAuthor Commented:
Thanks for info. helped me on my way.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.