Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old July 5th, 2008, 09:19 AM
Authorized User
 
Join Date: Feb 2007
Location: Hyderabad, Andhra Pradesh, India.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default page layout breaks in IE 6 & 7

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
__________________
Shivanand
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
IE 6 & 7 issues in two column layout Cyber Shiva BOOK: CSS Instant Results 0 July 7th, 2008 03:47 AM
when page refreshed layout breaks in IE7 socoolbrewster CSS Cascading Style Sheets 1 May 17th, 2008 11:05 PM
Page Breaks bcogney XML 10 March 29th, 2007 04:01 PM
Page breaks rupen HTML Code Clinic 1 October 4th, 2006 04:08 PM
forcing page breaks emprise Crystal Reports 0 July 26th, 2004 03:51 AM



All times are GMT -4. The time now is 07:07 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.