Geek Answers Handbook

Aligning HTML code on only one computer (both IE8)

I have the following HTML and CSS code. It works fine in IE8 on a single machine; but it shifts in the second machine with IE8. What needs to be changed to fix this?

Note. Incorrect setting for Exit text.

Note. Image Size 214 X 57

Note. Both systems have the same resolution and 100% scaling.

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 div
0
javascript html css jsp
source share
5 answers

Just change

<a>Helpdsk Services Admins Site</a>

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

It works for me anyway (I had this problem before), one of the ways that shows that this is wrong, otherwise, it is not:

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

+1
source share

try adding this meta tag to the head:

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

This should interfere with compatibility mode in IE and force standard mode.

+3
source share

IE has a button to represent compatibility, check if both of them are checked. This button changes the compatibility version of IE.

You can install different css for different 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]-->
+2
source share

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

 <div id="signOut"> <a id="LoginStatus1">Logout</a> </div>
+1
source share

In most cases, I see this, the user slightly increased (or exited, but usually in), which led to slight distortion.

0
source share

More articles:


All Articles