[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Webpage looks good in FF, but not in IE. CSS Help!

Posted on 2008-11-03
3
Medium Priority
?
278 Views
Last Modified: 2013-12-08
My page:

http://www.drayerconference.com

Looks great in Firefox, but is missing the content from the middle.

Below is the screen.css stylesheet.

I know that min-height does not work in IE, and I removed that, but am still getting the problem.

Any help is appreciated.
/* COLORS
#724200; text brown
#f9e2b7; body background
#fff8eb; PageWrapper background
#f2be4c; orange
#3f8877; link green
#f9e1b5; billboard h2 & h3 tan
#c08717; dark orange
#8FBFB4; light green;
#6B8F87; dark green
 
*/
 
/* HTML OVER-RIDES */
body {
    color: #724200;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    background: #f9e2b7;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
a img {
    border: none;
}
h1 {
    padding: 0;
    font-size: 3.5em;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1em;
}
h2 {
    font-size: 1.8em;
    margin: 0 0 15px;
    color: #724200;
}
h3 {
    font-size: 1.2em;
    margin: 0 0 15px;
    color: #724200;
}
h4 {
    font-size: 1.3em;
    margin: 0 0 5px;
}
p {
    font-size: 1.2em;
    line-height: 1.5em;
    color: #724200;
    margin: 0 0 15px;
}
#ColumnTwo p {
    font-size: 1.1em;
    line-height: 1.3em;
    color: #724200;
    margin: 0 0 5px;
}
address {
    font-style: normal;
    display: inline;
}
table {
    width: 100%;
}
table td {
    width: 50%;
}
ul{
    font-size: 1.2em;
}
ul li {
    padding: 0 0 5px;
}
 
/* STRUCTURE */
#PageWrapper {
    padding: 5px 0 50px;
    background: #fff8eb url(images/bg_pagewrapper.gif) repeat-x bottom;
}
#Page {
    width: 780px;
    margin: 0 auto;
    background: url(images/bg_page.gif) repeat-y;
}
#Header {
    height: 107px;
    background: url(images/bg_header.gif) no-repeat;
    position: relative;
    z-index: 1;
}
#ContentWrapper {
    padding: 0 7px;
    background: url(images/bg_pagebottom.gif) no-repeat bottom;
    overflow: hidden;
}
#Content {
    margin-top: 5px;
    padding: 20px 20px 30px;
    overflow: hidden;
}
#ColumnOne {
    float: left;
    width: 75%;
}
#ColumnTwo {
    float: left;
    width: 25%;
}
#ColumnOne .pad {
    padding-right: 25px;
}
#PageBottom {
    width: 726px;
    margin: 25px auto 0;
    overflow: hidden;
}
#Footer {
    width: 726px;
    margin: -10px auto 20px;
}
a {
    color: #3f8877;
    font-size: 1.1em;
}
a:hover {
    text-decoration: none;
}
/*a:visited {
    color: #c08717;
}*/
a.logo {
    display: block;
    position: absolute;
    left:10px;
    top: 5px;
    width: 153px;
    height: 153px;
    background: url(images/logo.png) no-repeat;
    z-index: 10px;
}
a.logo img {
    width: 153px;
    height: 153px;
    visibility: hidden;
}
 
/* RE-USABLE STYLES */
.leftImg {
    float: left;
    display:block;
    padding: 5px;
    margin: 5px 10px 5px 0;
    border: 1px solid #f9e2b7;
}
.registerButton {
    display: block;
    background: url(images/button_register-now.png) 0 0;
    width: 137px;
    height: 50px;
    text-indent: -99999px;
    margin-left: -5px;
    margin-top: 5px;
}
.linkArrows {
    color: #3f8877;
}
.bulletList {
    list-style: none;  
    font-size: 1.1em; 
    margin: 0 0 15px 0;
    padding: 0;
}
.bulletList li {
    padding-bottom: 6px;
    padding-left: 12px;
    margin: 0;
    background: url(images/bullet.gif) no-repeat 0 4px;
}
.bulletList li a{
    font-size: 11px;
}
.topLink {
    text-align: right;
}
.topLink a {
    font-size: 10px;
    text-decoration: none;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
 
/* HEADER */
.registerLink {
    position: absolute;
    right: 40px;
    top: 25px;
    font-weight: bold;
    font-size: 1.3em;
    color: #f2be4c;
    text-decoration: none;
    padding-left: 22px;
    background: url(images/bg_registerlink.gif) no-repeat left;
}
/* nav */
#Nav .hideInNav {
    display: none;
}
#Nav {
    position: absolute;
    left: 165px;
    bottom: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#Nav li {
    float:left;
    margin: 0;
    padding: 0;
    height: 33px;
}
ul#Nav li a {
    display: block;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    padding: 0 11px;
    line-height: 33px;
    text-decoration: none;
    color: #724200;
}
#Nav li a:hover,
#Nav li a.active {
    background: url(images/bg_nav-li_active.gif) no-repeat bottom;
}
/*#Nav li a.home {
    background: url(images/icon_home_off.png) no-repeat center 5px;
}
#Nav li a:hover.home,
#Nav li a.active.home {
    background: url(images/icon_home.png) no-repeat center 5px;
}*/
 
