the Idol wrote:
As you can see in IE the thumbnail is hugging the top left corner of my background image and I see the background color behind it (which is correct)
Any help with this simple thing would be greatly appreciate. ( I hope that it is possible to look the same in both browsers)
I suppose a lot of how you approach this might depend on what you *didn't* tell us about other elements you might add to the layout. As far as making this layout look the same in Firefox and IE, I used the following and seemed to have good results. In addition to looking the same in both browsers, the images will flow with the viewport size, so it will work well at various resolutions. If you want to add a caption to the images, which you didn't specify, you'll need to play with things a bit, but hopefully this will get you on track.
Only tested in Firefox and IE 6:
* CSS *
body {
margin: 0;
padding: 0;
}.container {
background-color: ThreedFace;
display: inline;
float: left;
padding: 0 10px 10px 0;
}.thumbcontainer {
background: url(BG014.jpg) repeat left top;
border: 1px solid #FFF;
/* display: inline; fixes IE's double margin bug, */
display: inline;
float: left;
margin: 10px 0 0 10px;
padding: 0 10px 46px 0;
}.thumbcontainer .thumb {
clear: both;
float: left;
}* Markup *
<div class="container"> <div class="thumbcontainer"> <img class="thumb" src="th_P3300049.jpg" /> </div> <div class="thumbcontainer"> <img class="thumb" src="th_P3300049.jpg" /> </div> </div>
-- Best regards, M. Wilson ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
