CSS Help

dual_alliance · July 12, 2006

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?

dual_alliance · July 12, 2006

[color=red][b]Update: [/b][/color] Nevermind l found and fixed the problem.

moberemk · July 12, 2006

What was the fix? Some people might find that helpful when searching the forum.

dual_alliance · July 12, 2006

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.

Sign In

CSS Help

Recommended Posts

dual_alliance

Link to comment

Share on other sites

dual_alliance

Link to comment

Share on other sites

moberemk

Link to comment

Share on other sites

dual_alliance

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information