Nista Theme IE6 diplay problem

flavor - July 1, 2008 - 17:53

I have a site which looks awesome except for one small part which I cannot figure out.

This page:

http://www.phhlaw.com/cm/custom/attorney-biographies

Displays perfectly in IE7, FF, Safari etc..

In IE6 it pushes the table which the photos live in down to the bottom of the page.

Is there an easy css fix for this? Anyone have a suggestion for what I may do to correct this?

Any help is appreciated.

Thanks

J -

ahh, this infamous problem

Madness - July 1, 2008 - 22:37

ah-ha, seen it before, not too shocked to see it again. it's a problem with your css file. and it's not so much a prob with the css as it is a prob with ie.

is there anyway we can take a look at your css? (the part that controls your columns)

here is the css file I am using

flavor - July 2, 2008 - 20:53

here is what I am using ---

* {
margin: 0;
padding: 0;
}

body {
font: .9em " itc legacy" "Times New Roman", Times, serif;
background: #666666 url(bg-bodyFiller.jpg) repeat;
margin: 0;
padding: 0;
text-align: left;

}

input {
font: 12px/100%;
font-family: Tahoma,Sans,Arial,Helvetica,sans-serif;
color: #494949;
}

textarea, select {
font: 12px/160%;
font-family: Georgia, "Times New Roman", Times, serif;
color: #494949;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0pt;
}

div#sidebarRight h2 {
margin: .2em;
}

h1, h2, h3, h4, h5, h6 {
margin-bottom:0.5em;
}
h1 {
font-size:1.3em;
}
h2 {
font-size:1.2em;
}
h3, h4, h5, h6 {
font-size:1.1em;
}

ul, quote, code, fieldset {
margin: .5em 0;
}

p {
margin: 0.6em 0 1.2em;
padding: 0;
}

a:link, a:visited {
color: #473217;
text-decoration: underline;
}

#mainContent a:link, #mainContent a:visited {
color: #CC6600;
text-decoration: underline;
}

a:hover {
color: #333;
text-decoration: underline;
}

a:active, a.active {
color: #CC6600;
}

hr {
margin: 0;
padding: 0;
border: none;
height: 1px;
background: #5294c1;
}

ol {
margin: 0 0 0 2em;
padding: 0;
}

ul li {
margin: 0.4em 0 0.4em .5em;
}

.item-list ul {
margin: 0.35em 0 0 -0.5em;
padding: 0;
}

.item-list ul ul {
margin-left: 0em;
}

ul li, .item-list ul li, li.leaf {
margin: 0.15em 0 0.15em .5em;
}

ul li, .item-list ul li, li.leaf {
padding: 0 0 .2em 1.5em;
list-style-type: none;
list-style-image: none;
background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em;
}

ul li.expanded {
background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em;
}

ul li.collapsed {
background: transparent url(images/menu-collapsed.gif) no-repeat 0px .35em;
}

ul li.leaf a, ul li.expanded a, ul li.collapsed a {
display: block;
}

ul.inline li {
background: none;
margin: 0;
padding: 0 1em 0 0;
}

fieldset ul.clear-block li {
margin: 0;
padding: 0;
background-image: none;
}

dl {
margin: 0.5em 0 1em 1.5em;
}

dl dt {
}

dl dd {
margin: 0 0 .5em 1.5em;
}

img, a img {
border: none;
}

table {
margin: 1em 0;
width: 100%;
}

thead th {
border-bottom: 2px solid #F4E2D3;
color: #494949;
font-weight: bold;
}

th a:link, th a:visited {
color: #6f9dbd;
}

td, th {
padding: .3em .5em;
}

tr.even, tr.odd, tbody th {
border: solid #F4E2D3;
border-width: 1px 0;
}

tr.odd, tr.info {
background-color: #FAF3ED;
}

tr.even {
background-color: #fff;
}

tr.odd td.active {
background-color: #F5E8DD;
}

tr.even td.active {
background-color: #e6f1f7;
}

td.region, td.module, td.container {
border-top: 1.5em solid #fff;
border-bottom: 1px solid #F0D2B4;
background-color: #F3E2D4;
color: #715D3B;
font-weight: bold;
}

tr:first-child td.region, tr:first-child td.module, tr:first-child td.container {
border-top-width: 0;
}

span.form-required {
color: #ffae00;
}

span.submitted, .description {
font-size: 0.92em;
color: #898989;
}

.description {
line-height: 150%;
margin-bottom: 0.75em;
color: #898989;
}

.messages, .preview {
margin: .75em 0 .75em;
padding: .5em 1em;
}

.messages ul {
margin: 0;
}

.form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item {
margin: 0.25em 0;
}

