FF & IE Problems

[KimberlyM]

This has been driving me crazy. I hope someone can help. The site displays perfectly in FF but all div's do not show in IE. Please help me find the problem! Thanks!

Here is my css.

.node-unpublished, .comment-unpublished {
background-color : #594133;
}
.preview .node, .preview .comment {
background-color : #ffffea;
}
#node-admin-filter ul {
list-style-type : none;
padding : 0;
margin : 0;
width : 100%;
}
#node-admin-buttons {
float : left;
margin-left : 0.5em;
clear : right;
}
td.revision-current {
background : #ffc;
}
.node-form .container-inline .form-text {
display : inline;
width : auto;
}
.node-form .standard {
clear : both;
}
.node-form textarea {
display : block;
width : 95%;
}
.node-form .attachments fieldset {
float : none;
display : block;
}
fieldset {
margin-bottom : 1em;
padding : 0.5em;
}
form {
margin : 0;
padding : 0;
}
hr {
height : 1px;
border : 1px solid gray;
}
img {
border : 0;
}
table {
border-collapse : collapse;
}
th {
text-align : left;
padding-right : 1em;
border-bottom : 3px solid #ccc;
}
.clear-block:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clear-block {
display : inline-block;
}
* html .clear-block {
height : 1%;
}
.clear-block {
display : block;
}
th.active img {
display : inline;
}
tr.even, tr.odd {
background-color : #eee;
border-bottom : 1px solid #ccc;
padding : 0.1em 0.6em;
}
td.active {
background-color : #ddd;
}
tbody {
border-top : 1px solid #ccc;
}
tbody th {
border-bottom : 1px solid #ccc;
}
thead th {
text-align : left;
padding-right : 1em;
border-bottom : 3px solid #ccc;
}
.breadcrumb {
padding-bottom : 0.5em;
}
.error {
color : #f00;
}
div.error {
border : 1px solid #d77;
}
div.error, tr.error {
background : #fcc;
color : #200;
}
div.warning, tr.warning {
background : #ffd;
}
div.ok, tr.ok {
background : #dfd;
}
.item-list .icon {
color : #555;
float : right;
padding-left : 0.25em;
clear : right;
}
.item-list .title {
font-weight : bold;
}
.item-list ul {
margin : 0 0 0.75em 0;
padding : 0;
}
.item-list ul li {
margin : 0 0 0.25em 1.5em;
padding : 0;
list-style : disc;
}
.form-item {
margin-top : 1em;
margin-bottom : 1em;
}
tr.odd .form-item, tr.even .form-item {
margin-top : 0;
margin-bottom : 0;
white-space : nowrap;
}
tr.merge-down, tr.merge-down td, tr.merge-down th {
border-bottom-width : 0 !important;
}
tr.merge-up, tr.merge-up td, tr.merge-up th {
border-top-width : 0 !important;
}
.form-item input.error, .form-item textarea.error, .form-item select.error {
border : 2px solid red;
}
.form-item .description {
font-size : 0.85em;
}
.form-item label {
display : block;
font-weight : bold;
}
.form-item label.option {
display : inline;
font-weight : normal;
}
.form-checkboxes, .form-radios {
margin : 1em 0;
}
.form-checkboxes .form-item, .form-radios .form-item {
margin-top : 0.4em;
margin-bottom : 0.4em;
}
.marker, .form-required {
color : #f00;
}
.more-link {
text-align : right;
}
.more-help-link {
font-size : 0.85em;
text-align : right;
}
.nowrap {
white-space : nowrap;
}
.pager {
clear : both;
text-align : center;
}
.pager a, .pager strong.pager-current {
padding : 0.5em;
}
.tips {
margin-top : 0;
margin-bottom : 0;
padding-top : 0;
padding-bottom : 0;
font-size : 0.9em;
}
dl.multiselect dd.b, dl.multiselect dd.b .form-item, dl.multiselect dd.b select {
font-family : inherit;
font-size : inherit;
width : 14em;
}
dl.multiselect dd.a, dl.multiselect dd.a .form-item {
width : 8em;
}
dl.multiselect dt, dl.multiselect dd {
float : left;
line-height : 1.75em;
padding : 0;
margin : 0 1em 0 0;
}
dl.multiselect .form-item {
height : 1.75em;
margin : 0;
}
.container-inline div, .container-inline label {
display : inline;
}
ul.menu {
list-style : none;
border : none;
text-align : left;
}
ul.menu li {
margin : 0 0 0 0.5em;
}
li.expanded {
list-style-type : circle;
list-style-image : url(/modules/system/../../misc/menu-expanded.png);
padding : 0.2em 0.5em 0 0;
margin : 0;
}
li.collapsed {
list-style-type : disc;
list-style-image : url(/modules/system/../../misc/menu-collapsed.png);
padding : 0.2em 0.5em 0 0;
margin : 0;
}
li.leaf {
list-style-type : square;
list-style-image : url(/modules/system/../../misc/menu-leaf.png);
padding : 0.2em 0.5em 0 0;
margin : 0;
}
li a.active {
color : #000;
}
td.menu-disabled {
background : #ccc;
}
ul.links {
margin : 0;
padding : 0;
}
ul.links.inline {
display : inline;
}
ul.links li {
display : inline;
list-style-type : none;
padding : 0 0.5em;
}
.block ul {
margin : 0;
padding : 0 0 0.25em 1em;
}
ul.primary {
border-collapse : collapse;
padding : 0 0 0 1em;
white-space : nowrap;
list-style : none;
margin : 5px;
height : auto;
line-height : normal;
border-bottom : 1px solid #bbb;
}
ul.primary li {
display : inline;
}
ul.primary li a {
background-color : #ddd;
border-color : #bbb;
border-width : 1px;
border-style : solid solid none solid;
height : auto;
margin-right : 0.5em;
padding : 0 1em;
text-decoration : none;
}
ul.primary li.active a {
background-color : #fff;
border : 1px solid #bbb;
border-bottom : 1px solid #fff;
}
ul.primary li a:hover {
background-color : #eee;
border-color : #ccc;
border-bottom-color : #eee;
}
ul.secondary {
border-bottom : 1px solid #bbb;
padding : 0.5em 1em;
margin : 5px;
}
ul.secondary li {
display : inline;
padding : 0 1em;
border-right : 1px solid #ccc;
}
ul.secondary a {
padding : 0;
text-decoration : none;
}
ul.secondary a.active {
border-bottom : 4px solid #999;
}
#autocomplete {
position : absolute;
border : 1px solid;
overflow : hidden;
z-index : 100;
}
#autocomplete ul {
margin : 0;
padding : 0;
list-style : none;
}
#autocomplete li {
background : #fff;
color : #000;
white-space : pre;
cursor : default;
}
#autocomplete li.selected {
background : #0072b9;
color : #fff;
}
html.js input.form-autocomplete {
background-image : url(/modules/system/../../misc/throbber.gif);
background-repeat : no-repeat;
background-position : 100% 2px;
}
html.js input.throbbing {
background-position : 100% -18px;
}
html.js fieldset.collap sed {
border-bottom-width : 0;
border-left-width : 0;
border-right-width : 0;
margin-bottom : 0;
height : 1em;
}
html.js fieldset.collap sed * {
display : none;
}
html.js fieldset.collap sed legend {
display : block;
}
html.js fieldset.collap sible legend a {
padding-left : 15px;
background : url(/modules/system/../../misc/menu-expanded.png) no-repeat 5px 75%;
}
html.js fieldset.collap sed legend a {
background-image : url(/modules/system/../../misc/menu-collapsed.png);
background-position : 5px 50%;
}
* html.js fieldset.collap sed legend, * html.js fieldset.collap sed legend *, * html.js fieldset.collap sed table * {
display : inline;
}
html.js fieldset.collap sible legend a {
display : block;
}
html.js fieldset.collap sible .fieldset-wrapper {
overflow : auto;
}
.resizable-textarea {
width : 95%;
}
.resizable-textarea .grippie {
height : 9px;
overflow : hidden;
background : #eee url(/modules/system/../../misc/grippie.png) no-repeat center 2px;
border : 1px solid #ddd;
border-top-width : 0;
cursor : s-resize;
}
html.js .resizable-textarea textarea {
margin-bottom : 0;
width : 100%;
display : block;
}
.progress {
font-weight : bold;
}
.progress .bar {
background : #fff url(/modules/system/../../misc/progress.gif);
border : 1px solid #00375a;
height : 1.5em;
margin-top : 0.2em;
}
.progress .filled {
background : #0072b9;
height : 1em;
border-bottom : 0.5em solid #004a73;
width : 0%;
}
.progress .percentage {
float : right;
}
#first-time strong {
display : block;
padding : 1.5em 0 0.5em;
}
tr.selected td {
background : #ffc;
}
#permissions td.module {
font-weight : bold;
}
#permissions td.permission {
padding-left : 1.5em;
}
#access-rules .access-type, #access-rules .rule-type {
margin-right : 1em;
float : left;
}
#access-rules .access-type .form-item, #access-rules .rule-type .form-item {
margin-top : 0;
}
#access-rules .mask {
clear : both;
}
#user-login-form {
text-align : center;
}
#user-admin-filter ul {
list-style-type : none;
padding : 0;
margin : 0;
width : 100%;
}
#user-admin-buttons {
float : left;
margin-left : 0.5em;
clear : right;
}
.profile {
clear : both;
margin : 1em 0;
}
.profile .picture {
float : right;
margin : 0 1em 1em 0;
}
.profile dt {
margin : 1em 0 0.2em 0;
font-weight : bold;
}
.profile dd {
margin : 0;
}
table.content-field-overview, table.content-field-overview fieldset table {
width : 100%;
}
table.content-field-overview td {
width : 14%;
}
.content-field-overview-empty {
text-align : center;
}
.field .field-label, .field .field-label-inline, .field .field-label-inline-first {
font-weight : bold;
}
.field .field-label-inline, .field .field-label-inline-first {
display : inline;
}
.field .field-label-inline {
visibility : hidden;
}
.node-form .number {
display : inline;
width : auto;
}
body {
margin : 0;
padding : 0;
font-family : verdana;
font-size : 0.8em;
background-color : #5e5e56;
color : #b5b5a6;
}
div#layout {
width : 760px;
margin-left : auto;
margin-right : auto;
padding-top : 10px;
padding-bottom : 20px;
}
div#wrapper {
overflow : hidden;
position : relative;
}
div#side, div#main, div.vertBar, div#description {
margin-bottom : -10000px;
padding-bottom : 10000px;
}
div#side {
float : right;
width : 210px;
}
div.boxright {
right : 211px;
}
a#logo {
display : block;
height : 140px;
}
a#logo h1 {
position : relative;
top : -10000px;
margin : 0;
}
div#main {
float : left;
width : 550px;
}
div.left {
float : left;
}
div.right {
float : right;
}
div#footer p {
width : 550px;
}
br.clear {
line-height : 0;
font-size : 0;
clear : both;
}
div#wrapper {
padding-top : 18px;
background-color : #272722;
border-bottom : 1px solid #b0b0a0;
}
a {
color : #959588;
}
a:hover, a.active {
color : #d0d0be;
}
div#side {
background-color : #5e5750;
border-top : 1px solid #b0b0a0;
}
div#side a {
text-decoration : none;
}
a#logo {
border-bottom : 1px solid #b0b0a0;
background-color : #35352f;
background-image : url(logo.gif);
background-position : center center;
background-repeat : no-repeat;
}
div#side div.links-wrapper {
background-image : url(box-lg-lt.gif);
background-position : top right;
background-repeat : repeat-y;
}
div#side div.links {
border-bottom : 1px solid #b0b0a0;
padding-top : 3px;
padding-bottom : 4px;
text-align : center;
font-size : 10px;
background-image : url(box-lg-lt.gif);
background-position : top left;
background-repeat : repeat-y;
}
div#side div.navigation {
padding-bottom : 18px;
}
div#side div.navigation ul {
margin : 0;
margin-top : 18px;
padding : 0;
font-size : 0.8em;
}
div#side div.navigation a {
display : block;
padding-top : 0.2em;
padding-bottom : 0.2em;
padding-left : 35px;
background-image : url(box-sm.gif);
background-position : 20px center;
background-repeat : no-repeat;
text-align : left;
}
div#side div.navigation a:hover, div.navigation a.active {
background-color : #30302f;
color : #959588;
text-align : left;
}
div#main {
background-color : #35352f;
border-top : 1px solid #b0b0a0;
}
div.vertBar {
position : relative;
width : 18px;
border-right : 1px solid #b0b0a0;
background-image : url(box-lg.gif);
background-position : top center;
background-repeat : repeat-x;
}
div.box {
position : absolute;
bottom : 0;
height : 18px;
width : 18px;
background-image : url(box-lg.gif);
background-position : center center;
background-repeat : repeat-x;
}
div.boxleft {
left : 0;
}
div.right {
border-left : 1px solid #b0b0a0;
}
div#photograph, div#description {
margin-left : 28px;
margin-right : 27px;
}
div#description {
position : relative;
background-color : #4f4f40;
margin-top : 0.8em;
background-image : url(curve-topLeft.gif);
background-position : top left;
background-repeat : no-repeat;
}
div#description h2 {
font-size : 1em;
margin : 0;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
background-image : url(curve-topRight.gif);
background-position : top right;
background-repeat : no-repeat;
}
a.purchaseLink: hover {
color : #a5a597;
background-image : url(curve-buy-hover.gif);
}
a.purchaseLink span {
overflow : hidden;
display : block;
height : 1px;
width : 1px;
}
div#description div.text {
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
}
div#description p {
margin : 0;
padding-top : 0.5em;
padding-bottom : 0.5em;
}
div#thumbnails {
margin-top : 7px;
margin-left : 26px;
margin-right : 20px;
margin-bottom : 3px;
text-align : center;
}
div#thumbnails img {
height : 45px;
width : 45px;
border : 2px solid #35352f;
margin-right : 2px;
}
div#thumbnails a.active img {
border : 2px solid #99a694;
}
div#photograph {
text-align : center;
}
div#photograph img, div.frontimage img {
border : 1px solid #b0b0a0;
padding : 4px;
}
form#contact-mail-page input, form#contact-mail-page textarea {
background-color : #5e5e56;
border : 1px solid #959588;
color : #d0d0be;
padding-left : 0.25em;
padding-right : 0.25em;
}
form#contact-mail-page textarea {
padding : 0.25em;
}
div#footer {
border-top : 18px solid #272722;
font-size : 0.8em;
color : #909080;
}
div#footer p {
border-top : 1px solid #b0b0a0;
background-color : #35352f;
margin : 0;
float : left;
padding-top : 0.8em;
padding-bottom : 0.8em;
}
div.frontimage {
float : left;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 10px;
}
div.tabs {
font-size : 0.8em;
position : absolute;
top : 0;
right : 0;
}
div.tabs ul {
border : 0;
}
div.tabs ul li a {
background-color : #35352f;
}
div.tabs ul li a:hover {
background-color : #4e4e47;
}
div.tabs ul li.active a {
background-color : #5e5e56;
border-bottom : 0;
color : #959588;
}
div.block-simplenews {
margin : 18px;
}
div.text div.links {
text-align : right;
font-size : 0.8em;
}
div.block-dhtml_menu {
font-size : 0.8em;
margin-left : 18px;
padding-bottom : 18px;
}
div.about {
float : left;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 10px;
}
body {
text-align : center;
background-color : #5e5045;
}
.thumbnail img {
border : 1px solid white;
margin : 0 5px 5px 0;
}
.thumbnail:hove r {
background-color : transparent;
}
.thumbnail:hove r img {
border : 1px solid blue;
}
.thumbnail span {
position : absolute;
padding : 5px;
left : -1000px;
border : 1px dashed gray;
visibility : hidden;
color : black;
text-decoration : none;
}
.thumbnail span img {
border-width : 0;
padding : 2px;
}


