By BDS on

Thanks in advance,

I have the Exhibits module rendering my staff directory just fine in Firefox and Chrome using the Thumbnail view class.
e.g. (15 profiles):
X X X X X
X X X X X
X X X X X

However, in IE 7, it display all staffs photo and text over each other, overlapping into a single profile block... any suggestions?
e.g. (all 15 profiles overlaps into a single div):
X

Bonal

⋅ Categories: Drupal 6.x

Comments

mschlitz’s picture

mschlitz commented

I hate IE, I'm just going to throw that out there.


However, a magical trick I've learned when dealing with this is called "layout" and information about it can be found here. Pretty much your problem is that your divs don't have layout. How do you give them layout? I'm glad you asked. A simple way to do this is by adding the following css to your IE-specific CSS file. This is a Microsoft only fix for issues like this so it will NOT validate as valid CSS in another browser.

.appropriate-selector-here {
  zoom:1;
}

There may be other ways to fix this (and I welcome any other suggestions) but this is what has worked for me so far.

BDS’s picture

BDS commented

Mschlitz, thanks for that tip--appreciate it! It will be useful for other IE issues we'll have to deal with. There's actually an IE specific class within Exhibits which resolved the overlapping issue:

From Diodata:

div.exhibit-thumbnailView-itemContainer-IE {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F0FFF0 none repeat scroll 0 0;
border:1px solid #BCB79E;
float:left;
height:220px;
margin:0.3em;
padding:0.9em;
text-align:center;
width:175px;
}