#center form {
margin-bottom: 2em;
}

.form-button, .form-submit {
margin: 2em 0.5em 1em 0;
}

#watchdog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
table .form-button, table .form-submit {
margin: 0;
}

.box {
margin-bottom: 2.5em;
}

.bd #container {
margin: 0pt auto;
max-width: 800px;
min-width: 750px;
position:relative;
width: 95%;
background: #FFFFFF;
margin: 1em auto;
border: 2px solid #000000;
text-align: left;
overflow: hidden;
}
.bd #header {
padding: .25em 1em;
border-left: #6A6A6A 1px solid;
background: #000000;
}
.bd #header h1 {
margin: 0;
padding: .75em 0;
color: white;
font-size: 2em;
}

.bd #nav {
border-top: #6A6A6A 1px solid;
border-bottom: #6A6A6A 1px solid;
padding: .5em .75em;
background-color: #000;
}

.bd #sidebarLeft {
float: left;
width: 180px;
max-width: 16em;
padding: 0.25em;
margin: auto;
margin-top: 0.5em;
background-color: #whitesmoke;
border-right: 1px solid #DBDBDB;
border-bottom: 1px solid #DBDBDB;
border-top: 1px solid #DBDBDB;
}
.bd #sidebarLeft h3, .bd #sidebarLeft p {
margin-left: 0.5em;
margin-right: 0.5em;
}
.bd #sidebarRight {
float: right;
width: 180px;
max-width: 16em;
padding: 0.25em;
margin: auto;
margin-top: 0.5em;
background-color: #EBEBEB;
border-left: 1px solid #DBDBDB;
border-bottom: 1px solid #DBDBDB;
border-top: 1px solid #DBDBDB;
}
.bd #sidebarRight h3, .bd #sidebarRight p {
margin-left: 0.5em;
margin-right: 0.5em;
}

.bd div#contentArea {
margin: 0px;
text-align: left;
}

.bd #mainContentSidebarLeft {
min-width: 540px;
margin-top: 0;
padding: 0 0.25em;
margin-left: 190px;
margin-right: 10px;
text-align:left;
}
.bd #mainContentSidebarRight {
min-width: 540px;
margin-top: 0;
padding: 0 0.25em;
margin-left: 10px;
margin-right: 190px;
text-align: left;
}
.bd #mainContentSidebarBoth {
min-width: 340px;
margin-top: 0;
padding: 0 0.25em;
margin-right: 190px;
margin-left: 190px;
text-align: left;
}
.bd #mainContent {
min-width: 540px;
margin-top: 0;
padding: 0 0.25em;
margin: 0px 10px;
text-align: left;
}
.bd div#footer {
margin: 0pt;
padding: 0pt;
background: #000000;
width: 100%;
border-top: #C5C5C5 1px solid;
}

.bd #topShadow{
width: 100%;
background: top #fff;
padding: 6px 0 0 0;
}

.bd #footer p {
margin: 0;
padding: .75em 0;
}

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

ul#navlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

ul#navlist li {
display: inline;
list-style-type: none;
background: none;
padding: 0pt;
}

#navlist a { padding: 3px 10px; text-decoration: none; }

#navlist a:link, #navlist a:visited {
color: #E5D091;
}

#navlist a:hover {
color: #fff;
}

#navlist a.active, #navlist a.active a:hover {
color: #fff;
}

ul#subnavlist {
display: inline;
list-style-type: none;
background: none;
padding: 0.75em 0pt;
float: right;
}

ul#subnavlist li {
display: inline;
list-style-type: none;
background: none;
padding: 0pt;
}

#header h2 {
margin: 0pt;
padding: 0pt;
}

#header h2 a {
background:transparent url(images/logo.png) no-repeat scroll 0%;
display:block;
height:69px;
overflow:hidden;
text-indent:-9999px;
width:318px;
}

#breadcrumb {
/* margin: -6px 0 0 0pt;
padding: .3em 0;*/
}

#mainContent ol, #mainContent ul {
margin-left: 1em;
}

/**
* Primary navigation
*/
ul.primary-links {
margin: 0;
padding: 0;
float: right;
position: relative;
z-index: 4;
}

ul.primary-links li {
margin: 0;
padding: 0;
float: left;
background-image: none;
}

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
display: block;
margin: 0 1em;
padding: .75em 0 0;
color: #fff;
background: transparent url(images/bg-navigation-item.png) no-repeat 50% 0;
}

ul.primary-links li a:hover, ul.primary-links li a.active {
color: #fff;
background: transparent url(images/bg-navigation-item-hover.png) no-repeat 50% 0;
}

/**
* Secondary navigation
*/
ul.secondary-links {
margin: 0;
padding: 18px 0 0;
float: right;
clear: right;
position: relative;
z-index: 4;
}

