HTML Alignment Issue in one machine only (both IE8)

Question

I have the following HTML and CSS code. It works fine in IE8 in one machine; but misaligns in second machine with IE8. What is to be changed in order to correct it?

Note: The misalignment is for the “Logout” text.

Note: The dimension of the image is 214 X 57

Note: Both systems are in same resolution and 100% zoom.

enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1">

<title>Helpdsk Services Admins Site </title>

<link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

    <div id="container">

        <div class="clear">

            <div id="header">

                <div id="logo">

                    <img alt="logo" src="Images/Logo.png" />

                </div>

                <div id="titleInfo">

                    <a>Helpdsk Services Admins Site</a>

                    <div id="signOut">

                        <a id="LoginStatus1">Logout</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

 </div>

</body>

</html>

MasterStyle.css

body

{

   margin: 0px; padding: 0px; text-align: center; background: Orange;

}



#wrapper

{

   width: 100%; height: auto; text-align:left; margin: 0 auto; background: Orange;

}



#container

{

   width: 850px; height: auto; margin: 0 auto; background: white;

}



#header

{

   width: 850px; height: 70px; background: white; padding: 0 0 10px 0;

}



#titleInfo

{

font:bold 18pt Arial; color:#2377D1; width:590px; height:35px; float:left; margin:10px 0 0 10px; 

border-bottom:3px solid #fcda55; padding: 10px 0 0 0; display:inline;

}



#signOut

{

font:bold 9pt Arial;float:right;border-bottom:none;padding: 0px 10px 0 0;display:inline;

}



#logo

{

   width:200px; height:60px; float:left; margin:0 0 0 20px; display:inline; padding: 10px 0 0 0;

}



.clear

{

   clear: both;

}

READING:

Align contents inside a div

score 2 · Answer 1 · answered Mar 30 '12 at 13:19

2

try to add this meta tag to your head:

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

That should prevent the compatibility mode in IE and force the standard mode.

answered Mar 30 '12 at 13:19

Sven Bieder

5,515
2
21
27

Any solution that will make it working even in IE7 (thouh I have not tested it in IE7)? – LCJ Mar 30 '12 at 13:34
IE7 can be targeted with – zadubz Mar 30 '12 at 14:40
Adding the meta tag worked. Thanks. It is a good piece of information. However, @Wolf-Kun answer was more suitable for my simple case. – LCJ Apr 02 '12 at 14:43

score 1 · Answer 2 · edited Feb 28 '16 at 09:14

1

The IE has a button for Compatibility View, check if the both are checked. This button change the IE compatibility version.

You can set differents css for differents versions:

<link rel="stylesheet" type="text/css" href="css/chooser.css" />
<!--[if IE]> <link rel="stylesheet" type="text/css" href="css/chooser_ie.css" /> <![endif]--> 
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/chooser_IE6.css" /> <![endif]-->

edited Feb 28 '16 at 09:14

Sevle

3,109
2
19
31

answered Mar 30 '12 at 13:06

Victor

8,309
14
80
129

I need to make it working for all settings. There are multiple users accessing the websie with their own configuration. Any other thoughts? – LCJ Mar 30 '12 at 13:08
@Lijo when IE8 is in "compatibility" mode, it's basically mimicking IE7. Does your page work in IE7? – Pointy Mar 30 '12 at 13:10
It worked in IE6 from a different machine. I am looking for a solution that will work in all versions > 1E6 in all configurations. This should be possible because it is such a basci alignment issue. – LCJ Mar 30 '12 at 13:35
@Lijo, you can configure your CSS according with IE version and test for compatibility check or unchecked – Victor Mar 30 '12 at 13:37
Can you pls tell what change I need to make it working for IE7? – LCJ Mar 30 '12 at 13:49
You can set differents css for differents versions: http://www.thesitewizard.com/css/excludecss.shtml See example on the answer – Victor Mar 30 '12 at 13:53

score 1 · Accepted Answer · answered Mar 30 '12 at 15:29

1

Just change

<a>Helpdsk Services Admins Site</a>

to <a style="float:left;" >Helpdsk Services Admins Site</a>

Works for me anyhow (I've had this issue before), one way the ie shows misallign, other way, it doesn't:

PS. If you prefer classes all the time, just make one for you <a> tag.

answered Mar 30 '12 at 15:29

Wolf-Kun

679
6
12

Could you please answer http://stackoverflow.com/questions/9978592/fixed-height-and-changing-width-for-header-html-table ? – LCJ Apr 02 '12 at 14:52

score 1 · Answer 4 · answered Mar 31 '12 at 03:20

1

try taking below and put it above <div id="logo">

<div id="signOut">
    <a id="LoginStatus1">Logout</a>
</div>

answered Mar 31 '12 at 03:20

Funky Dude

3,867
2
23
33

score 0 · Answer 5 · answered Mar 30 '12 at 13:07

0

Most of the time I see this, the user is slightly zoomed in (or out, but normally in) causing things to be slightly askew.

answered Mar 30 '12 at 13:07

Aaron Daniels

9,563
6
45
58

Both systems are in same resolution and 100% zoom. How do we ovoercome this? – LCJ Mar 30 '12 at 13:10

HTML Alignment Issue in one machine only (both IE8)

5 Answers5

Linked