Michael Wilson wrote:
> 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>
>
I have revised that example page to be more clear.
This is hard
The Idol
______________________________________________________________________
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/
