Why must IE be such a pain???

**griffinwebnet** · 07-22-2011, 10:28 PM

I have written a login form which displays perfectly centered on the page in firefox, safari, opera, konquer, and even mozilla thunderbird (when using the slightly dumbed down web browsing plugin), But not IE

... Any version... no the login form for some reason is off to the left and at the top...75% off screen every part of the form is off screen except the 'et' on the reset button. WTF Microsoft?!?!?! i had to write a seperate login form for ie... what a pain.....

- JL Griffin

**jscheuer1** · 07-23-2011, 01:05 AM

As a general rule use a standards invoking DOCTYPE and no center tags, no align="center" attributes, and no text-align: center styles in situations where those elements have elements as children. And/or avoid all absolute, relative and fixed positioning.

Specific situations may vary.

If you want specific help post a link to your page in the css or HTML forums.

In any case, having a separate page for IE can almost always, and should almost always be avoided.

**djr33** · 07-23-2011, 01:07 AM

Is this a question? If you actually want help with your page, then you should provide a link and there is probably a way to solve it.

**griffinwebnet** · 07-23-2011, 01:15 AM

lol. sorry no not a question. i thought on first glance that the description of the other forum category was non coding related issues sorta like a general playground but i looked back later and realized my mistake. Sorry about that. Wont Happen again.

but no just a horror story not a question.

Although if you want to see it in action, use IE to navigate to http://cgentertainment.com/adminpanel/

because i havent fixed it yet, and frankly i dont plan to. it is php software that is only intended to be used by 4-5 people tops. so i only had one person try to use ie and i just told them not to use that browser. lol :P
-JL Griffin

**jscheuer1** · 07-23-2011, 01:43 AM

Looks OK-ish in IE to me. The page is non-standard though, there's a good chance that's the root of the problem.

**griffinwebnet** · 07-23-2011, 02:34 AM

u want me to post my code for style.css?

Code:

html
{
background-image: url(../images/login-page/login_bg.png); font-family: arial;
}
#loginpanel
{
background-image: url(../images/login-page/login_box.png); width: 500; height: 300; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto;

}
#login_spacer
{
	height: 50px;
}

#loginbox_content_spacer
{
height: 95px;
}
#login_form
{
	color: #303030;
}
#backgroundPopup{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:100%;

width:100%;

top:0;

left:0;

background:#000000;

border:1px solid #cecece;

z-index:1;

}

#popupContact{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:384px;

width:408px;

background:#FFFFFF;

border:2px solid #cecece;

z-index:2;

padding:12px;

font-size:13px;

}

#popupContact h1{

text-align:left;

color:#6FA5FD;

font-size:22px;

font-weight:700;

border-bottom:1px dotted #D3D3D3;

padding-bottom:2px;

margin-bottom:20px;

}

#popupContactClose{

font-size:14px;

line-height:14px;

right:6px;

top:4px;

position:absolute;

color:#6fa5fd;

font-weight:700;

display:block;

}

**jscheuer1** · 07-23-2011, 02:29 PM

I didn't really mean anything other than what I said, which was prefaced with:

If you want specific help

I'm still not clear if you do or not. I'm beginning to think maybe you do.

Anyways, in an attempt to illustrate more of what I've been saying about a standard page versus non-standard page, consider this - The page is in Quirks Mode because it has no standards invoking DOCTYPE. That means that each browser may interpret it however it likes. If you use a standards invoking DOCTYPE like so, I don't think any browser will render the page as intended:

Code:

<!DOCTYPE html>
<html>
<head>
<title>CG Entertainment DJ Login</title>
<link rel="Stylesheet" type="text/css" href="../css/login.style.css">
</head>
<body>
<div id="login_spacer"></div>
<div id="loginpanel">
<center>
<div id="loginbox_content_spacer"></div>
<div id="login_form">
<form name="form1" method="post" action="checklogin.php">
<b>Username</b>:<br>
<input name="myusername" type="text" id="myusername" size="20"><br>
<b>Password</b>:<br>
<input name="mypassword" type="password" id="mypassword" size="20"><br>
<br>
<input type="submit" name="Submit" value="&nbsp&nbsp&nbsp Log In &nbsp&nbsp&nbsp">
 &nbsp&nbsp&nbsp&nbsp 
<input type="reset"  name="Reset"  value="&nbsp&nbsp&nbsp Reset &nbsp&nbsp&nbsp">
</form>
</div>
</div>
</body>
</html>

Try it out, I think you will see what I mean. If you can get any browser to render it as desired in standards mode, chances are that all browsers, including IE will render it the same or very close to the same, requiring only small tweaks if any.

Next take the css file and make it standard by using units for px values. In standards mode these are required unless the value is 0. I found only two places:

Code:

#loginpanel
{
background-image: url(../images/login-page/login_box.png); width: 500px; height: 300px; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto;

}

Take care of that, use it with the version of the page in this post, clear the cache in IE and refresh the page - Viola!

But to truly make the markup valid, use this page:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>CG Entertainment DJ Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="Stylesheet" type="text/css" href="../css/login.style.css">
</head>
<body>
<div id="login_spacer"></div>
<div id="loginpanel">
<div id="loginbox_content_spacer"></div>
<div id="login_form">
<form name="form1" method="post" action="checklogin.php">
<b>Username</b>:<br>
<input name="myusername" type="text" id="myusername" size="20"><br>
<b>Password</b>:<br>
<input name="mypassword" type="password" id="mypassword" size="20"><br>
<br>
<input type="submit" name="Submit" value="&nbsp;&nbsp;&nbsp; Log In &nbsp;&nbsp;&nbsp;">
 &nbsp;&nbsp;&nbsp;&nbsp; 
<input type="reset"  name="Reset"  value="&nbsp;&nbsp;&nbsp; Reset &nbsp;&nbsp;&nbsp;">
</form>
</div>
</div>
</body>
</html>

and add (in the stylsheet, in addition to those two px's) the highlighted:

Code:

#loginpanel
{
text-align: center; background-image: url(../images/login-page/login_box.png); width: 500px; height: 300px; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto;

}

**griffinwebnet** · 08-02-2011, 08:54 PM

Thank you John. All your tips and pointers helped alot, i kind of broke down your code and compared it to mine and i can see where i was going wrong, i made the same script for a differant program with your source code and it displays perfectly in all browsers.

Also thank you for explaining doctype, after you said that, i did alot of research on it. I had no idea.

Thank you. I learned alot from you in this one thread.

-JL Griffin

Thread: Why must IE be such a pain???

Thread Tools

Search Thread

Why must IE be such a pain???

Thank You!

Bookmarks

Bookmarks

Posting Permissions