/* HOME BILLBOARD */
.homeBillboard {
    background: url(images/bg_billboard_home.jpg) no-repeat 0 0;
    height: 334px;
    width: 766px;
}
#Billboard .homeBillboard h1 {
    font-size: 3.5em;
    padding-top: 30px;
    width: 420px;
    text-transform: none;
}
#Billboard .pad{
    padding: 20px;
}
#Billboard h1 {
    font-size: 3.8em;
    color: #fff;
    margin: 0 0 10px;
    padding-top: 113px;
    text-transform: uppercase;
}
#Billboard h2 {
    font-size: 2.4em;
    color: #f9e1b5;
    margin-bottom: 3px;
    padding: 0;
    background: none;
}
#Billboard h3 {
    color: #f9e1b5;
    margin-bottom: 3px;
}
#Billboard p {
    font-size: 1.1em;
    line-height: 1.3em;
    color: #fff;
    width: 500px;
}
 
/* HOME CONTENT COLUMNS */
#HomeColumnOne {
    width: 363px;
    float: left;
}
#HomeColumnTwo {
    width: 182px;
    float: left;
}
#HomeColumnThree {
    width: 181px;
    float: left;
}
#HomeColumnOne .pad {
    padding-right: 30px;
}
#HomeColumnTwo .pad {
    padding-right: 20px;
}
.homeContentWrapper {
    background: url(images/bg_homecontentwrapper.gif) no-repeat top;
}
.homeContentWrapper p {
    font-size: 1.1em;
}
#HomeColumnOne h2,
#HomeColumnTwo h2,
#HomeColumnThree h2 {
    background: url(images/h2_bullet.gif) no-repeat left;
    padding-left: 18px;
}
 
/* PAGE BOTTOM COLUMNS */
#xtraColumnOne {
    float: left;
    width: 242px
}
#xtraColumnTwo {
    float: left;
    width: 242px;
}
#xtraColumnThree {
    float: left;
    width: 242px;
}
#xtraColumnOne p,
#xtraColumnTwo p,
#xtraColumnThree p {
    font-size: 1.1em;
}
#xtraColumnOne .pad {
    padding-right: 20px;   
}
#xtraColumnTwo .pad {
    padding: 0 10px;
}
#xtraColumnThree .pad {
    padding-left: 20px;
}
#xtraColumnOne p a,
#xtraColumnTwo p a,
#xtraColumnThree p a {
    font-size: 11px;
}
 
 
/* FOOTER */
/* footernav */
#FooterNav {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#FooterNav li {
    margin: 0;
    padding: 0;
    display: inline;
}
#FooterNav li a {
    padding: 0 10px;
    font-family: arial;
    font-size: 1.0em;
    padding: 0 13px;
    line-height: 33px;
    text-decoration: none;
    color: #724200;
}
#FooterNav li a:hover {
    color: #c08717;
}
#FooterNav .hideInNav {
    display: none;
}
#Footer div {
    background: url(images/footerlogo.gif) no-repeat right;
    height: 92px;
    font-size: 11px;
    padding-top: 15px;
    font-size: 11px;
    line-height: 1.6em;
}
#Footer div a {
    font-size: 11px;
    line-height: 16px;
}
 
 
/* PAGE BILLBOARDS */
#aboutBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#accomodationsBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#ceuBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#facultyBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#aboutBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#itineraryBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#aboutBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#objectivesBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#registerBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
#vendorsBillboard {
    height: 164px;
    width: 766px;
    background: url(images/banner_runner.jpg) no-repeat 0 0;
}
 
 
/* itinerary outline */
.column1, .column2 {
    float: left;
    width: 259px;
    margin: 0;
    padding: 0 0 15px;
}
dl {
    margin: 0;
    padding: 5px;
    overflow: hidden;
    background: #fff8eb;
    border-right: 2px solid #fff;
}
dl.wide dd {
    width: 400px;
}
dl dt {
    float: left;
    width: 100px;
    margin: 0;
    padding: 8px 0;
}
dl dd {
    float: left;
    margin: 0;
    padding: 8px 0;
}
.column1 dl dd,
.column2 dl dd {
    width: 145px;
}
dl dd span {
    display: block;
    margin-bottom: 8px;
}
.headingBar {
    background: #f9e1b5;
    margin-bottom: 2px;
    border-right: 2px solid #fff;
    padding: 5px;
}
 
