Lance Posted October 19, 2005 Share Posted October 19, 2005 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. Link to comment Share on other sites More sharing options...
Lance Posted October 19, 2005 Author Share Posted October 19, 2005 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. Link to comment Share on other sites More sharing options...
Lance Posted October 19, 2005 Author Share Posted October 19, 2005 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? Link to comment Share on other sites More sharing options...
RyanJ Posted October 19, 2005 Share Posted October 19, 2005 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 Link to comment Share on other sites More sharing options...
5614 Posted October 21, 2005 Share Posted October 21, 2005 Seems to all be working fine when I open the page on both IE and FF, thumbnails, alignment & quality all seem the same. Link to comment Share on other sites More sharing options...
Lance Posted October 21, 2005 Author Share Posted October 21, 2005 Yep, I fixed just about everything. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now