The ^*(*)&)( Internet Explorer

[Shelly]

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.

 

[Shelly]

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.

 

[Shelly]

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.

 

[Beauregard T. Shagnasty]

I would like to know the answer for this.

Post the URL.

 

[nice.guy.nige]

While the city slept, Shelly ([email protected]) feverishly
typed...

[...]

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.

[...]

It is late here, and I have just got back from the pub, so maybe I am
missing something... but have you considered using the "repeat" value? eg.
background-repeat: no-repeat; ?

Cheers,
Nige

 

[Nik Coughlin]

While the city slept, Shelly ([email protected]) feverishly
typed...

[...]

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.

[...]

It is late here, and I have just got back from the pub, so maybe I am
missing something... but have you considered using the "repeat" value? eg.
background-repeat: no-repeat; ?

Which you could combine with the css for your backround-image using CSS's
background shorthand, like so?

background: url(images/index_02.gif) no-repeat;

 

[Shelly]

While the city slept, Shelly ([email protected])
feverishly typed...

[...]

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.

[...]

It is late here, and I have just got back from the pub, so maybe I am
missing something... but have you considered using the "repeat"
value? eg. background-repeat: no-repeat; ?

No, I haven't. You see I am a php person and am just learning a lot of this
stuff. Thanks. I'll try it.

 

[Shelly]

While the city slept, Shelly ([email protected])
feverishly typed...

[...]

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.

[...]

It is late here, and I have just got back from the pub, so maybe I am
missing something... but have you considered using the "repeat"
value? eg. background-repeat: no-repeat; ?

Which you could combine with the css for your backround-image using
CSS's background shorthand, like so?

background: url(images/index_02.gif) no-repeat;

I tried this. Now the image doesn't appear at all.

 

[Jonathan N. Little]

While the city slept, Shelly ([email protected])
feverishly typed...

[...]
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.
[...]

It is late here, and I have just got back from the pub, so maybe I am
missing something... but have you considered using the "repeat"
value? eg. background-repeat: no-repeat; ?

Which you could combine with the css for your backround-image using
CSS's background shorthand, like so?

background: url(images/index_02.gif) no-repeat;

I tried this. Now the image doesn't appear at all.

Shelly: Why don't we stop this guessing game "imagining what your page
might look like" and you post a URL this time? I bet we can find the
solution for you *first* shot.

 

[dorayme]

Shelly: Why don't we stop this guessing game "imagining what your page
might look like" and you post a URL this time? I bet we can find the
solution for you *first* shot.

Was just thinking this very thing.

 

[Jonathan N. Little]

Was just thinking this very thing.

Yeah I know, and the sad thing is poor Shelly is not alone! I am just
flabbergasted how many folks appear not to understand either that we
*cannot* see what is on *their* monitor or that it would be very useful
*to see it* to find the solution!

 

[Shelly]

Yeah I know, and the sad thing is poor Shelly is not alone! I am just
flabbergasted how many folks appear not to understand either that we
*cannot* see what is on *their* monitor or that it would be very
useful *to see it* to find the solution!

I put the file up on my server and stripped it down to just that item. No
problem in IE. So, I went back to the original and starting knocking things
out, section by section. I got down to just that section where the image
was invoked with the id="index-02" inside a div. Also inside that div was
text for a bunch of menu items that went over the image. Still had the
problem with only that. When I removed the text stuff, no problem. OK,
that told me it was in the text stuff. I went in and removed chunks at a
time. All the menu chunks were gone and still there was the problem. That
left only the structure around the text to have caused the problem. Then I
saw it. The web designer had put in a height="58" in a <table>
specification. When I deleted that, the problem was gone.

So, once again, when I tried to prepare a simple file for all of you to help
me with, I found the problem.

Thank you all for your help.

 

[Sherman Pendley]

So, once again, when I tried to prepare a simple file for all of you to help
me with, I found the problem.

That's actually a *big* part of why the regulars here ask for the smallest
example page that illustrates the problem. In the process of reducing the
page to the minimum necessary code to duplicate the problem, you'll quite
often find the solution too.

sherm--