page layout breaks in IE 6 & 7

Cyber Shiva · July 5th, 2008, 09:19 AM

I am working on a html page designed with CSS. The page does not show properly in IE 6 & 7. Please find the images of IE6,7 and Fire fox at this location.
http://csscreator.com/files/Firefox.gif
http://csscreator.com/files/IE6_2.gif
http://csscreator.com/files/IE7_3.gif

Firefox is correctly showing the page. IE 6 form content is getting pushed out of the viewport. IE7 form background color is shown only at the top(white bg).

Inserting html & CSS code below.

Code:

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Basic Profile</title>
<link rel="stylesheet" href="styles/basicstyles.css" />
<link rel="stylesheet" href="styles/pane.css" />
<link rel="stylesheet" href="styles/layout.css" />
<link rel="stylesheet" href="styles/skin.css" />
</head>
<body>
<div id="header">
    <div id="topbarLeft">
        <div id="topbarRight">
            <div id="topbarMiddle">
                Global Delivery
            </div>
        </div>
    </div>
    <div id="tabWraper">
        <ul id="tabList">
            <li><a href="#">Global Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Corporate Info</a></li>
            <li><a href="#" id="selected">Careers</a></li>
        </ul>
    </div>
</div>
<div id="footer">
        <div id="footerWraper">
        <div id="footerLeft">
            <div id="footerRight">
                <div id="footerMiddle">
                 Home | Sitemap 
                </div>
            </div>
        </div>
        </div>
</div>
<div id="leftColumn">
    <div class="inner">
    <h1>News</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam bibendum. Aliquam malesuada suscipit sem. Fusce elit est, volutpat id, posuere vel, sodales eget, nulla.<br /><br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam bibendum. Aliquam malesuada suscipit sem. Fusce elit est, volutpat id, posuere vel, sodales eget, nulla.<br /><br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam bibendum. Aliquam malesuada suscipit sem. Fusce elit est, volutpat id, posuere vel, sodales eget, nulla.
            </p>  
    </div>
</div>
<div id="contentColumn">
    <div class="inner">
    <div class="topLeft">
  <h1>Career Center</h1>
  <a href="#">Career Center Help</a><span class="linkSeperator">|</span><a href="#">Espanol</a></div>
  <form id="frmlgn" action="">
  <label for="username">Username</label>
  <input id="username" name="" type="text"  class="textBox" size="15" />
  &nbsp;&nbsp;
  <label for="pwd">Password</label>
  <input id="pwd" name="" type="password"  class="textBox" size="15" />
  &nbsp;&nbsp;
  <input name="" type="button" value="Login" class="buttonStyle" />
  <div class="alignRight50px"><a href="#">Forgot Password?</a></div>
</form>
<br class="clear" />
<h2>Apply to Customer Sales Representative - # 10983</h2>
<p>The Customer Service Representative position requires good communication skills, a love for people and excellant writing ability. The hours for this position is standard 9 to 5.</p>
<div class="roundBox lightBluePane">
  <b class="roundtop"><b class="roundb1"></b><b class="roundb2"></b></b>
  <div class="roundboxcontent">
    <h2>About me...</h2>
    <div class="roundBox lightWhitePane">
        <b class="roundtop"><b class="roundb1"></b><b class="roundb2"></b></b>
      <div class="roundboxcontent">            
           <form id="frmbp" action="">
               <div><label for="fName"><span class="requiredField">*</span>First Name</label><input id="fName" name="" type="text" class="textBox" /></div>
               <div><label for="mName">Middle Name</label><input id="mName" name="" type="text" class="textBox" /></div>
               <div><label for="lName"><span class="requiredField">*</span>Last Name</label><input id="lName" name="" type="text" class="textBox" /></div>
                 <div><label for="dob"><span class="requiredField">*</span>Date of birth</label><input id="dob" type="text" class="textBox" size="5" /> <input type="text" class="textBox" size="5" />&nbsp;<img src="images/help.gif" align="middle" alt="" /></div>
                 <div><label for="email"><span class="requiredField">*</span>Email</label><input id="email" name="" type="text" class="textBox" /></div>
                 <div><label for="uName"><span class="requiredField">*</span>Username</label><input id="uName" name="" type="text" class="textBox" /></div>
                 <div><label for="SSN"><span class="requiredField">*</span>Social Security Number</label><input id="SSN" name="" type="text" class="textBox" /></div>
               <div><label for="password"><span class="requiredField">*</span>Password</label><input id="password" name="" type="text" class="textBox" /></div>
                 <div><label for="cpassword"><span class="requiredField">*</span>Retype Password</label><input id="cpassword" name="" type="text" class="textBox" />&nbsp;<img src="images/help.gif" align="middle" alt="" /></div>
                 <div><label for="question"><span class="requiredField">*</span>Secret Question</label>
                    <select id="question">
                        <option selected="selected"></option>
                        </select>&nbsp;<img src="images/help.gif" align="middle" alt="" /></div>
                  <div><label for="answer"><span class="requiredField">*</span>Answer</label><input id="answer" name="" type="text" class="textBox" /></div>
                  </form>                    
                <form id="frmgeqbp" action="">
