Div Alignments not working for IE

whitetree · 01-19-2012, 05:49 PM

I can get everything to look nice and proper for Firefox, Chrome and Safari but IE is throwing a fit and not playing along. It puts an imaginary box at the top of the page for one of my divs and throws off alignment for everything. I'm a big coding newb and could use some help.

I want an image to auto adjust with browser size and have a form in the middle of that image(or anywhere inside the image) It works great in everything but IE

Code:

<html>

<head>
<link rel="stylesheet" href="main.css" 
      type="text/css"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Login</title>

</head>

<body bgcolor="#33090f">
<div id="content">
<div style="position: relative; width: 0px; height: 0px; z-index:1 ; left: -150px; top: 275px" id="layer1">
	<form action="files/LoginAction.asp" method=POST name="the_form">
	<table border="0" width="100%">
		<tr>
			<td width="34%" align="left"><b><font face="Helvetica" size="2" color="#000000">
			&nbsp;Login&nbsp;:</font></b></td>
			<td colspan="2" align="right">
			<input type="text" name="UserID" size="20" style="width: 150"></td>
		</tr>
		<tr>
			<td width="34%" align="left"><b><font face="Helvetica" size="2" color="#000000">
			&nbsp;Password&nbsp;:</font></b></td>
			<td colspan="2" align="right"><input type="password" name="password" size="20" style="width: 150" ></td>
		</tr>
		<tr>
			<td width="58%" colspan="2" align="left"><b><font face="Helvetica" size="2" color="#000000">
&nbsp;</font></b><a style="font-family: Helvetica; font-size: 10pt; font-weight: bold; text-decoration: none" href="files/lostUserIDFrame.asp"><font color="#000000">Forgot&nbspPassword&nbsp?</font></a></td>
			<td width="53%" align="right">
			<button name="B1" type=submit style="width: 80px; font-family:Helvetica; font-size:10pt; font-weight:bold">Login</button></td>
		</tr>
	</table>
	<p class="content">&nbsp;</p>
    </form>
    


</div>


&nbsp;
<img src="login_page.jpg" width="800" height="511" border="0">

</body>

</html>

and it's complementing CSS

Code:

@charset "utf-8";
/* CSS Document */


}
div#layer1
{
	margin-left: 10%;
	margin-right: 10%;
}
div#layer1
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}
body
{
	text-align: center;
}

}
div#content
{
	margin-left: 10%;
	margin-right: 10%;
}
div#content
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}
body
{
	text-align: center;
}

Excavator · 01-19-2012, 06:05 PM

Good morning whitetree,
You should check your code with the validators, one for HTML and one for CSS can be found in my signature line. They will help you a LOT.

Not sure how this will work with your image but it does show how it can be done with a lot less code (I did not change anything on your form so it's still invalid) -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	text-align: center;
	background: #33090f;
}
#content {
	width: 50em;
	margin: 30px auto;
	border: 3px double #ccc;
}
#content form {
	width: 25em;
	margin: 20px auto;
}
</style>
</head>
<body>
    <div id="content">
        <form action="files/LoginAction.asp" method=POST name="the_form">
          <table border="0" width="100%">
            <tr>
              <td width="34%" align="left"><b><font face="Helvetica" size="2" color="#000000"> &nbsp;Login&nbsp;:</font></b></td>
              <td colspan="2" align="right"><input type="text" name="UserID" size="20" style="width: 150"></td>
            </tr>
            <tr>
              <td width="34%" align="left"><b><font face="Helvetica" size="2" color="#000000"> &nbsp;Password&nbsp;:</font></b></td>
              <td colspan="2" align="right"><input type="password" name="password" size="20" style="width: 150" ></td>
            </tr>
            <tr>
              <td width="58%" colspan="2" align="left"><b><font face="Helvetica" size="2" color="#000000"> &nbsp;</font></b><a style="font-family: Helvetica; font-size: 10pt; font-weight: bold; text-decoration: none" href="files/lostUserIDFrame.asp"><font color="#000000">Forgot&nbspPassword&nbsp?</font></a></td>
              <td width="53%" align="right"><button name="B1" type=submit style="width: 80px; font-family:Helvetica; font-size:10pt; font-weight:bold">Login</button></td>
            </tr>
          </table>
          <p class="content">&nbsp;</p>
        </form>
			<img src="login_page.jpg" alt="description" width="800" height="511" />
    <!--end content--></div>
