Jump to content


Photo

CSS Help


  • Please log in to reply
3 replies to this topic

#1 dual_alliance

dual_alliance
  • Members
  • PipPipPip
  • Advanced Member
  • 140 posts
  • LocationNSW, Australia

Posted 12 July 2006 - 05:23 PM

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:

Posted Image

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

Posted Image

My source code for outputting source code is:

<!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>

And my style sheet is:

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
}

What am l doing wrong?

#2 dual_alliance

dual_alliance
  • Members
  • PipPipPip
  • Advanced Member
  • 140 posts
  • LocationNSW, Australia

Posted 12 July 2006 - 05:45 PM

Update: Nevermind l found and fixed the problem.

#3 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 12 July 2006 - 09:30 PM

What was the fix? Some people might find that helpful when searching the forum.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#4 dual_alliance

dual_alliance
  • Members
  • PipPipPip
  • Advanced Member
  • 140 posts
  • LocationNSW, Australia

Posted 12 July 2006 - 10:59 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users