...

View Full Version : Why is this not working?



ZekeLL
07-19-2008, 06:30 AM
Hi guys. I have finished designing a website and everything looks good except for one thing. I have a form and I have positioned the fields using the margin-top css property. It looks great on FF but there's too much space between fields on IE and it looks bad.

Here's the URL: http://www.theoutsourcingcompany.com/problem/test.html

Try it with FF and then with IE and see for yourself.

The CSS is here: http://www.theoutsourcingcompany.com/problem/css/style.css

Would someone please help me and let me know what the problem is?

For those who want the code, here it is. First the HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Hi</title>

<style type="text/css">
<!--
.style1 {font-size: 10px}
-->
</style>

<style type="text/css">
<!--
body {
background-color: #97c7da;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<body>
<div class="divheader">
</div>


<div class="divmiddle"> <font class="Title"><font class="GreyBlue"><br />
</font></font>
<p align="left" style="word-spacing: 0; margin-top: 0"><br />
</p>
<div class="regdiv">
<form id="ebook-form2" name="contact-form" method="post" action="contact.php">
<input name="email" type="text" class="textfieldsa" id="email" size="25" />
<input name="firstname" type="text" class="textfields5" id="firstname" size="25" />
<input name="lastname" type="text" class="textfields5" id="lastname" size="25" />
<input name="middleinitial" type="text" class="textfields5" id="middleinitial" size="25" />
<input name="dob" type="text" class="textfields5" id="dob" size="25" />
<input name="countryofbirth" type="text" class="textfields5" id="countryofbirth" size="25" />
<input name="cityofbirth" type="text" class="textfields5" id="cityofbirth" size="25" />
<input name="countryofcitizenship" type="text" class="textfields5" id="countryofcitizenship" size="25" />
<input name="foreignaddress" type="text" class="textfieldsb" id="foreignaddress" size="25" />
<input name="foreigncity" type="text" class="textfields5" id="foreigncity" size="25" />
<input name="foreignstate" type="text" class="textfields5" id="foreignstate" size="25" />
<input name="foreignzip" type="text" class="textfields5" id="foreignzip" size="25" />
<input name="foreigncountry" type="text" class="textfields5" id="foreigncountry" size="25" />
<input type="image" src="images/contactbutton.jpg" alt="Send Your Message" width="164" height="52" class="textfieldsc" />
</form>
</div>
<p align="left" style="word-spacing: 0"><br />
</p>
<p align="left" class="Text">&nbsp;</p>
</div>

<div class="divfooter">
<div align="center"></div>
</div>
</body>

</html>




And here's the CSS:



.contactdiv {
background-image: url(../images/contactform.jpg);
background-repeat: no-repeat;
height: 500px;
width: 500px;
margin: auto;
}
.textfields2 {
font-size: 16px;
margin-left: 230px;
margin-top: 75px;
}
.textfields3 {
font-size: 16px;
margin-left: 230px;
margin-top: 4px;
}
.textfields4 {
font-size: 16px;
margin-left: 30px;
margin-top: 12px;
}
.buttoncontact {
font-size: 12px;
margin-left: 152px;
margin-top: 17px;
}

.Title { FONT-SIZE: 20pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;}

.SubTitle { FONT-SIZE: 16pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;}

.BlueLight {
COLOR: #0099FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

.Blue {
COLOR: #0099FF;
}

.GreyBlue {
COLOR: #0099FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

.FormTextBox { BACKGROUND-COLOR: #FFFFFF; FONT-FAMILY: Trebuchet MS, Verdana, Arial; FONT-SIZE: 12px; COLOR: #9AC3D5; FONT-WEIGHT: bold;}

A.Menu:link {
FONT-SIZE: 12px;
FONT-FAMILY: "Trebuchet MS", Verdana, Arial;
COLOR: #0000FF;
TEXT-DECORATION: underline;
}

A.Menu:visited {
FONT-SIZE: 12px;
FONT-FAMILY: "Trebuchet MS", Verdana, Arial;
COLOR: #0000FF;
TEXT-DECORATION: underline;
}

A.Menu:hover { FONT-SIZE: 12px; FONT-FAMILY: Trebuchet MS, Verdana, Arial; TEXT-DECORATION: underline;

COLOR: #4034B4;}

#sddm { margin: 0; padding: 0; z-index: 30}

#sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px Trebuchet MS;}

#sddm li a { display: block; margin: 0 0px 0 0; padding: 4px 10px; width: 90px; background: #1A70AB;color: #FFF;text-align: center;text-decoration: none}

#sddm li a:hover{background:#9CD0DD;}

#sddm div{position: absolute;visibility: hidden;margin: 0;padding: 0;background: #BDD9E1;border: 1px solid #5970B2;}

#sddm div a{position: relative; display: block; margin: 0;padding: 5px 10px;width: auto; white-space: nowrap;text-align: left;text-decoration: none;background: #CAE9F2;color: #1F0573;font: 11px Trebuchet MS;}

#sddm div a:hover{background: #507F90;color: #FFF;}
.centro {
text-align: center;
}
.divheader {
background-image: url(../images/newheader.jpg);
background-repeat: no-repeat;
height: 155px;
width: 697px;
margin: auto;
}
.divmiddle {
background-image: url(../images/newmiddle.jpg);
background-repeat: repeat-y;
width: 697px;
margin-top: -11px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
.divfooter {
background-image: url(../images/newfooter.jpg);
background-repeat: no-repeat;
height: 74px;
width: 697px;
margin-top: -12px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
p {
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.padding {
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 15px;
}
.paddingleft {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 0px;
}
h1 {
padding: 20px;
text-align: justify;
}
::selection { background: #000066; color: white;
}
::-moz-selection { background: #000066; color: white;
}
.textfields5 {
font-size: 16px;
margin-left: 250px;
margin-top: 4px;
}
.textfields6 {
font-size: 16px;
margin-left: 230px;
margin-top: 4px;
}
.footertext {
font-size: 10px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.posheader {
margin-left: 8px;
margin-top: -10px;
}
.photopad {
padding-right: 10px;
text-align: center;
}
.floatr {
float: right;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.regdiv {
background-image: url(../images/regform.jpg);
background-repeat: no-repeat;
height: 636px;
width: 500px;
margin: auto;
}
.textfieldsa {
font-size: 16px;
margin-left: 250px;
margin-top: 98px;
}
.textfieldsb {
font-size: 16px;
margin-left: 250px;
margin-top: 67px;
}
.textfieldsc {
font-size: 16px;
margin-left: 170px;
margin-top: 18px;
}
.textfieldsd {
font-size: 16px;
margin-left: 230px;
margin-top: 4px;
}
.ebookformindex {
background-image: url(../images/brochure.jpg);
height: 308px;
width: 500px;
background-repeat: no-repeat;
margin: auto;
}
.textfieldsdname {
font-size: 16px;
margin-left: 90px;
margin-top: 190px;
}
.textfieldsdemail {
font-size: 16px;
margin-left: 90px;
margin-top: 3px;
}
.textfieldsdbutton {
font-size: 16px;
margin-left: 300px;
margin-top: -60px;
}
.tableprices {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
}
h2 {
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
padding-top: 10px;
padding-right: 20px;
padding-bottom: -30px;
padding-left: 20px;
font-weight: normal;
margin-bottom: -20px;
}



Thank you so much for your help, this is driving me nuts.

abduraooft
07-19-2008, 08:24 AM
Fix all markup errors first, see http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.theoutsourcingcompany.com%2Fproblem%2Ftest.html&charset=%28detect+automatically%29&doctype=Inline&group=0

rmedek
07-20-2008, 07:50 AM
The margin seems the same to me…IE 7 has a greater line-height in the input fields (or height) which is making them align improperly, though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum