PDA

View Full Version : div width with form inside



blacktears
Sep 4th, 2007, 12:13 PM
Hey,

I can't seem to change the width of my content div within IE6, it's fine on other browsers but won't seem to resize on that one. I am going to keep trying things but I was hoping that it might be something someone knows that will be quicker.

Cheers,

Bee

CSS:




a:link {text-decoration: none; color: #a7d631;}
a:hover {text-decoration: none; color: #ff9600;}
a:visited {text-decoration: none; color: #a7d631;}

.nav a:link {text-decoration: none; color: #fff;}
.nav a:hover {text-decoration: none; color: #a7d631;}
.nav a:visited {text-decoration: none; color: #fff;}

html {height: 100%;}
body {min-height: 100%;}
.middleContent {background-image: url(../img/site/background.jpg); width: 733px; background-repeat: no-repeat; border: 1px solid #1b1b1b; color: #fff; font-size: small; text-align: left;}
.middleContentFranchise {background-image: url(../img/site/background.jpg); width: 733px; background-repeat: no-repeat; border: 1px solid #1b1b1b; color: #fff; font-size: small; text-align: middle;}
body {background-color: #000; text-align: center; width: 735px; margin: auto; padding-top: 20px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.header {background-image: url(../img/site/top_bar.jpg);/* height: 10px; */margin: auto; background-repeat: no-repeat; text-align: left;}
.LDVLogo {margin-left: 25px; margin-top: 2px; padding-bottom: 7px;}
.nav {background-image: url(../img/site/nav_bg.jpg); text-align: right; padding-right: 35px; padding-top: 2px; padding-bottom: 2px;}
#leftLink {margin-left: 30px;}
.link {display: inline; margin-left: 28px; color:#fff; font-size: small; margin-right: 10px;}
.copyright {color: #fff; font-size: x-small;text-align: center; margin-top: 5px;}
.mainTextLeft {padding-left: 20px; font-size: 8pt;}
.largerText {font-size: 11pt;}
.indexImage {text-align: right;}
.map {padding: 5px; text-align: right;}
#contact {text-align: left;}
.form {text-align: center;}
#bottomContentTextPage {
width: 482px;
float: left;
padding-top: 5px;
min-height: 42em;
}

.formTextPage {
width: 700px;
text-transform: uppercase;
text-align: center;
margin-left: 12px;
clear: left;
margin: 0px;
padding: 0px;
}
.formLines {
width: 700px;
clear: left;
text-align: center;
text-transform: uppercase;
}
.formLinesTest {
width: 700px;
clear: left;
margin-left: 100px;
text-align: center;
text-transform: uppercase;
}

.formLinesAddress {
width: 700px;
clear: left;
margin-left: 100px;
text-align: center;
text-transform: uppercase;
float: left;
}

.formLinesTop {
width: 700px;
clear: left;
text-align: center;
text-transform: uppercase;
}
.formLines02 {
width: 700px;
clear: left;
text-transform: uppercase;
line-height: 2em;
text-align: center;
}
.formLines03 {
width: 320px;
clear: left;
text-transform: none;
line-height: 2em;
text-align: left;
margin-left: 200px;
}
.formLeftLines {
float: left;
width: 240px;
text-transform: uppercase;
}
.formRightLines {
float: right;
width: 240px;
}

.formLeftNames {
width: 240px;
padding-right: 10px;
text-align: right;
line-height: 1.5em;
float: left;
clear: none;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
/* vertical-align: middle;
*/}
.formLeftNamesLegal {
width: 240px;
padding-right: 10px;
text-align: right;
line-height: 1.5em;
float: left;
clear: none;
margin-top: 0.2em;
margin-bottom: 0.2em;
margin-left: 100px;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
/* vertical-align: middle;
*/}

.formLeftNamesMandatory {
width: 240px;
padding-right: 10px;
text-align: right;
line-height: 1.5em;
float: left;
clear: none;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
color: #FF9600;
text-transform: uppercase;

}

.bottomformLeftNamesMandatory {
width: 240px;
padding-right: 10px;
text-align: right;
line-height: 1.5em;
float: left;
clear: none;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
color: #FF9600;
text-transform: uppercase;
margin-left: 100px;

}
.formLeftNames a:input{
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.formRightFields {
float: left;
width: 140px;
line-height: 1.2em;
margin-top: 0.2em;
margin-bottom: 0.2em;
border: #999999 1px solid;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: text-top;
background-color: #efefef;

}

.formRightFields02 {
float: left;
width: 140px;
/*line-height: 1.2em;*/
margin-top: 0.1em;
margin-bottom: 0.2em;
border: #999999 1px solid;
font-size: x-small;
margin-left: 250px;
vertical-align: text-top;
clear: none;
background-color: #efefef;
}

.formRightFieldsAddress {
float: inherit;
width: 140px;
line-height: 1.2em;
margin-top: 0.2em;
margin-bottom: 0.2em;
border: #999999 1px solid;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: text-top;
background-color: #efefef;
}
.formRightFieldsDrop {
float: inherit;
width: 140px;
margin-top: 0.2em;
margin-bottom: 0.2em;
border: #999999 1px solid;
margin-left: 0px;
vertical-align: text-top;
clear: none;
background-color: #efefef;
}

.radioTable {
width: 140px;
height: 5em;
float: inherit;
margin-top: 2px;
margin-bottom: 2px;
border: #333 1px solid;
background-color: #000;
color: #FFF;
clear: none;
}


.submitButt {
width: 70px;
line-height: 1.5em;
margin-top: 2px;
margin-bottom: 2px;
font-size: x-small;
margin-left: 350px;
vertical-align: bottom;
clear: left;
}

.formLeftNamesMandatorySmall {
width: 200px;
padding-right: 10px;
text-align: right;
line-height: 1.5em;
float: left;
clear: left;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
color: #FF9600;
text-transform: uppercase;
}
.submitButtSmall {
float: left;
width: 70px;
line-height: 1.5em;
margin-top: 2px;
margin-bottom: 2px;
font-size: x-small;
margin-left: 210px;
vertical-align: bottom;
clear: left;
}
.formShowroomMandatory {
color: #FF9600;
}
.submitShowroomButt {
float: left;
width: 70px;
line-height: 1.5em;
margin-top: 2px;
margin-bottom: 2px;
font-size: x-small;
margin-left: 180px;
vertical-align: bottom;
clear: both;
}
.blackSpacer {
background-color: #000000;
height: 1px;
}

.title {float: left; margin-left: 0px; margin-top: 1.5px; margin-bottom: 2px;}
.title2 {float: left;}
.clear {clear: both;}

.formLines {

width: 600px;
clear: left;
text-transform: uppercase;
padding: 0px;
margin: 0px;
}

/*IE6*/
* html .middleContent {float: left;background-image: url(../img/site/background.jpg); width: 732px; background-repeat: no-repeat; border: 1px solid #1b1b1b; color: #fff; font-size: small; text-align: left;}
* html .middleContentFranchise {float: left; background-image: url(../img/site/background.jpg); width: 733px; background-repeat: no-repeat; border: 1px solid #1b1b1b; color: #fff; font-size: small; text-align: left;}
* html .formLinesAddress {
width: 700px;
clear: left;
margin-left: 50px;
text-align: center;
text-transform: uppercase;
float: left;

}
/**/

abduraooft
Sep 4th, 2007, 12:37 PM
Hi, how can we know the problem without seeing it's corresponding html?

blacktears
Sep 4th, 2007, 02:04 PM
<div class="middleContentFranchise">
<br /><br />
<form action="thanks_contact.asp" method="post" name="contact" class="formTextPage" id="contact">
<div class="formLinesTop">
<p>Text</p>
<p>&nbsp;</p>
</div>
<div class="formLines">Interested in </div>
<div class="formLines">
<label>
<input name="Sales" type="checkbox" id="Sales" value="interested" />
</label>
Sales&nbsp;&nbsp;<input name="Service" type="checkbox" id="Service" value="interested" />
Service&nbsp;&nbsp;
<label>
<input name="serviceAndParts" type="checkbox" id="serviceAndParts" value="interested" />
</label>
Service &amp; Parts&nbsp;&nbsp;
<label>
<input name="VANfit" type="checkbox" id="VANfit" value="interested" />
</label>
VANfit</div>
<div class="formLines"></div>
<div class="formLines">Where did you hear about the Franchise?</div>

<div class="formLines02">
<br />
<select name="WhereHear" class="formRightFieldsDrop" id="WhereHear">
<option value="">Please Select...</option>
<option value="Newspaper">Newspaper</option>
<option value="Magazine">Magazine</option>
<option value="Television">Television</option>
<option value="Dealer colleague">Dealer colleague</option>
<option value="Trade Fair">Trade Fair</option>
<option value="Internet">Internet</option>
<option value="Other">Other</option>
</select>
</div>

<div class="formLinesTest"><br><span class="formLeftNamesMandatory">Company Name*</span>
<input name="company_name" type="text" id="company_name" class="formRightFields" /></div>
<div class="formLinesAddress"><span class="formLeftNamesMandatory">Address*</span>
<input name="Address_line01" type="text" id="Address_line01" class="formRightFields" />
<span class="clear"><input name="Address_line02" type="text" id="Address_line02" class="formRightFields02" /></span></div>
<div class="formLinesTest"><span class="formLeftNamesMandatory">City / Town*</span>
<input name="city" type="text" id="city" class="formRightFields" /></div>
<div class="formLinesTest"><span class="formLeftNames">County</span>
<input name="county" type="text" id="county" class="formRightFields" /></div>
<div class="formLinesTest"><span class="formLeftNamesMandatory">Postcode*</span>
<input name="postcode" type="text" id="postcode" class="formRightFields" />
</div>
<div class="formLinesTest"></div>
<div class="formLinesTest"><span class="formLeftNames">Title</span>
<select name="Title" id="Title" class="title2">
<option value="Mr" selected>Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms.</option>
</select>
</div>
<div class="formLinesTest"><span class="formLeftNamesMandatory">First Name*</span>
<input name="first_name" type="text" id="first_name" class="formRightFields" /></div>
<div class="formLinesTest"> <span class="formLeftNamesMandatory">Surname*</span>
<input name="last_name" type="text" id="last_name" class="formRightFields" /></div>
<div class="formLinesTest"> <span class="formLeftNamesMandatory">Job Title*</span>
<input name="job_title" type="text" id="job_title" class="formRightFields" /></div>
<div class="formLinesTest"><span class="formLeftNamesMandatory">Telephone*</span>
<input name="Phone" type="text" id="Phone" class="formRightFields" /></div>
<div class="formLinesTest"><span class="formLeftNamesMandatory">Mobile Number*</span>
<input name="Mobile" type="text" id="Mobile" class="formRightFields" />(No. or 'n/a')</div>
<div class="formLinesTest"><span class="formLeftNames">Fax Number</span>
<input name="Fax" type="text" id="Fax" class="formRightFields" /></div>
<div class="formLinesTest"> <span class="formLeftNamesMandatory">Email*</span>
<input name="Email" type="text" id="Email" class="formRightFields" /></div>
<div class="formLinesTest"> <span class="formLeftNamesMandatory">Repeat Email*</span>
<input name="RepeatEmail" type="text" id="RepeatEmail" class="formRightFields" /></div>
<div class="formLinesTest"> <span class="formLeftNames">Website</span>
<input name="Website" type="text" id="Website" class="formRightFields" /></div>
<div class="formLineTest"> <span class="formLeftNamesLegal">Legal Form</span>
<select name="Title" id="Title" class="title">
<option value="Sole Trader">Sole Trader</option>
<option value="Partnership">Partnership</option>
<option value="Limited Company">Limited Company</option>
<option value="Limited Liability Partnership">Limited Liability Partnership</option>
<option value="Public Limited Company">Public Limited Company</option>
</select></div>
<div class="formLinesTest"> <span class="formLeftNames">Company Reg No</span>
<input name="CompanyRegNo" type="text" id="CompanyRegNo" class="formRightFields" /></div>
<div class="formLinesTest"></div>
<div class="formLinesTest"><span class="formLeftNamesMandatory">Other Franchises:</span></div>
<div class="formLinesTest"> <span class="formLeftNames">Franchises held (1st Brand)</span>
<input name="FranchiseA" type="text" id="FranchiseA" class="formRightFields" /></div>
<div class="formLines03">
<input name="FranchiseASales" type="checkbox" id="FranchiseASales" value="checkbox">
SALES
<input name="FranchiseAServices" type="checkbox" id="FranchiseAServices" value="checkbox">
SERVICES&nbsp;
<input name="FranchiseAParts" type="checkbox" id="FranchiseAParts" value="checkbox">
PARTS<br>
<em><font size="1">Please tick appropriate boxes</font></em></font>
</div>

<div class="formLinesTest"> <span class="formLeftNames">Franchises held (2nd Brand)</span>
<input name="FranchiseB" type="text" id="FranchiseB" class="formRightFields" /></div>
<div class="formLines03">
<input name="FranchiseBSales" type="checkbox" id="FranchiseBSales" value="checkbox">
SALES
<input name="FranchiseBServices" type="checkbox" id="FranchiseBServices" value="checkbox">
SERVICES&nbsp;
<input name="FranchiseBParts" type="checkbox" id="FranchiseBParts" value="checkbox">
PARTS<br>
<em><font size="1">Please tick appropriate boxes</font></em></font>
</div>

<div class="formLinesTest"> <span class="formLeftNames">Franchises held (3rd Brand)</span>
<input name="FranchiseC" type="text" id="FranchiseC" class="formRightFields" /></div>
<div class="formLines03">
<input name="FranchiseCSales" type="checkbox" id="FranchiseCSales" value="checkbox">
SALES
<input name="FranchiseCServices" type="checkbox" id="FranchiseCServices" value="checkbox">
SERVICES&nbsp;
<input name="FranchiseCParts" type="checkbox" id="FranchiseCParts" value="checkbox">
PARTS<br>
<em><font size="1">Please tick appropriate boxes</font></em></font>
</div>

<div class="formLinesTest"> <span class="formLeftNames">Franchises held (4th Brand)</span>
<input name="FranchiseD" type="text" id="FranchiseD" class="formRightFields" /></div>
<div class="formLines03">
<input name="FranchiseDSales" type="checkbox" id="FranchiseDSales" value="checkbox">
SALES
<input name="FranchiseDServices" type="checkbox" id="FranchiseDServices" value="checkbox">
SERVICES&nbsp;
<input name="FranchiseDParts" type="checkbox" id="FranchiseDParts" value="checkbox">
PARTS<br>
<em><font size="1">Please tick appropriate boxes</font></em></font>
</div>
<div class="formLines"></div>

<div class="formLinesTest"> <span class="formLeftNames">Notes</span>
<textarea name="Notes" class="formRightFields" id="Notes"></textarea>
</div>

</table>
<input name="submit" type="button" class="submitButt" value="Submit" />
</form>
<br />

</div>

abduraooft
Sep 4th, 2007, 02:42 PM
Hope you are saying about the alignment of the form in IE6 to left.
It's due to the CSS

* html .middleContentFranchise {float: left; background-image: url(../img/site/background.jpg); width: 733px; background-repeat: no-repeat; border: 1px solid #1b1b1b; color: #fff; font-size: small; text-align: left;}

If you remove that float:left from there, everything will be OK.
I recommend you to optimise your CSS and html by eliminating the repeated code like font-size,font-family etc

blacktears
Sep 4th, 2007, 02:44 PM
have sorted it, a few of the form divs were misbehaving! lol

Bee

blacktears
Sep 4th, 2007, 05:28 PM
thanks for your advice though!

Bee