IE and css

[Lance]

For some reason my photo blog does not display correctly in IE. The problem is that IE is not displaying the thumbnails in a table-cell.

 

This is the part on the template:

<div class="thumbs"><#fbthumbs#></div>

 

And on the css layout:

.fbthumb, .fbrandthumb, .fbthisthumb, .fbmenuthumb { 
display: table-cell;
padding: 5px 0px 10px 0px;
   width: 140px;
   text-align: center;
   vertical-align: middle;
}
.fbcomthumb {
   padding: 0px 0px 5px 5px;
   float: right;
}
.fbthumb img, .fbmenuthumb img {
   border: 1px solid #000;
}
.fbthisthumb img {
   border: 2px solid #000;
}
.fbthisthumb {
   background-color: #eee;
   -moz-border-radius-bottomleft: 10px;
   -moz-border-radius-bottomright: 10px;
}

and:

.thumbs {
   width: 700px;
}

 

You can view the blog here: http://shutterimpulse.com/

 

Also, for some reason on IE the image is aligned to the right.

 

Template:

<div class="mainimage">
<div style="float: left; line-height: 20px; margin-left: 10px; width: 80px; text-align: left;"><#fbprev#> </div>
<div style="float: right; line-height: 20px; margin-right: 10px; width: 80px; text-align: right;"> <#fbnext#></div>
<div style="line-height: 20px;"><#fbarchives#></div>
<div style="border: #000000 1px solid; width:600px; height:450px; left:50px; right:50px; position:relative;">
<img src="<#fbimageurl#>" width="<#fbwidth#>" height="<#fbheight#>" alt="<#fbdate#>" usemap="#imgmap" /></div><br />
<map id="imgmap" name="imgmap">
<?php if("<#fbprevlink#>"!=$emptylink) { ?><area href="<#fbprevlink#>" coords="0,0,<?php echo floor(<#fbwidth#>/2); ?>,<?php echo <#fbheight#>; ?>" alt="« previous" /><?php } ?>
<?php if("<#fbnextlink#>"!=$emptylink) { ?><area href="<#fbnextlink#>" coords="<?php echo ceil(<#fbwidth#>/2); ?>,0,<?php echo <#fbwidth#>; ?>,<?php echo <#fbheight#>; ?>" alt="next »" /><?php } ?>
</map>
Posted under: <#fbmemberof#><br/>
<strong><#fbtitle#></strong> <em><#fbdate#></em> <#fbcaption#><br/><#fbcomlink#><br/>
</div>

 

and css:

.mainimage {
text-align: center;
border: 0px solid #000;
width: 700px;
   background-color: #eee;
   -moz-border-radius: 10px;
}

 

Now I understand that the the white border won't be rounded in IE but does anybody know how to fix either of these problems? It looks great in firefox but looks horrible in IE. I have also been told it doesn't look great in opera as well.

[Lance]

Right, so I got the thumbnails fixed. I guess I posted this thread too soon. I still have to figure out how to get it to center the image though.

[Lance]

That was fixed too. IE didn't like "right:50px" property. I changed it to "margin-right:50px".

 

But now for some reason the picture details are much lower in IE than in firefox. does anybody know why?

[RyanJ]

I'm not shure if you have fixed trhis or not yet but for future reference these two sites should help you

 

http://www.positioniseverything.net/

http://www.quirksmode.org/

 

Cheers,

 

Ryan Jones

[5614]

Seems to all be working fine when I open the page on both IE and FF, thumbnails, alignment & quality all seem the same.

[Lance]

Yep, I fixed just about everything.