Are you 18 years of age or older?<br />
          <input name="radiobutton" type="radio" value="r1" />Yes<br />
            <input name="radiobutton" type="radio" value="r2" />No<br />

            Are you legally eligible to work in the United States?<br />
          <input name="radiobutton" type="radio" value="r1" />Yes<br />
            <input name="radiobutton" type="radio" value="r2" />No<br />
            </form>
            <br class="clear" />
                  </div>                                
                    <b class="roundbottom"><b class="roundb2"></b><b class="roundb1"></b></b>
            <br />
      <div class="buttonAlignRight"><input name="" type="button" value="Continue" class="buttonStyle" /></div>

    </div>
 <br />
    </div>
      <b class="roundbottom"><b class="roundb2"></b><b class="roundb1"></b></b>

</div>
</div>
</body>
</html>

Css codes are here:

skin.css

Code:

html {
    height:100%; 
    max-height:100%; 
    padding:0;
    margin:0; 
    border:0; 
    font-size:11px; 
    font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    color:#000000;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ 
}

body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
}

#header {
    position:absolute;
    margin:0;
    top:0;
    left:0;
    display:block;
    width: 99%;
    height:125px;
    font-size:4em;
    z-index:5;
    overflow:hidden;
    border:5px solid #d8d8d8;
    border-bottom:0px;
}

* html #header{
    width: 100%;
}

#header #topbarMiddle{
    line-height:75px;
    height:75px;
    background-color:#004a66;
    vertical-align:middle;
    color:#a0d967;
    padding-left:10px;
    font-size:20px;
    font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

#header #topbarLeft{
    padding-left:5px;
    height:75px !important;
    background-image:url(../images/bg/head-top-left.gif);
    background-repeat:no-repeat;
    background-position:left top;
    white-space:nowrap;
    border-bottom:1px solid #FFFFFF;
    background-color:#d8d8d8;
}

#header #topbarRight{
    padding-right:5px;
    height:75px !important;
    background-image:url(../images/bg/head-top-right.gif);
    background-repeat:no-repeat;
    background-position:right top;
    white-space:nowrap;
    background-color:#d8d8d8;
}

#leftColumn{
    position:absolute;
    left:0;
    top:130px;
    bottom:43px;
    width:200px;
    background:#ffffff;
    z-index:4;
    overflow:auto;
    border-left:5px solid #d8d8d8;
    border-right:1px dashed #d8d8d8;
}

* html #leftColumn{
    height:100%;
    top:0;
    bottom:0;
    width:200px;
    border-top:125px solid #fff;
    border-bottom:43px solid #fff;
    color:#000000;
}

#leftColumn .inner{
    padding:10px;
}

#leftColumn h1{
COLOR:#A0D967; 
padding: 4px 10px;
background-color:#004A66;
}

#leftColumn p{
background-color:#eeeeee;
padding: 10px 10px;
margin-top:0px;
}

.contentTopBar{
    padding-bottom:5px;
}

#contentColumn{
    overflow:auto;
    overflow-x:hidden;
    position:absolute;
    z-index:3;
    top:130px;
    left:200px;
    bottom:43px;
    right:0;
    background:#ffffff;
    border-right:5px solid #d8d8d8;
}

