Posted by Shelly on 11/29/07 22:53

Shelly wrote:
> Shelly wrote:
>> I have the following:
>>
>> #index-02 {
>> position:absolute;
>> left:0px;
>> top:132px;
>> width:900px;
>> /*height:39px;*/
>> background-image: url(images/index_02.gif);
>> }
>>
>> This dispalys perfectly in FF, but in IE7, the background image shows
>> up twice as if it is tiling vertically. The invocation is very
>> simple:
>> <div id=index_02"> A one row table here</div>
>>
>> The image appears twice, with the text from the table in the top one
>> and nothing but the background image in the lower, second, one. I
>> had the height specified, but then commented it out. Neither way
>> works.
>
> Here is another thing. I have two more definitions:
> #index-03 {
> position:absolute;
> left:0px;
> top:171px;
> width:216px;
> height:480px;
> background-image: url(images/index_03.gif);
>
> }
>
> #index-04 {
> position:absolute;
> left:216px;
> top:171px;
> width:684px;
> height:143px;
> background-image: url(images/index_04.gif);
>
> }
>
> It turns out that index-04 covers the bottom tile, but index=03
> doesn't.
> I am baffled.

I would like to know the answer for this. In the meantime I have a HACK
"fix". I made the z-index for index-02 to be 0 and made the z-index for
index-03 and index-04 ro be 1. Now the bottom image from index-02 is
maxked.

--
Shelly

[Back to original message]