HTML Alignment Issue in one machine only (both IE8)

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="nofollow noreferrer noopener" 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:

  1. Align contents inside a div

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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" rel="nofollow noreferrer noopener" />
<!--[if IE]> <link rel="stylesheet" type="text/css" href="css/chooser_ie.css" rel="nofollow noreferrer noopener" /> <![endif]--> 
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/chooser_IE6.css" rel="nofollow noreferrer noopener" /> <![endif]-->

Method 3

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.

Method 4

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

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

Method 5

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x