</body>
</html>

whitetree · 01-19-2012, 07:11 PM

Thanks for the assistance, it is much appreciated. This code looks much better but it's not quite what I'm after.

The form box should sit in the middle of the image and I need to be able to control the positioning of the form box because it will move around depending on what the designers come up with for that specific one.

I sent you a PM with example pictures.

Excavator · 01-21-2012, 04:56 PM

Quote:

Originally Posted by whitetree

Thanks for the assistance, it is much appreciated. This code looks much better but it's not quite what I'm after.

The form box should sit in the middle of the image and I need to be able to control the positioning of the form box because it will move around depending on what the designers come up with for that specific one.

I sent you a PM with example pictures.

Using that code I posted, it would be easiest to adjust the forms top margin to place it where you like. This bit highlighted in red -

Code:

html, body {
	margin: 0;
	text-align: center;
	background: #33090f;
}
#content {
	width: 50em;
	margin: 30px auto;
	border: 3px double #ccc;
}
#content form {
	width: 25em;
	margin: 200px auto 0;
}

whitetree · 01-23-2012, 06:08 PM

Quote:

Originally Posted by Excavator

Using that code I posted, it would be easiest to adjust the forms top margin to place it where you like. This bit highlighted in red -

Code:

html, body {
	margin: 0;
	text-align: center;
	background: #33090f;
}
#content {
	width: 50em;
	margin: 30px auto;
	border: 3px double #ccc;
}
#content form {
	width: 25em;
	margin: 200px auto 0;
}

That works good, for IE, but not for FireFox or Chrome. For Chrome and FF I have to add a margin-left value which works well for FF and Chrome but throws off IE too far to the right. Also, for it to get the form table to appear above the image I had to put a position: fixed into the content div and in Firefox the form is not a relative position, even my adding a relative position value to the CSS it stays put in FF but not in IE...

So it seems like this works for everything but IE, or IE but nothing else....

Code:

#content {
	width: 50em;
	margin: 30px auto;
	border: 0px double #ccc;
	position: fixed;
#content form {
	width: 25em;
	margin: 220px auto 0;
	margin-left: 460px;
}

Excavator · 01-23-2012, 06:28 PM

You've made enough changes to your code ... you fixed those errors with the validator, didn't you? I think we'll need to see the current version you're working with.
As always, a link to the test site is best.

whitetree · 01-25-2012, 12:17 AM

I did validate and it came up error free but thats not the problem. I even tried putting the form Div inside a new div for the image that I want but it is still asqeue and not relative to anything.

this is the demo

http://demo.pelesys.com/voloteademo/

Excavator · 01-25-2012, 12:36 AM

Quote:

Originally Posted by whitetree

I did validate and it came up error free but thats not the problem. I even tried putting the form Div inside a new div for the image that I want but it is still asqeue and not relative to anything.

this is the demo

http://demo.pelesys.com/voloteademo/

That version you link to does have the image in the same div as the form but that's not how you put the image behind the form. You should look at how to use the css background property.

Try making your CSS look like this once -

Code:

#content {
    height: 511px;
    width: 800px;
    position: relative;
    border: 3px double #ccc;    margin: 30px auto;
    background: url("images/Volotea_login_page.jpg");
}
#content form {
    height: 8em;
    width: 15em;
    margin: 0;
    position: absolute;
    top: 240px;
    left: 270px;
}

whitetree · 01-25-2012, 12:52 AM

boom that was exactly what i was looking for! Thanks for all your help, I'm a big CSS newb and dont really know what I'm doing for it at all.

The next thing I want to learn is how to change the look of the input boxes by adding an image to the box and change the look of the Login button as well.