3 replies [Last post]
sluxor
Offline
newbie
Last seen: 14 years 49 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

Hi,

I have an ID that I use to place the banner image in it. The
problem is I need to make a bottom border to give it a separation
between the image and the content below it. It depits itself
normally in FF, as in adheres to the very last pixel line of the
image but in IE I see a gap between the border and the image
which looks like a padding. Here's the ID:

#banner { background-color: #fff; border-bottom: 1px solid #000; width: 100%; background-repeat: no-repeat; background-position: 0 0; psition: relative; }


I would like to eliminate this space between the border and the
image if it is possible in IE. Any hint would be appreciated.

Thank You

johnmr
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT-6
Joined: 2006-09-09
Posts: 31
Points: 0

One thing I've noticed in IE

One thing I've noticed in IE is it is important to leave no space when you close your tag. Try this:

Where you leave no space before the tag. Not sure this will work, but I've experienced something similar in IE and this did the trick

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

johnmr has touched on the

johnmr has touched on the trigger. The white space creates an anonymous inline box. The default vertical alignment for an image is on the baseline of that box. The baseline is raised above the bottom of the box enough to allow for letter descenders, eg. qypgj.

But, johnmr's solution make the fix dependent on the html formatting. Any accidental change will bring the gap back.

I am one who thinks that having a consistent formatting is important to human readability and debugging. I would format that snippet like so:

<div id = "banner">
  <img src="banner.jpg" alt="hi" />
</div>
Which would break the fix.

Instead, do this:

#banner img {
    vertical-align: bottom;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sluxor
Offline
newbie
Last seen: 14 years 49 weeks ago
Timezone: GMT-5
Joined: 2007-02-09
Posts: 10
Points: 0

Thank you johnmr and kk5st.

Thank you johnmr and kk5st. The solution you submitted works as
it expected. I wasn't aware of a default vertical alignment at
all -- it would have taken forever to figure this one out.

Thank You