Jump to content

Archived

This topic is now archived and is closed to further replies.

dual_alliance

CSS Help

Recommended Posts

I have a registration page which l made using CSS and php (for including files), however when l view the page in firefox it is not all aligning as it should as you can see below:

[img]http://dualalliance.u13.biz/member/images/firefox.jpg[/img]

But when l view it in IE it gets worse :-[:

[img]http://dualalliance.u13.biz/member/images/IE.jpg[/img]

My source code for outputting source code is:

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Register</title>

<link href="style/main.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="register1">Registration Form</div>

<div id="register2"><div id="centerborder2">

<br />

<p id="login">Please login below</p>

<form id="userRegistrationForm" method="post" action="register_process.php">

<p><label>First Name:</label> <input type="text" name="firstName" /><br /></p>


<p><label>Last Name:</label> <input type="text" name="lastName" /><br /></p>

<p><label>Username:</label> <input type="text" name="userName" /></p>

<p><label>Password:</label> <input type="password" name="passWord" /> <label> Confirm Password: </label><input type="password" name="passWord2" /><br /></p>

<p><label>Email Address:</label> <input type="text" name="email" /><br /></p>


<p><label>Website:</label> <input type="text" name="website" /> <label>Confirm Email:</label> <input type="text" name="email2" /><br /></p>

<p><iframe style="width: 500px; height: 170px;"
src="legal_info.php"
frameborder="1" scrolling="yes"></iframe></p>

<p><input type="checkbox" name="agree"> I have read, understood and agree to these rules and conditions</input><br /></p>

<p><input name="register" type="submit" value="Register" /> <input name="reset" type="reset" value="Reset" /></p>

</form>

</div></div>

<div id="register3"></div>

<div id="botheader">

<p class="copyright">
All Rights Reserved, © Copyright dual_alliance 2006.
</p>

</div>

</body>

</html>[/code]

And my style sheet is:

[code]body {
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 12px; }

.submit input
{
margin-left: 4.5em;
}

#centerborder {
margin-left: auto;
margin-right: auto;
margin-top: 90px;
text-align: center;
background-image: url(../images/admin_login.png);
width: 400px;
height: 250px;
padding: 0px;
border: 0px solid #000000;
}

#navbar1 {
text-align: left;
background-image: url('images/navbar.png');
width: 150px;
height: 340px;
float: left;
padding: 0px;
}

#center {
text-align: left;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 450px;
height: 340px;
padding: 0px;
}

#navbar2 {
text-align: left;
background-image: url('images/navbar.png');
width: 150px;
height: 340px;
float: left;
padding: 0px;
}

.menu1 {
margin-top: 25px;
width: 160px;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}

.menu2 {
margin-top: 25px;
width: 160px;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}

ul,li {
list-style-type: none;
margin: 0;
padding:0;
line-height: 20px;
}

a:link {
text-decoration: underline;
color: #FFFFFF;
}

a:visited {
text-decoration: underline;
color: #CCCCCC;
}

a:active {
text-decoration: none;
color: #FF9900;
}

a:hover {
text-decoration: none;
color: #FF0000;
}

p {
font-family: verdana, arial, sans-serif;
font-size: 12px;
}

#botheader {

width: 770px;
height: 100px;
text-align: center;
}

p#login {
font-size: xx-small;
color: #FF0000;
font-weight: bold;
margin-top: 60px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
}

p.legalheader {
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
}


p.copyright {
  margin-top:    20px;
  font-size:      x-small;
  text-transform: uppercase;
  font-family: "Bitstream Vera Sans Mono", monospace;
  color:          #888;
  line-height:    120%;
}

p.copyright a {
  color: #88f;
  text-decoration: none;
border: 0;
}

img {
border: 0;
}

#register1 {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-image: url('../images/user_register_01.gif');
width: 700px;
height: 74px;
padding: 0px;
}

#register2 {
margin-left: auto;
margin-right: auto;
background-image: url('../images/user_register_02.gif');
text-align: left;
width: 700px;
padding: 0px;
}

#register3 {
margin-left: auto;
margin-right: auto;
text-align: left;
background-image: url('../images/user_register_04.gif');
width: 700px;
height: 37px;
padding: 0px;
}

#centerborder2 {
margin-left: 35px;
padding: 0px;
margin-top: 0px;
}

#label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}[/code]

What am l doing wrong?

Share this post


Link to post
Share on other sites
What was the fix? Some people might find that helpful when searching the forum.

Share this post


Link to post
Share on other sites
The problem was "<p id="login">Please login below</p>" as l had used the same CSS file for a admin login page l forgot to remove this class from the CSS which was currupting the background picture and was not letting me align the text properly.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.