ul.secondary-links li {
margin: 0;
padding: 0;
float: left;
background-image: none;
}

ul.secondary-links li a, ul.secondary-links li a:link, ul.secondary-links li a:visited {
display: block;
margin: 0 1em;
padding: .75em 0 0;
color: #cde3f1;
background: transparent;
}

ul.secondary-links li a:hover, ul.secondary-links li a.active {
color: #cde3f1;
background: transparent;
}

/**
* Local tasks
*/
ul.primary, ul.primary li, ul.secondary, ul.secondary li {
border: 0;
background: none;
margin: 0;
padding: 0;
}

#tabs-wrapper {
margin: 0 -26px 1em;
padding: 0 26px;
border-bottom: 1px solid #e9eff3;
position: relative;
}
ul.primary {
padding: 0.5em 0 .1em;
}
ul.secondary {
/* clear: both; */
text-align: left;
border-bottom: 1px solid #e9eff3;
margin: -0.2em -26px 1em;
padding: 0 26px 0.6em;
}
h2.with-tabs {
float: left;
margin: 0 2em 0 0;
padding: 0;
}

ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
border: 0;
background: transparent;
padding: 4px 1em;
margin: 0 0 0 1px;
height: auto;
text-decoration: none;
position: relative;
top: -1px;
}
#mainContent ul.primary li.active a, #mainContent ul.primary li.active a:link, #mainContent ul.primary li.active a:visited, #mainContent ul.primary li a:hover,
#mainContent ul.secondary li.active a, #mainContent ul.secondary li.active a:link, #mainContent ul.secondary li.active a:visited, #mainContent ul.secondary li a:hover {
background: #333;
color: #fff;
}
ul.primary li.active a,
ul.secondary li.active a {

}

/**
* Nodes & comments
*/
.node {

}

ul.links li, ul.inline li {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 1em;
background-image: none;
}

.node .links, .comment .links {
text-align: left;
}

.node .links ul.links li, .comment .links ul.links li {}
.terms ul.links li {
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 1em;
}

.picture, .comment .submitted {
float: right;
clear: right;
padding-left: 1em;
}

.new {
color: #ffae00;
font-size: 0.92em;
font-weight: bold;
float: right;
}

.terms {
float: right;
}

.preview .node, .preview .comment, .sticky {
margin: 0;
padding: 0.5em 0;
border: 0;
background: 0;
}

.sticky {
padding: 1em;
background-color: #fff;
border: 1px solid #e0e5fb;
margin-bottom: 2em;
}

#comments {
position: relative;
top: -1px;
border-bottom: 1px solid #e9eff3;
padding: 0 25px;
}

#comments h2.comments {
margin: 0 -25px;
padding: .5em 25px;
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
}

.comment {
margin: 0 -25px;
padding: 1.5em 25px 1.5em;
border-top: 1px solid #e9eff3;
}

.indented {
margin-left: 25px;
}

.comment h3 a.active {
color: #494949;
}

.node .content, .comment .content {
margin: 0.6em 0;
}

/**
* Aggregator.module

#aggregator {
margin-top: 1em;
}
#aggregator .feed-item-title {
font-size: 160%;
line-height: 130%;
}
#aggregator .feed-item {
margin: -1.5em -31px;
padding: 1.5em 31px;
}
#aggregator .feed-item-categories {
font-size: 0.92em;
}
#aggregator .feed-item-meta {
font-size: 0.92em;
color: #898989;
} */

/**
* Color.module
*/
#palette .form-item {
border: 1px solid #fff;
}
#palette .item-selected {
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
border: 1px solid #d9eaf5;
}

/**
* Menu.module
*/
tr.odd td.menu-disabled {
background-color: #edf5fa;
}
tr.even td.menu-disabled {
background-color: #fff;
}
td.menu-disabled {
opacity: 0.5;
}

/**
* Poll.module
*/
.poll .bar {
background: #fff url(images/bg-bar-white.png) repeat-x 0 0;
border: solid #f0f0f0;
border-width: 0 1px 1px;
}

.poll .bar .foreground {
background: #71a7cc url(images/bg-bar.png) repeat-x 0 100%;
}

.poll .percent {
font-size: .9em;
}

/**
* Autocomplete.
*/
#autocomplete li {
cursor: default;
padding: 2px;
margin: 0;
}

/**
* Collapsible fieldsets
*/
fieldset {
margin: 1em 0;
padding: 1em;
border: 1px solid #d9eaf5;
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
}

html.js fieldset.collapsed {
background: transparent;
padding-top: 0;
padding-bottom: .6em;
}

