Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

IE9 causing broken layout

Posted on 2014-10-28
10
Medium Priority
?
145 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
  • 4
  • 3
  • 3
10 Comments
 
LVL 41

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 41

Expert Comment

by:Eoin OSullivan
ID: 40408501
The <a> anchor tag issue wasn't a cause .. but worth fixing nonetheless
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 41

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 41

Accepted Solution

by:
Eoin OSullivan earned 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
Each password manager has its own problems in dealing with certain websites and their login methods. In Part 1, I review the Top 5 Password Managers that I've found to be the best. In Part 2 we'll look at which ones co-exist together and why it'…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

577 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