Website display problems. (Form and text).

Hi there,

I am trying to get my text and login form lined up so they all look straight. Left to right across the browser.

Problem #1) In IE the (account login >>) text seems fine in the middle and to the left. But the form seems to (top right) of the browser rather than centered in the middle.

Problem #2) Google chrome and mozilla seem to be ok form wise but text wise the text is aligned to the bottom of the form and same for the (account login > >) text. Rather than in the middle of the input fields.

Thanks for any help.

Website http://www.lilkixx.co.uk/new/
<table width="951" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><table bgcolor="#FFD200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="951">

			  <table width="100%" align="center" cellpadding="3" cellspacing="0">
			    <tr>
				<td align="left"><h3>Account Login > ></h3></td>
				  <td align="right">
				  
				    <form>
        <table cellpadding="3" cellspacing="3" border="0">
          <tr> 
            <td><h3>Username:</h3></td>
            <td> <input type="text" name="user" maxlength="10" /> 
            </td>
			            <td><h3>Password:</h3></td>
            <td> <input type="password" name="password"  maxlength="10" /> 
            </td>
            <td> <input type="submit" value="Account Login!" alt="Account Login!" /></td>
          </tr>
        </table>
      </form>
				  
				  </td>
				</tr>
			  </table>
			  
			</td>
          </tr>
        </table></td>
      </tr>


    <tr>
        <td align="left" valign="top"><table width="951" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td><img src="images/top-join.gif" width="951" height="2" border="0"></td>
          </tr>
        </table></td>
      </tr>

    <tr>
        <td align="left" valign="top"><table width="951" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td background="images/con-left.gif" width="25"> </td>
            <td bgcolor="#ffffff" width="906" align="left" valign="meiddle"> 
              
			  <table width="100%" align="center" cellpadding="6" cellspacing="0">
			    <tr>
				  <td>
				  
				    <h2>Welcome to lilkixx.co.uk</h2>
					Welcome information here...
				  
				  </td>
				</tr>
			  </table>

			</td>
            <td background="images/con-right.gif" width="20" align="left" valign="top"> </td>
          </tr>
        </table></td>
      </tr>

  <tr>
    <td align="left" valign="top"><table width="951" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td align="left" valign="top"><img src="images/footer-img.gif" alt="" width="951" height="7" /></td>
      </tr>
      <tr>
        <td style="padding-bottom:4px; padding-top:4px;" align="center" valign="top" class="footertext">Copyright &copy 2011 all rights reserved.</td>
      </tr>
    </table></td>
  </tr>
</table>

Open in new window

LVL 1
james130cAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
valign="top" would help on the table rows, but your padding is also making it hard
0
 
james130cAuthor Commented:
****Update****

I put the text and form inside a div and displayed both the div and form inline. The code below. This seemed to make it how i want it but only in IE! If anyone can help me get the same display for firefox and google chrome etc..?

Thanks.
<table width="98%" align="center" cellpadding="4" cellspacing="0">
	  <tr>
	    <td align="left">
		  <h3>Account Login Area > ></h3>
		</td>
		<td align="right">
		
		  <div style="display:inline;">		  
		  <form style="display: inline;">
            <table cellpadding="3" cellspacing="3" border="0">
              <tr> 
                <td><h3>Username:</h3></td>
                <td> <input class="loginatt" type="text" name="user" maxlength="10" /> 
                </td>
			    <td><h3>Password:</h3></td>
                <td> <input class="loginatt" type="password" name="password"  maxlength="10" /> 
                </td>
                <td> <input class="nomarg" type="submit" value="Account Login!" alt="Account Login!" /></td>
              </tr>
            </table>
          </form>
		  
		  </div>
				  
        </td>
      </tr>
    </table>

Open in new window

0
 
selvolCommented:
Here's simplified code.   Hope it helps some.




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="Selvol">
<title></title>

<FIELDSET >
<LEGEND><b>Step One: Personal Information</b></LEGEND>
<form  action="" method="">
Username: <INPUT class="loginatt" type="text" name="user" maxlength="10" SIZE="20">
Password: <INPUT class="loginatt" type="password" name="password" maxlength="10">
<input class="nomarg" type="submit" value="Account Login!" alt="Account Login!">
</form>
</FIELDSET>

</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I am curious too. I'll check later
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.