* html #contentColumn{
    top:-1px;
    right:0;
    bottom:0;
    left:0;
    height:100%;
    max-height:100%;
    width:100%;
    overflow:auto;
  overflow-x:hidden;    
    position:absolute;
    z-index:3;
    border-top:125px solid #fff;
    border-bottom:43px solid #fff;
    border-left:194px solid #fff;
}

#contentColumn .inner{
    padding:10px;

}

.privacy{
position:absolute;
margin-top:50px;
display:block;
width:98%;
}

.privacyNoScrollPage{
position:absolute;
bottom:0px;
display:block;
width:98%;
}

.pageid{
float:left;
width:70%;
}

.footerlogo{
float:right;
}

#footer {
    position:absolute;
    margin:0;
    bottom:0;
    left:0;
    display:block;
    width:99%;
    height:38px;
    font-size:1em;
    z-index:5;
    overflow:hidden;
    color:#fff;
    border:5px solid #d8d8d8;
    border-top:0px;
}

* html #footer{
    width: 100%;
    height:43px;
}

#footer #footerMiddle{
    line-height:35px;
    height:35px;
    background-color:#004a66;
    vertical-align:middle;
    color:#ffffff;
    padding-left:10px;
    font-size:12px;
    font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

#footer #footerLeft{
    padding-left:5px;
    height:35px !important;
    background-image:url(../images/bg/footer-bottom-left.gif);
    background-repeat:no-repeat;
    background-position:left bottom;
    white-space:nowrap;
    border-top:1px solid #FFFFFF;
    background-color:#d8d8d8;
}

#footer #footerRight{
    padding-right:5px;
    height:35px !important;
    background-image:url(../images/bg/footer-bottom-right.gif);
    background-repeat:no-repeat;
    background-position:right bottom;
    white-space:nowrap;
    background-color:#d8d8d8;
}

#footer #footerWraper{
    border-top:3px solid #fe8502;
}

/* TABS */
#tabWraper{
    padding-top:10px;
    border-top:3px solid #fe8502;
}

* html #tabWraper{
    padding-top:0px;
}

#tabList{
    padding: 3px 0;
    padding-left:200px;
    margin-left: 0;
    border-bottom: 1px solid #6e6e78;
    font: bold 12px Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

#tabList li{
    list-style: none;
    margin: 0;
    display: inline;
}

#tabList li a{
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #6e6e78;
    border-bottom: none;
    background: #eeeeee;
    text-decoration: none;
    color: #6e6e78;
}

#tabList li a:link {
    color: #6e6e78;
}

#tabList li a:hover{
    color: #a0a0a4;
}

#tabList li a#selected{
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
}

layout.css

Code:


.requiredField{
    color:#F43E00;
}

.infoText{
    font-size:10px;
    color:#969696;
}

.linkSeperator{
    color:#333333;
    padding-left:3px;
    padding-right:3px;
}

div.topLeft{
float:left;
width:46%;
margin-bottom:10px;
}

div.topRight{
float:right    ;
margin-bottom:10px;
}

div.contentBottom{
float:left;
width:47%;
margin: 0px 5px;
}

/* Created by Amrit for inner content alignment */
div.contentinner1{
float:left;
margin-bottom:0px;
margin-left:15px;
margin-right:10px;
margin-top:0px; 
}

.alignRight{
text-align:right;
}

.alignRight50px{
text-align:right;
padding-right:50px;
}

.linkalignLeft{
text-align:left;
}

div.buttonAlignRight{
text-align: right;
}

.alignCenter{
text-align:center;
}

.valignTop{ 
vertical-align:top;
}

.valignMiddle{ 
vertical-align:middle;
}

.clear{
    clear:both;
    line-height:0px;
    height:0px;
    font-size:0px;
}

.rightBorder{
    border-right:1px solid #333333;
}

.leftBorder{
    border-left:1px solid #333333;
}

.padding10px{
    padding:10px;
}

.paddingLeft10px{
    padding-left:10px;
}

.paddingLeft125px{
    padding-left:125px;
}
.paddingLeft150px{
    padding-left:150px;
}

.boldText{
font-weight:bold;
}

