Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Div Alignments not working for IE

    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    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>
    Last edited by Excavator; 01-19-2012 at 07:20 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    whitetree (01-19-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by whitetree View Post
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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;
    }
    Last edited by whitetree; 01-23-2012 at 07:27 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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/

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by whitetree View Post
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    whitetree (01-25-2012)

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •