14 replies [Last post]
seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

I thought I had my latest page all figured out. It was rendering perfectly in IE7 and Firefox, but when I finally got around to testing it in IE6, a whole new mess popped up.

There were text boxes falling out of allignment all over the place.

I went back to the code and interchanged some of the margins with padding, and the issue was fixed.. but then I noticed something even more odd.

The text boxes on the page, all neatly alligned in two vertical columns of 7 text boxes each, were being rendered with some sort of phantom margins, pushing the text boxes down well below where they had to be in order to line up with the background art.

Can anyone tell me what is happening here and if there is a way to prevent this extra margin space from altering the layout in IE6?

If you render the code below, though there is no artwork in the background you can see how the text boxes in the "Mid-Panel" div allign differently in IE7 & FF than they do it IE6.

Any suggestions? Thanks!

-Sean

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Buy.aspx.cs" Inherits="Buy" %>
<%@ Register Assembly="Dune5.WebControls.DateTimePicker" Namespace="Dune5.WebControls"
TagPrefix="cc1" %>

Web Optimizer Inc. Advanced TWeb Optimizer Inc. Advanced Tools For Online
Business

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/gradient-background-buy.jpg);
background-repeat: repeat-x;
}
#container {
width: 786px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#Top {
width: 786px;
height: 160px;
background-image: url(images/Top.jpg);
float: left;
clear: right;
}
#topline-blue {
background-color: #010E5D;
height: 12px;
}
#Top-nav {
height: 43px;
width: 786px;
background-image: url(images/Top-Nav.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
text-align: center;
margin: 0px;
padding: 0px;
float: left;
}
#Top-nav li {
display: inline;
margin-right: 19px;
margin-left: 19px;
margin-top: 0px;
padding: 0px;
margin-bottom: 0px;
}
#Top-nav ul {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav-footer {
height: 49px;
width: 786px;
background-image: url(images/nav-footer-buy.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
float: left;
}
#nav-footer ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav-footer li {
display: inline;
margin-right: 19px;
margin-left: 19px;
}
#bottom-index {
height: 90px;
width: 786px;
background-image: url(images/bottom-index.jpg);
margin: 0px;
float: left;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
display: inline;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #FFFFFF;
}
#bottom-index ul {
display: inline;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#bottom-index li {
display: inline;
margin-right: 20px;
margin-left: 20px;
padding: 0px;
}
#weblinkhome {
margin-top: 94px;
margin-left: 30px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.style9 {color: #000000}
.style10 {
color: #FFFFFF
}
#Top-Panel {
background-image: url(images/buy-panel-top.jpg);
height: 283px;
width: 786px;
float: left;
}
#Mid-Panel {
background-image: url('images/company-info-tile3.jpg');
height: 499px;
width: 860px;
float: left;
padding-top: 66px;
padding-left: 336px;
margin-bottom: -66px;
overflow: hidden;
background-repeat: no-repeat;
}
#billing-panel {
background-image: url('images/billing-panel.jpg');
height: 672px;
width: 786px;
float: left;
}
#headline {
margin: 0px 0px 0px 200px;
padding: 30px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-style: italic;
color: #010860;
height: 30px;
width: 786px;
}
#CustomerCode
{
padding: 0px 0px 0px 275px;
margin: 0px;
height: 20px;
width: 786px;
}
#CustomerCodeBox
{
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Enter
{
padding: 4px 0px 0px 0px;
width: 786px;
height: 28px;
overflow: hidden;
}
#EnterButton
{
padding: 0px;
margin: 0px 0px 0px 313px;
overflow: hidden;
}
#headlinelabel
{
margin: 0px;
padding: 0px;
}

#price
{
height: 100px;
}
#priceimage
{
margin-left: 263px;
margin-top: 44px;
}

#InfoLeft
{
float: left;
width: 152px;
height: 263px;
}
#InfoRight
{
width: 152px;
height: 263px;
margin-left: 103px;
float: left;
}
#Company
{
width: 152px;
height: 20px;
}
#FirstName
{
width: 152px;
height: 20px;
margin-top: 20px;
}
#LastName
{
width: 152px;
height: 20px;
margin-top: 20px;
}
#Title
{
width: 152px;
height: 20px;
margin-top: 20px;
}
#Phone
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#Fax
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#Street
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#City
{
width: 152px;
height: 20px;
float: left;
}
#State
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#Zip
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#email
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#emailRetype
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#Password
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#PasswordRetype
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#InstallRequestArea
{
width: 786px;
height: 105px;
float: left;
padding-top: 49px;
padding-left: 202px;
margin-bottom: -49px;
}
#txtCommentsField
{
padding: 0px;
margin: 0px;
width: 202px;
height: 51px;
}

#DatePickerArea
{
width: 786px;
height: 30px;
padding-top: 12px;
float: left;
}
#DateTimePicker1
{
}
#BillInfoLeft
{
width: 152px;
margin-top: 57px;
margin-left: 128px;
height: 140px;
float: left;
}
#BillInfoRight
{
width: 152px;
margin-top: 57px;
margin-left: 68px;
height: 140px;
float: left;
}
#BillCompany
{
margin: 1px 0px 0px 0px;
width: 152px;
height: 20px;
}
#BillFirstName
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#BillLastName
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#BillAddress
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#BillCity
{
margin: 1px 0px 0px 0px;
width: 152px;
height: 20px;
}

#BillState
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#BillZip
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#BillPhone
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#PaymentButtons
{
width: 786px;
height: 10px;
margin-top: 79px;
float: left;
}
#Visa
{
width: 15px;
height: 15px;
margin-left: 79px;
float: left;
}
#MastCard
{
width: 15px;
height: 15px;
margin-left: 83px;
float: left;
}

#Amx
{
margin-left: 84px;
width: 15px;
height: 15px;
float: left;
}

#eCheck
{
margin-left: 243px;
width: 15px;
height: 15px;
float: left;
}

#CreditCardFields
{
width: 200px;
height: 141px;
float: left;
margin-top: 53px;
margin-left: 127px;
}

#CardName
{
height: 20px;
width: 200px;
}

#CardNumber
{
margin-top: 20px;
width: 200px;
height: 20px;
}

#CardExpiration
{
margin-top: 21px;
width: 200px;
height: 20px;
}

#CardSecurity
{
margin-top: 19px;
}

#eCheckFields
{
width: 152px;
height: 141px;
float: left;
margin-top: 53px;
margin-left: 230px;
}
#eCheckAccountType
{
width: 150px;
height: 20px;
margin-top: 1px;
}

#eCheckName
{
margin-top: 19px;
width: 150px;
height: 20px;
}

#eCheckRoutingNumber
{
margin-top: 20px;
width: 150px;
height: 20px;
}

#eCheckAccountNumber
{
margin-top: 20px;
width: 150px;
height: 20px;
}

#CardSecurityImageDiv
{
width: 181px;
height: 73px;
float: left;
margin-top: 4px;
margin-left: 124px;
}

#PaymentAuthorizeBoxes
{
width: 786px;
height: 10px;
margin-top: 20px;
float: left;
}
#CardAuthorize
{
width: 15px;
height: 15px;
margin-left: 101px;
float: left;
}
#eCheckAuthorize
{
float: left;
width: 15px;
height: 15px;
margin-left: 333px;
}

#free-trial-panel
{
background-image: url('images/free-trial-panel-img.jpg');
width: 786px;
height: 126px;
float: left;
}

#free-trial-checkbox-div
{
width: 786px;
height: 15px;
margin-top: 36px;
}
#FreeTrialCheckbox
{
margin-left: 340px;
}
#submit-panel
{
height: 253px;
width: 786px;
background-image: url('images/submit-panel.jpg');
float: left;
}
#error-message-div
{
width: 786px;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FF0000;
font-weight: bold;
padding-top: 45px;
padding-left: 48px;
overflow: hidden;
padding-bottom: 0px;
float: left;
}
#submit-price-div
{
width: 786px;
float: left;
height: 70px;
}

#SubmitPriceImg
{
margin-left: 275px;
margin-top: 7px;
}

#contract-div
{
float: left;
width: 786px;
height: 40px;
}

#contract-checkbox-div
{
float: left;
width: 15px;
height: 15px;
margin-left: 184px;
margin-top: 4px;
}

#contract-text-div
{
width: 408px;
height: 38px;
float: left;
margin-left: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
}

#submit-button-div
{
float: left;
width: 130px;
height: 40px;
margin-left: 335px;
}

#SubmitButton
{
margin-top: 10px;
margin-left: 12px;
}

.style11 {
color: #0000FF;
font-weight: bold;
}




web optimizer homepage


  • Home

  • Products

  • Company Info

  • Contact Us

  • Buy

  • Free Trial

  • Demo






































































































































































Business Checking
Personal Checking
Savings














































I certify that I have read and understood the Terms And Conditionsand that I have the authority to commit my company to this contract










Copyright 2008 Web Optimizer, Inc.

  • Terms and conditions

  • Privacy policy






Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

For IE6 the doctype must be

For IE6 the doctype must be the very first thing on the page or it snaps into "quirks" mode and uses it's very own, non standard, and incorrct box model.

Also you must use a full, strict mode triggering doctype, which yours looks like, but even a small spelling error will mess it up so you nave to check it carefully.

But if this stuff:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Buy.aspx.cs" Inherits="Buy" %>
<%@ Register Assembly="Dune5.WebControls.DateTimePicker" Namespace="Dune5.WebControls"
TagPrefix="cc1" %>

ends up in the actual code that goes out over the net then, bang, there goes IE6 into quirks mode.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Thanks Ed, So just to be

Thanks Ed,

So just to be clear, you suggest removing the section of code you pasted above?

Can that be removed without breaking the rest of the page? Please advise as I'm not sure what to do here, thank you again.

-Sean

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

seanoneil72 wrote: So just

seanoneil72 wrote:

So just to be clear, you suggest removing the section of code you pasted above?

I'm saying that if that appears in the actual html sent out to IE before the doctype declaration it will mess IE up.

Quote:
Can that be removed without breaking the rest of the page? Please advise as I'm not sure what to do here, thank you again.

I can't tell you that. It looks offhand as something from .asp, or maybe .net, which I don't do. What counts is the actual stuff sent to the browser, and nothing from any server side language should be in there, really.

It sounds as if you aren't actually coding your page, and if that's so then you should talk to whoever or whatever is.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

You are half correct about

You are half correct about the coding part. I design & build the front end HTML/CSS and a friend of mine is doing the C# code behind stuff. I'll speak with him later and get him caught up with this thread.

Thank you again for the advice,

-Sean

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

seanoneil72 wrote:So just to

seanoneil72 wrote:
So just to be clear, you suggest removing the section of code you pasted above?

Can that be removed without breaking the rest of the page? Please advise as I'm not sure what to do here, thank you again.

Don't remove it. It's ASP code which doesn't end up in the HTML and will most likely disable some functionality if you take it out.

Please post the HTML after it's sent to the browser, not the server-side code, ie view source, copy & paste.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Thank you Tyssen, Here is

Thank you Tyssen,

Here is the source pulled directly from IE6

Web Optimizer Inc. Advanced TWeb Optimizer Inc. Advanced Tools For Online
Business

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/gradient-background-buy.jpg);
background-repeat: repeat-x;
}
#container {
width: 786px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#Top {
width: 786px;
height: 160px;
background-image: url(images/Top.jpg);
float: left;
clear: right;
}
#topline-blue {
background-color: #010E5D;
height: 12px;
}
#Top-nav {
height: 43px;
width: 786px;
background-image: url(images/Top-Nav.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
text-align: center;
margin: 0px;
padding: 0px;
float: left;
}
#Top-nav li {
display: inline;
margin-right: 19px;
margin-left: 19px;
margin-top: 0px;
padding: 0px;
margin-bottom: 0px;
}
#Top-nav ul {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav-footer {
height: 49px;
width: 786px;
background-image: url(images/nav-footer-buy.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
float: left;
}
#nav-footer ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav-footer li {
display: inline;
margin-right: 19px;
margin-left: 19px;
}
#bottom-index {
height: 90px;
width: 786px;
background-image: url(images/bottom-index.jpg);
margin: 0px;
float: left;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
display: inline;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #FFFFFF;
}
#bottom-index ul {
display: inline;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#bottom-index li {
display: inline;
margin-right: 20px;
margin-left: 20px;
padding: 0px;
}
#weblinkhome {
margin-top: 94px;
margin-left: 30px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.style9 {color: #000000}
.style10 {
color: #FFFFFF
}
#Top-Panel {
background-image: url(images/buy-panel-top.jpg);
height: 283px;
width: 786px;
float: left;
}
#Mid-Panel {
background-image: url('images/company-info-tile3.jpg');
height: 499px;
width: 860px;
float: left;
padding-top: 66px;
padding-left: 336px;
margin-bottom: -66px;
overflow: hidden;
background-repeat: no-repeat;
}
#billing-panel {
background-image: url('images/billing-panel.jpg');
height: 672px;
width: 786px;
float: left;
}
#headline {
margin: 0px 0px 0px 200px;
padding: 30px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-style: italic;
color: #010860;
height: 30px;
width: 786px;
}
#CustomerCode
{
padding: 0px 0px 0px 275px;
margin: 0px;
height: 20px;
width: 786px;
}
#CustomerCodeBox
{
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Enter
{
padding: 4px 0px 0px 0px;
width: 786px;
height: 28px;
overflow: hidden;
}
#EnterButton
{
padding: 0px;
margin: 0px 0px 0px 313px;
overflow: hidden;
}
#headlinelabel
{
margin: 0px;
padding: 0px;
}

#price
{
height: 100px;
}
#priceimage
{
margin-left: 263px;
margin-top: 44px;
}

#InfoLeft
{
float: left;
width: 152px;
height: 263px;
}
#InfoRight
{
width: 152px;
height: 263px;
margin-left: 103px;
float: left;
}
#Company
{
width: 152px;
height: 20px;
}
#FirstName
{
width: 152px;
height: 20px;
margin-top: 20px;
}
#LastName
{
width: 152px;
height: 20px;
margin-top: 20px;
}
#Title
{
width: 152px;
height: 20px;
margin-top: 20px;
}
#Phone
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#Fax
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#Street
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#City
{
width: 152px;
height: 20px;
float: left;
}
#State
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#Zip
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#email
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#emailRetype
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#Password
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#PasswordRetype
{
margin-top: 20px;
width: 152px;
height: 20px;
float: left;
}
#InstallRequestArea
{
width: 786px;
height: 105px;
float: left;
padding-top: 49px;
padding-left: 202px;
margin-bottom: -49px;
}
#txtCommentsField
{
padding: 0px;
margin: 0px;
width: 202px;
height: 51px;
}

#DatePickerArea
{
width: 786px;
height: 30px;
padding-top: 12px;
float: left;
}
#DateTimePicker1
{
}
#BillInfoLeft
{
width: 152px;
margin-top: 57px;
margin-left: 128px;
height: 140px;
float: left;
}
#BillInfoRight
{
width: 152px;
margin-top: 57px;
margin-left: 68px;
height: 140px;
float: left;
}
#BillCompany
{
margin: 1px 0px 0px 0px;
width: 152px;
height: 20px;
}
#BillFirstName
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#BillLastName
{
margin-top: 20px;
width: 152px;
height: 20px;
}
#BillAddress
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#BillCity
{
margin: 1px 0px 0px 0px;
width: 152px;
height: 20px;
}

#BillState
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#BillZip
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#BillPhone
{
margin-top: 20px;
width: 152px;
height: 20px;
}

#PaymentButtons
{
width: 786px;
height: 10px;
margin-top: 79px;
float: left;
}
#Visa
{
width: 15px;
height: 15px;
margin-left: 79px;
float: left;
}
#MastCard
{
width: 15px;
height: 15px;
margin-left: 83px;
float: left;
}

#Amx
{
margin-left: 84px;
width: 15px;
height: 15px;
float: left;
}

#eCheck
{
margin-left: 243px;
width: 15px;
height: 15px;
float: left;
}

#CreditCardFields
{
width: 200px;
height: 141px;
float: left;
margin-top: 53px;
margin-left: 127px;
}

#CardName
{
height: 20px;
width: 200px;
}

#CardNumber
{
margin-top: 20px;
width: 200px;
height: 20px;
}

#CardExpiration
{
margin-top: 21px;
width: 200px;
height: 20px;
}

#CardSecurity
{
margin-top: 19px;
}

#eCheckFields
{
width: 152px;
height: 141px;
float: left;
margin-top: 53px;
margin-left: 230px;
}
#eCheckAccountType
{
width: 150px;
height: 20px;
margin-top: 1px;
}

#eCheckName
{
margin-top: 19px;
width: 150px;
height: 20px;
}

#eCheckRoutingNumber
{
margin-top: 20px;
width: 150px;
height: 20px;
}

#eCheckAccountNumber
{
margin-top: 20px;
width: 150px;
height: 20px;
}

#CardSecurityImageDiv
{
width: 181px;
height: 73px;
float: left;
margin-top: 4px;
margin-left: 124px;
}

#PaymentAuthorizeBoxes
{
width: 786px;
height: 10px;
margin-top: 20px;
float: left;
}
#CardAuthorize
{
width: 15px;
height: 15px;
margin-left: 101px;
float: left;
}
#eCheckAuthorize
{
float: left;
width: 15px;
height: 15px;
margin-left: 333px;
}

#free-trial-panel
{
background-image: url('images/free-trial-panel-img.jpg');
width: 786px;
height: 126px;
float: left;
}

#free-trial-checkbox-div
{
width: 786px;
height: 15px;
margin-top: 36px;
}
#FreeTrialCheckbox
{
margin-left: 340px;
}
#submit-panel
{
height: 253px;
width: 786px;
background-image: url('images/submit-panel.jpg');
float: left;
}
#error-message-div
{
width: 786px;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FF0000;
font-weight: bold;
padding-top: 45px;
padding-left: 48px;
overflow: hidden;
padding-bottom: 0px;
float: left;
}
#submit-price-div
{
width: 786px;
float: left;
height: 70px;
}

#SubmitPriceImg
{
margin-left: 275px;
margin-top: 7px;
}

#contract-div
{
float: left;
width: 786px;
height: 40px;
}

#contract-checkbox-div
{
float: left;
width: 15px;
height: 15px;
margin-left: 184px;
margin-top: 4px;
}

#contract-text-div
{
width: 408px;
height: 38px;
float: left;
margin-left: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
}

#submit-button-div
{
float: left;
width: 130px;
height: 40px;
margin-left: 335px;
}

#SubmitButton
{
margin-top: 10px;
margin-left: 12px;
}

.style11 {
color: #0000FF;
font-weight: bold;
}




web optimizer homepage


  • Home

  • Products

  • Company Info

  • Contact Us

  • Buy

  • Free Trial

  • Demo











If you have received a customer code, please enter it below













































































January
February
March
April
May
June
July
August
September
October
November
December


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

,
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018


12
1
2
3
4
5
6
7
8
9
10
11

:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59


AM
PM

































































January
February
March
April
May
June
July
August
September
October
November
December

,
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018










Business Checking
Personal Checking
Savings




































To proceed with you order, please make corrections/adjustments to any fields highlighted in red









I certify that I have read and understood the Terms And Conditionsand that I have the authority to commit my company to this contract










Copyright 2008 Web Optimizer, Inc.

  • Terms and conditions

  • Privacy policy








Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why do you need to wrap each

Why do you need to wrap each input in a separate div? Why not apply the styles directly to the inputs? As for the problem, it could be collapsing margins which IE6 doesn't get right. Try reducing the height by 1px and using 1px of padding-top (although if you removed all the extra divs you'll probably find the problem goes away anyway).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Believe me, I would not have