/* CSS for Shade Tabs. Remove if not using */
.shadetabs{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.0em;
}
.shadetabs li{
    float: left;
    margin: 0 3px 0 0;
    padding: 0;
}
.shadetabs li a{
    text-decoration: none;
    display: block;
    padding: 5px 10px;
    color: #fff;
    background: #8FBFB4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    border-bottom: 1px solid #6B8F87;
}
.shadetabs li a:hover{
    text-decoration: underline;
}
.shadetabs li a.selected{ /*selected main tab style */
    background: #f9e1b5;
    border-bottom: 1px solid #f9e1b5;
}
.shadetabs li a.selected{ /*selected main tab style */
    background-image: url(shadeactive.gif);
    color: #724200;
}
.shadetabs li a.selected:hover{ /*selected main tab style */
    text-decoration: none;
}
.tabcontent{
    display:none;
    border-top: 5px solid #f9e1b5;
    padding-top: 20px;
    float: left;
    width: 100%;
}
@media print {
    .tabcontent {
    display:block !important;
}
}
 
 
/* REGISTRATION FORM */
.formTable {
    margin: 20px 0;
}
.formRBLTable {
    margin: 0 0 20px;
}  
 
.formTable td,
.formRBLTable td {
    padding: 5px;
} 
.formTable td input,
.formTable td label, 
.formRBLTable td input,
.formRBLTable td label {
    float: left;
    vertical-align: middle;
}
.formTable td span,
.formRBLTable td span {/* validation *'s */
    line-height: 22px;
    padding-left: 2px; 
}
.formRBLTable td label{
    width: 80%;
}
.formTable td label,
.formRBLTable td label {
    margin-top: 3px;
}
#addtovendorlist,
.checkbox {
    float: left;
}
.formTable td span.checkbox {
    width: 80%;
    margin-top: 0;
    background: none;
}
.formTable td span.checkbox label {
    margin-top: 0;
}
 
.infoBox {
    border: 1px solid #f9e2b7;
    background: #fff8eb;
    padding: 15px 15px 5px;
    margin: 20px 5px 20px;
}
.infoBox p {
    font-size: 10px;
    margin-bottom: 10px;
    line-height: 1.4em;
}
 
fieldset h3 {
    margin-bottom: 0;
    color: #c08717;
}
fieldset h2,
fieldset h3 {
    margin-left: 5px;
}
fieldset {
    border: 1px solid #f9e2b7;
}
legend {
    font-size: 1.6em;
    color: #8FBFB4; 
}
#errorMsgTop {
    display: block;
    background: pink;
    border: 1px solid red;
    color: red;
    padding: 15px;
    font-size: 12px;
    margin-bottom: 15px;
}
 
 
/* form confirm table */
.formConfirmTable {
    margin-bottom: 20px;
    border: 1px solid #EFEFEF;
}
.formConfirmTable td {
    padding: 5px;
    font-size: 1.1em;
    color: #6F6F6F;
    font-family: arial;
    border: 1px solid #f6f6f6;
}
.formConfirmTable .alt {
    background: #EFEFEF;
}

Open in new window

0
Comment
Question by:Neil2526
  • 2
3 Comments
 
LVL 15

Accepted Solution

by:
SRigney earned 1000 total points
ID: 22871202
IE doesn't even see the homeContentWrapper.  I think you have an html issue.  You have <div id="Content"class="homeContentWrapper">  which does not have a space between the quote and class.   I think IE is just getting confused about the configuration of your div.
0
 

Author Comment

by:Neil2526
ID: 22871301
Thanks for the response.

Just took that class="homeContentWrapper" out and it still does the same thing.
0
 
LVL 15

Expert Comment

by:SRigney
ID: 22871866
I'm looking at your site and you seem to have the class homeContentWrapper on the div, and it is displaying in IE.  What was wrong with it other than the missing space?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month18 days, 2 hours left to enroll

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question