Here is my index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Portfoli o | Melanie Watson Photography </title>


<style type="text/css" media="all">@im port "http://melaniewatsonph otography.com/style.css";</style>


</head>

<body class="page node">


<div class="containe r">

<div id="layout">


<div id="wrapper">

<div id="side">

<a href="index.php " id="logo"></a>

<div class="links-wrapper">
<div class="links">
<a href="http://www.melaniewats onphotography.c om/portfolio/QuickGal.php?al bum=Family/">FAMILY</a> . <a href="http://www.melaniewats onphotography.c om/portfolio/QuickGal.php?al bum=Travel/">TRAVEL</a> . <a href="http://www.melaniewats onphotography.c om/portfolio/QuickGal.php?al bum=Weddings/">WEDDINGS</a> </div>

</div>

<div class="navigati on">
<ul>
<li><a href="/about.php">ABOU T MELANIE</a></li>
<li><a href="/portfolio">PORT FOLIO</a></li>
<li><a href="http://www.melaniewats onphotography.c om/portfolio/QuickGal.php?al bum=Across+the+ Pond/">ACROSS THE POND</a></li>
<li><a href="/pricing.php">PR ICING</a></li>

<li><a href="/order.php">ORDE R</a></li>
<li><a href="/contact.php">CO NTACT</a></li>
<li><a href="/index.php">HOME </a></li>

