By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,498 Members | 1,564 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,498 IT Pros & Developers. It's quick & easy.

FF & IE Problems

P: 2
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.collapsed {
border-bottom-width : 0;
border-left-width : 0;
border-right-width : 0;
margin-bottom : 0;
height : 1em;
}
html.js fieldset.collapsed * {
display : none;
}
html.js fieldset.collapsed legend {
display : block;
}
html.js fieldset.collapsible legend a {
padding-left : 15px;
background : url(/modules/system/../../misc/menu-expanded.png) no-repeat 5px 75%;
}
html.js fieldset.collapsed legend a {
background-image : url(/modules/system/../../misc/menu-collapsed.png);
background-position : 5px 50%;
}
* html.js fieldset.collapsed legend, * html.js fieldset.collapsed legend *, * html.js fieldset.collapsed table * {
display : inline;
}
html.js fieldset.collapsible legend a {
display : block;
}
html.js fieldset.collapsible .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:hover {
background-color : transparent;
}
.thumbnail:hover 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>Portfolio | Melanie Watson Photography </title>


<style type="text/css" media="all">@import "http://melaniewatsonphotography.com/style.css";</style>


</head>

<body class="page node">


<div class="container">

<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.melaniewatsonphotography.com/portfolio/QuickGal.php?album=Family/">FAMILY</a> . <a href="http://www.melaniewatsonphotography.com/portfolio/QuickGal.php?album=Travel/">TRAVEL</a> . <a href="http://www.melaniewatsonphotography.com/portfolio/QuickGal.php?album=Weddings/">WEDDINGS</a> </div>

</div>

<div class="navigation">
<ul>
<li><a href="/about.php">ABOUT MELANIE</a></li>
<li><a href="/portfolio">PORTFOLIO</a></li>
<li><a href="http://www.melaniewatsonphotography.com/portfolio/QuickGal.php?album=Across+the+Pond/">ACROSS THE POND</a></li>
<li><a href="/pricing.php">PRICING</a></li>

<li><a href="/order.php">ORDER</a></li>
<li><a href="/contact.php">CONTACT</a></li>
<li><a href="/index.php">HOME</a></li>

</ul>

</div>
</div>


<div id="main">

<div class="vertBar left"><span>&nbsp;</span></div>
<div class="vertBar right"><span>&nbsp;</span></div>


<div class="iefix">

<center>



<div class="frontimage">
<a href="http://www.melaniewatsonphotography.com/portfolio/QuickGal.php?album=Family/" title="Family" style="margin-left:10px;">
<img src="http://melaniewatsonphotography.com/1.jpg" width="213" height="302" /> </a>
</div>

<div class="frontimage">
<a href="http://www.melaniewatsonphotography.com/portfolio/QuickGal.php?album=Travel/" title="Travel" style="margin-left:10px;">
<img src="http://melaniewatsonphotography.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>
Jun 11 '07 #1
Share this Question
Share on Google+
3 Replies


epots9
Expert 100+
P: 1,351
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.
Jun 11 '07 #2

P: 2
Has anyone with IE6 checked the way the layout looks? I do not have IE7 and cannot download it (due to having WindowsME). Thanks.
Jun 11 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jun 11 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.