CSS control of image border doesn't work in Netscape 7 - why not?

D

dakota7

I'm trying to have a blank image on a page - not important why - set off
by a colored border.

This html fragment:

++++++++++++

<span style="border-style: solid; border-color: purple">
<img alt="blank" src="blank.gif" height="327" width="288">
</span>

++++++++++++

works perfectly for what I want to do - at least in Internet Explorer.
In Netscape 7 though, what I get is a border that's as wide as
specified, but not nearly high enough. I'm guessing it's maybe ten
pixels high. If I add a mouseover title attribute to the img tag, I can
see that Netscape has the image space set up correctly - just not the
border.

In this example, blank.gif is a 1x1 tranparent gif. But whether you use
that, have no file blank.gif, or use an existing jpg file with
nontrivial dimensions, same thing always happens in Netscape: the image
displays right, but the border height isn't correct.

The html looks okay to me. I know lots of workarounds to get the "look"
I want - but what I REALLY want to know is why the above only works in
Netscape.
 
K

Kris

dakota7 said:
I'm trying to have a blank image on a page - not important why - set off
by a colored border.
<span style="border-style: solid; border-color: purple">
<img alt="blank" src="blank.gif" height="327" width="288">
</span>

You forgot the border-width property;
 
D

dakota7

Kris said:
You forgot the border-width property;

Well, true... but including it doesn't solve the problem. Paste the
above html fragment into a file and open the file in Netscape 7 and IE
6. The border will be right in IE and wrong in Netscape, with or
without border-width.
 
S

Steve Pugh

dakota7 said:
I'm trying to have a blank image on a page - not important why - set off
by a colored border.

<span style="border-style: solid; border-color: purple">
<img alt="blank" src="blank.gif" height="327" width="288">
</span>

Why are you setting the border on a span instead of on the image
itself?

If you add some text to the span you'll be able to see what is
actually happening:

The border is around the CSS inline box which has a height as set by
the line-height property. You haven't set the line-height property so
it takes the default value which is normally about 1.2 times the font
size. The image is taller than the line-height and so spills out of
the inline box.

It would be a much better idea to set the border on the image itself.

<img alt="blank" src="blank.gif" height="327" width="288"
style="border-style: solid; border-color: purple">

(BTW is alt="blank" going to be useful or annoying for blind users,
search engines, etc. ?)

Steve
 
D

David Graham

Steve Pugh said:
Why are you setting the border on a span instead of on the image
itself?

If you add some text to the span you'll be able to see what is
actually happening:

The border is around the CSS inline box which has a height as set by
the line-height property.
Hi Steve
I can see you have answered this question well, but I'm just a little
curious as to why the span does not grow tall enough to contain the image,
the span grows as there is more lines of text to contain so why not for an
image. The only thing I think of to explain this behaviour is some browsers
see an image as a single line of text and therefore make the span height
equal to the default of 1.2 times the font height regardless of the images
height - is this correct?
thanks in advance
David
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top