/*lgn - Login*/
#frmlgn{
float:right    ;
margin-bottom:10px;
}

/*ef - email a friend*/
#frmef{ 
width:43%;
}

#frmef label{
display: block;
margin: 5px;
width: 20%;
text-align: right;
float: left;
}

#frmef textarea{
width:230px;
}

#frmef div{
    clear: left;
}

/*ci - Contact Info, Created by Amrit*/
#frmci{ 
width:60%;
float: left;
}

#frmci label{
display: block;
margin: 4px;
width: 210px;
text-align: right;
float: left;
}

#frmci div{
    clear: left;
}

/*pd - phonedetails - Contact info*/
#frmpdci{
float: right;
width:30%;
}

/*bp - Basic Profile*/
#frmbp{ 
width:50%;
float: left;
}

#frmbp label{
width:120px;
margin: 4px;
text-align: right;
float: left;
}

#frmbp div{
clear:left;
}

/*geqbp - General Eligibility Questions-Basic Profile*/
#frmgeqbp{
float: right;
width:40%;
margin-left:15px;
}

/*geq - General Eligibility Questions*/
#frmgeq{ 
width:80%;
}

/*eeo - Equal Employment Opportunity*/
#frmeeo{ 
width:300px;
display:block;
}

#frmeeo label{
display: block;
padding:4px;
width: 150px;
text-align: right;
float: left;
}

#frmeeo select{
width: 140px;
}

#frmeeo div{
    clear: left;
    width:100%;
}

/*sfj - Search for Jobs*/
#frmsfj{
width:100%
}

#frmsfj label{
display: block;
width: 120px;
text-align: right;
float: left;
vertical-align:middle;
}

.advSearch{
float: left;
width:30%;
display:block;
}

.advSearch1{
float: left;
width:43%;
margin-top: 10px;
display:block;
}

/*resume, paste resume, upload resume*/
#frmresume{
width:100%
}

.leftFloat{
float:left;
display:block;
}

.leftFloat2{
margin-left:15px;
float:left;
display:block;
}

.leftFloat3{
width:45%;
float:left;
line-height:20px;
display:block;
}

/*Amrit= To define Contact Info Page Columns*/
.leftFloatInner{
margin-left:125px
}

.leftFloatInner2{
padding-left:35%
}

.redText{
color:#FF0000
}

.pageIndicatorBoxGray{
display:block;
height:14px;
width:85px;
background-color:#eeeeee;
}

.pageIndicatorBoxTeal{
display:block;
height:14px;
width:85px;
background-color:#004a66;
background-image:url(../images/progress_arrow.gif);
background-repeat:no-repeat;
background-position:center;
}

.pageIndicatorBoxWhite{
display:block;
height:14px;
width:85px;
background-color:#ffffff;
border:solid 1px #000000;
}

.clearLeft{
clear:left;
}

.textGray{
color:#969696;
}

.textGray2{
color:#969696;
font-size:11px;
}

.marginLeft{
margin: 0 0 0 25px;
}

.marginLeft1{
margin: 0 0 0 5px;
}

.floatWidth1{
width:35%;
}

/*fp - forgot password*/
.fp{
margin-left:20%;
}

/*pe - profile evaluation*/
#frmpe{
width:60%;
}

#frmpe label{
width:120px;
margin: 4px;
text-align: right;
float: left;
display:block;
}

#frmpe div{
clear:left;
}

#frmpe1{
width:100%;
}

/*psa - Profile State Authorization*/
#frmpsa{ 
width:90%;
}

/*exp - Experience*/
#frmexpleft{ 
width:50%;
float: left;
}

#frmexpleft label{
width:100px;
margin: 4px;
text-align: right;
float: left;
}

#frmexpleft div{
clear:left;
}

#frmexpright{
float: right;
width:43%;
}

#frmexpright label{
width:140px;
margin: 4px;
text-align: right;
float: left;
}

#frmexpright div{
clear:left;
}

/*offacc - Offer Acceptance*/
#frmoffacc{ 
width:90%;
}

/*nhi - New Hire Information*/
#frmnhi{ 
width:90%;
}

/*jd - job details*/
#frmjd{
width:100%;
}