</ul>

</div>
</div>


<div id="main">

<div class="vertBar left"><span>&nb sp;</span></div>
<div class="vertBar right"><span>&n bsp;</span></div>


<div class="iefix">

<center>



<div class="frontima ge">
<a href="http://www.melaniewats onphotography.c om/portfolio/QuickGal.php?al bum=Family/" title="Family" style="margin-left:10px;">
<img src="http://melaniewatsonph otography.com/1.jpg" width="213" height="302" /> </a>
</div>

<div class="frontima ge">
<a href="http://www.melaniewats onphotography.c om/portfolio/QuickGal.php?al bum=Travel/" title="Travel" style="margin-left:10px;">
<img src="http://melaniewatsonph otography.com/2.jpg" width="219" height="302" /> </a>
</div>
</center>

</div>
</div>


<div class="box boxright">&nbsp ;</div>
<div class="box boxleft">&nbsp; </div>

<br class="clear" />
</div>

<div id="footer">
<p>&nbsp; [ Atlanta, GA Photographer ] [
copyright &copy; Melanie Watson, 2007 - All Rights Reserved ]
</p>
</div>

</div>



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

[epots9]

i went to your site using IE7 and everything seems to working fine. On another note some words are hard to read cuz the font is dark and so is the background.

[KimberlyM]

Has anyone with IE6 checked the way the layout looks? I do not have IE7 and cannot download it (due to having WindowsME). Thanks.

[drhowarddrfine]

Yes, I see the missing footer at the bottom in IE6. You should be more specific about the missing divs.

You have a serious case of 'divitis', ie, a need to wrap everything in a div. I'm not so sure you need half those in the markup.