Forum Moderators: open

Message Too Old, No Replies

Spacer image: different browsers?

Does IE have a different take on spacer gifs?

         

kenhoho

5:19 am on Jun 11, 2003 (gmt 0)

10+ Year Member



Question:

...When I enter the following HTML:

<div class=HORIZLINE>
<img src="images/blank.gif" height=1 width=592 alt="">
</div>

...Along with the following CSS:

.HORIZLINE { margin: 0; position: absolute; background-color: black; left: 234px; top: 553px; z-index: 6 }

...I get a correct-looking line (1 px high) in Netscape and Opera, but a very thick line (15px or so) in IE. Any ideas why?

Thanks.

grahamstewart

5:38 am on Jun 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The thickness is caused because IE is (correctly) interpreting..

<div class=HORIZLINE>
<img src="images/blank.gif" height=1 width=592 alt="">
</div>

as start of div,space,image,space,end of div

So your div is as tall as the current font. To avoid this your HTML should all be on one line like this..


<div class="HORIZLINE"><img src="images/blank.gif" height=1 width=592 alt=""></div>

However, why are you doing this?
There is no need to use spacer gifs in CSS.

Why not just change you code to read..

.HORIZLINE { margin: 0; position: absolute; background-color: black; left: 234px; top: 553px; z-index: 6; height: 1px }

and dump the spacer gif.

Or better still use the <hr> tag instead or just set a bottom border on whatever your are putting this line under.

kenhoho

4:42 am on Jun 12, 2003 (gmt 0)

10+ Year Member



Thanks, Graham, I appreciate all of your help.