#frmjd label{
display: block;
width: 125px;
text-align: right;
font-weight:bold;
float: left;
margin-right:5px;
}

#frmjd div{
clear:left;
}

/*ja - job agent*/
#frmja{
width:100%;
}

#frmja label{
display: block;
width: 120px;
text-align: right;
float: left;
vertical-align:middle;
}

/*ml - map location*/
#frmml{
width:100%;
}

.floatWidthml{
width:42%;
}

.floatWidthml2{
width:23%;
}

/*daal - Direct Apply Applicant Login*/
#frmdaal{
width:52%;
}

basicstyles.css

Code:

/* Font Styles */
body{
    font-family:Tahoma, Arial, verdana, sans-serif;
    font-size:11px;
    font-weight:normal;
    color:#333333;
    text-decoration:none;
}

form{
    padding:0px;
    margin:0px;
}

h1{
    font-size:16px;
    font-weight:bold;
    margin:0px;    
}

h2{
    font-size:15px;
    margin:3px 0px;
    font-weight:bold;
}

h3{
    font-size:14px;
    margin:2px 0px;
}

/* Created by Amrit for address */
address{
    font-size:12px;
    margin:2px 0px;
    font-style:normal
}

hr{
    border:0; 
    border-top: 1px solid #d8d8d8;
    height: 1px;
} 

p{
margin-top: 5px;
}

a{
    color:#507389;
    text-decoration:underline;
}

a:hover{
    color:#73A1BD;
}

/* Styles for Controls*/
select, .textBox{
    font-family:Tahoma, Arial, verdana, sans-serif;
    font-size:11px;
    color:#333333;
    font-weight:normal;
}

.defvalue{
    font-family:Tahoma, Arial, verdana, sans-serif;
    font-size:11px;
    color:#aca899;
    font-weight:normal;
}

.buttonStyle{
    font-family:Tahoma, Arial, verdana, sans-serif;
    font-size:11px;
    color:#fff;
    font-weight:normal;
    background-color:#4c8094;
    margin: 0;
    padding: 0 2px 0 2px;
    width: auto;
    overflow: visible;
}

.buttonStyle:hover{
    font-family:Tahoma, Arial, verdana, sans-serif;
    font-size:11px;
    color:#fff;
    font-weight:normal;
    background-color:#ff0000;
    margin: 0;
    padding: 0 2px 0 2px;
    width: auto;
    overflow: visible;
}

pane.css

Code:

.roundBox{
    background:transparent;
}

.roundtop, .roundbottom{
    display:block;
    background:transparent;
    font-size:1px;
}

.roundb1, .roundb2{
    display:block;
    height:1px;
    overflow:hidden;
}

.roundb1{
    margin:0 2px;
}

.roundb2{
    margin:0 1px;
/*    border-width:0 2px;*/
}

.roundboxcontent{
padding:7px 17px 7px 17px;
}

.lightBluePane .roundboxcontent{
    background:#F4F4F4;
    border:solid #bcbbb7;
    border-width:0 1px;
}

.lightBluePane .roundb2{
    background:#F4F4F4;
    border-left:1px solid #bcbbb7;
    border-right:1px solid #bcbbb7;
}

.lightBluePane .roundb1{
    background:#bcbbb7;
}

.lightWhitePane .roundboxcontent{
    background:#FFFFFF;
    border:solid #dbdad6;
    border-width:0 1px;
}

.lightWhitePane .roundb2{
    background:#FFFFFF;
    border-left:1px solid #dbdad6;
    border-right:1px solid #dbdad6;
}

.lightWhitePane .roundb1{
    background:#dbdad6;
}
/* Created by Amrit for address */
.ltyellow{
    BACKGROUND-COLOR: #FEF8D7
}

.ltred{
    BACKGROUND-COLOR: #FF0000
}

.redBold{
    FONT-SIZE: 11px; FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, Sans-Serif; COLOR:#FF0000;
}
.whiteBold{
    FONT-SIZE: 10px; FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, Sans-Serif; COLOR:#FFFFFF; font-weight:bold
}
.ltblue
{
    BACKGROUND-COLOR: #F4F4F4
}
.ltwhite
{
    BACKGROUND-COLOR: #FFFFFF
}

Shivanand