Mysterious line on IE browsers

[Cher]

I have been playing with a test layout for a site (graphics, css, etc) and I've come across a strange phenominum in Internet Explorer. Down in the lower left corner of the browser is a strange black line that starts from the left side of the browser window and moves into the page for an inch and a half or so. The line does not appear on any of the graphics on the page and it doesn't appear in Mozilla or Netscape 7.

It's no where near "presentable" so please excuse the mess and heavy images :)

I've seen this weird line appear in IE6 and IE5.5 on three different computers with different video cards and monitors. I can only guess that it's a problem with IE but I don't have any idea how to correct it.

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

[edited by: tedster at 4:44 pm (utc) on July 2, 2004]

[pageoneresults]

Hello Cher, it is suggested that you remove the linked reference above as it against board policy.

On quick review, that line appears in the image of the newspaper clipping at the bottom left hand corner.

[bcolflesh]

Change this:

<img src="img/newspaper_top.gif" width="480" height="425">

to:

<img src="img/newspaper_top.gif" width="480" height="427">

[pageoneresults]

Change this:

Yup, if you assign the true height of the image, that line will now become 2 pixels taller. It is left over remnants of when the image was cleaned up and someone missed that little bit at the bottom left edge.

Since the image is a transparent .gif, it would be easy to miss it. Assign a white background to the canvas and you'll see any stuff left over that should be erased.

[Cher]

Thanks all, I'll dig around and try to find the gibberish

Hello Cher, it is suggested that you remove the linked reference above as it against board policy.

Sorry about that; early last year when I was here asking for help (diff account) there wasn't a problem posting links to pages you were having problems with.

[SuzyUK]

Yes change the height of the top image, but (I'm disagreeing with P1R, sorry ;)) it's not an extra bit that hasn't been cleaned off the image..

for the benefit of readers now the link has been removed:
(note: I have changed the height to 427 &
the dimensions of the background gif are also 480 x 427)

Code:

<div style="
background-image:url(newspaper_bottom.gif);
position:absolute;
top: 0%;
left: 0%;
z-index:1;
">
<img src="newspaper_top.gif" width="480" height="427">
</div>

The image (newspaper-top) is placed within a div which has a background image (newspaper-bottom).

The line that is being described is being caused by a gap at the bottom of the newspaper-top image.

The gap is being caused because the default vertical alignment of an inline element, (which an image is) is about 3-4px from the actual bottom (it's the space that allows room for the descenders of letters like p, g, q..etc..) of the div.

Because of that gap the absolutely positioned div is being (incorrectly) stretched by IE to contain the top image and the descender space, to about 430/1px tall and the "line" at the bottom is being caused by the background image starting to repeat as the background-repeat property has not been set.

Fixes:
either set the background-repeat on the <div> to no-repeat
or
set the image inside the div (newspaper-top) to display: block;

Suzy

[pageoneresults]

Good catch Suzy! Sorry about that Cher. I opened that page up in my editor and saw what looked like remanants at the bottom left of the image. Now that I look at the source and CSS I can see what is happening.

Okay, I'm staying out of these topics! ;)

To protect the innocent...

On quick review...

[Cher]

The gap is being caused because the default vertical alignment of an inline element, (which an image is) is about 3-4px from the actual bottom (it's the space that allows room for the descenders of letters like p, g, q..etc..) of the div.

Holey smokes I would have never caught that! You are very wise :) I went back and added the no-repeat on the div and now all is well. Thank you :)