Believe me, I would not have wrapped each input inside a div if I did not have to. It was the only way I could make the text boxes line up exactly where I wanted them.. I don't know why that is, but that's the reason I did it. Working with text boxes is a nightmare, as they seem to shift their layout randomly between browsers.

I tried removing one of the divs from a text box just to recheck, and sure enough th layout broke, even though I applied the same style paramaters to the inner text box as were on the div that formerly wrapped it.

I'll try reducing the height and also adding padding to the top, but is ther some way to force IE6 to render text boxes like IE7 and FF? Or are there any other options?

Thank you,

-Sean

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Believe me, I would not have

Believe me, I would not have wrapped each input inside a div if I did not have to. It was the only way I could make the text boxes line up exactly where I wanted them.. I don't know why that is, but that's the reason I did it. Working with text boxes is a nightmare, as they seem to shift their layout randomly between browsers.

I tried removing one of the divs from a text box just to recheck, and sure enough th layout broke, even though I applied the same style paramaters to the inner text box as were on the div that formerly wrapped it.

I'll try what you suggest with padding, but to be clear are you suggesting reducing size and adding the padding to the divs or to the text boxes themselves?

Thank you,

-Sean

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

By the way, what happened to

By the way, what happened to forcing IE6 to get out of Quirks mode? Is that just not an option based upon the code being passed to the browser?

-Sean

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

seanoneil72 wrote:By the

seanoneil72 wrote:
I'll try what you suggest with padding, but to be clear are you suggesting reducing size and adding the padding to the divs or to the text boxes themselves?

The divs.

seanoneil72 wrote:
By the way, what happened to forcing IE6 to get out of Quirks mode? Is that just not an option based upon the code being passed to the browser?

That was Ed incorrectly interpreting the lines of code above the doctype. Your page won't be in quirks mode in IE6.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Thanks for clearing that up.

Thanks for clearing that up. I'll try it now and let you know what happens.

-Sean

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Well I tried reducing the

Well I tried reducing the height by 1 pix and adding 1 pix of padding to top as you suggested, but that did not fix the layout.. it actually made i worse :shrug:

So if IE6 is not rendering in quirks mode then I am completely lost about what could be causing this problem.

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Fixed it. It was no easy

Fixed it. It was no easy solution though. Eventually I realized that IE6 likes padding and hates margins. So I spent about 8 hours recoding the page using padding and div size to position things where I needed them. Luckily, all of the nested divs I had created helped me get the job done faster.

That's about all I can say.. IE6 hates margins and likes padding and div size to posiion things.