Solved

IE9 causing broken layout

Posted on 2014-10-28
10
134 Views
Last Modified: 2014-11-08
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

0
Comment
Question by:peter-cooper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
10 Comments
 
LVL 40

Expert Comment

by:Eoin OSullivan
ID: 40408265
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
 

Author Comment

by:peter-cooper
ID: 40408497
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
 
LVL 40

Expert Comment

by:Eoin OSullivan
ID: 40408501
The <a> anchor tag issue wasn't a cause .. but worth fixing nonetheless
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 50

Expert Comment

by:jcimarron
ID: 40408712
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
 
LVL 40

Expert Comment

by:Eoin OSullivan
ID: 40408928
@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
 
LVL 50

Expert Comment

by:jcimarron
ID: 40409138
eoinosullivan--
peter-cooper--

Yes, http:#a40408712 should have been directed at peter-cooper.  Hope it helps.
0
 

Author Comment

by:peter-cooper
ID: 40409195
So to cut a long story short guys, whats the answer. Convert widths to px for ie9? Thanks for comments.
0
 
LVL 40

Accepted Solution

by:
Eoin OSullivan earned 500 total points
ID: 40409339
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
 
LVL 50

Expert Comment

by:jcimarron
ID: 40409477
peter-cooper--
This may also be of interest
http://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx
0
 

Author Closing Comment

by:peter-cooper
ID: 40430185
Thanks for info. helped me on my way.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question