html.js fieldset.collapsible legend a {
padding-left: 2em;
background: url(images/menu-expanded.gif) no-repeat 0% 50%;
}

html.js fieldset.collapsed legend a {
background: url(images/menu-collapsed.gif) no-repeat 0% 50%;
}

/**
* Syndication icons and block
*/
#block-node-0 h2 {
float: left;
padding-right: 20px;
}

#block-node-0 img, .feed-icon {
text-align:right;
/* float: right;
padding-top: 4px; */
}

#block-node-0 .content {
clear: right;
}

/**
* Login Block
*/
#user-login-form {
text-align: center;
}
#user-login-form ul {
text-align: left;
}

.node-form .standard {
clear:none;
}

.rssTemplateBox {
padding: 0.2em 0.2em 0.2em 1.70em;
margin-left: 1.2em;
background: url(images/feed.png) no-repeat left;
}

.defaultTemplateBox {
width: 90%;
margin: 0 auto 1em;
padding: .5em;
background-color: #F3F3F3;
text-align: center;
}

/* for tinyMCE */
body.mceContentBody {
background: #fff;
color: #000;
text-align: left;
}

/* breadcrumb */

#breadcrumb .wrapper {
padding-left: 1em;
}

/* footer */
#footer .wrapper {
color: #BA9800;
padding: 0 0.5em;

}

#footer .wrapper p {
color: #656565;
width:40%;
}

#footer .wrapper ul#subnavlist {
display: inline;
list-style-type: none;
background: none;
padding: 0.75em 0pt;
float: right;
}

#footer .wrapper li {
border-right: 1px solid #656565;
display: block;
float: left;
padding: 0pt 10px;
margin: 0pt;
}

#footer .wrapper li.last {
border-right-style: none;
padding-right: 0pt;
}

/* for altering maincontent width/position */

#title {
font-weight: bold;
padding-left: 12pt;

}

ul.menu li {
background: none;
margin: 0pt;
padding: 0pt;
}

#search-block-form .form-button, #search-block-form .form-submit,
#user-login-form .form-button, #user-login-form .form-submit {
margin: 0px;
}

.profile, form.fivestar-widget {
clear: none;
}

.node {
padding-bottom: 10px;
}
#box-content {
float: right;
padding: 10px;
margin: 10px;
background: #ffffff;
border: 2px solid #ccc;
width: 200px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
}
html>body #box-content {
width: 200px;
/* ie5win fudge ends */
}

.address-block {
font-size: 11px;
}

#box-left {
float: left;
padding: 10px ;
margin: 15px 15px 16px 0px;
background: #ffffff;
border: 2px solid #ccc;
width: 200px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
}
html>body #box-left {
width: 200px;
/* ie5win fudge ends */
}
.dropcap {
float:left;
color:#D4D4C7;
font-size:80px;
line-height:70px;
padding-top:2px;
font-family: Times, serif, Georgia;
}
.mceToolbarTop * {
float:left;
}

.mceToolbarTop select {
width:auto!important;
}

.mceToolbarTop option {
float:none;
}
.mceToolbarTop {
white-space: normal;
}
#wrapper #container #center {
/* Reduce amount of damage done by extremely wide content */
overflow: hidden;
}
#center {
width: 100%;
padding: 0px 5px;
}

/* IE6 fix */
* html #left {
left: -10px;
}

/* for tinyMCE */
body.mceContentBody {
background: #fff;
color: #000;
text-align: left;
}

Does anyone have any input

flavor - July 3, 2008 - 16:08

Does anyone have any input on how I may solve this seemingly simple css issue? I am stumped...

Thanks

sorry i'm late

Madness - July 4, 2008 - 13:09

you do know that IE cannot read 'min-width' and 'max-width', right? it has problems with it (at lest IE 6 does).

you can make a separate ie.css for IE and put it in the folder of the theme you are using. On the page.tpl.php page put

   <!--[if IE]>
      <link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie.css" type="text/css">
  <![endif]-->
above the </head> line

after that, all you can do is try to tweak IE. But i think a problem you might be facing might have to do with how you positioned your columns. But that'll take too long to explain i think so try this way.

I figured it out: .bd

flavor - July 8, 2008 - 21:39

I figured it out:

.bd #mainContentSidebarLeft {
width: expression( document.body.clientWidth < 544 ? "500px" : "auto" ); /* set min-width for IE */
min-width: 540px;
margin-top: 0;
padding: 0 0.25em;
margin-left: 190px;
margin-right: 10px;
text-align:left;

and then:

table {
margin: 1em 0;
width: 99%;

That fixed it on IE6 and kept it working on all other browsers.

J -

 
 

Drupal is a registered trademark of Dries Buytaert.