Strange line gap in our images under IE only!

HTML & CSS
1

Hi,

On the home-page of our Web site we have two images that come together to make the main image of the home-page. If you do view source here:

they will be like these 2 images:

images/new_homepage_left_3.gif
background=“images/deliver-best-search-result_3.jpg”

These images are correctly merging together as one seamless photo under all browsers except IE!!!
I have tried everything but IE continues to have a strange one line wide gap between the 2 images. Can you suggest what I need to do to correct this IE specific problem?

Regards,

2

Sp, it’s possible there was another element, e.g. a span, within the dt or dd which created the anonymous inline-box. But without seeing the actual code? :shrug:

cheers,

gary

3

IE’s alignment depends on whether it’s in standards or quirks mode. Firefox depends on whether there is text on the same line. All this depends on my often faulty memory. :stuck_out_tongue:

cheers,

gary

4

I had suspected that the lack of text is what kept FF working fine.

Someone at another forum had a dl with images in the dd’s?.. and there was a gap appearing only in FF, complete doctype, no text. When colouring the boxes, the gap was made up of the (forget, dt’s or dd’s who had the images). It was the Mysterious Gap, and Opera, IE, and Saffy didn’t show it. I never knew why.

5

Good call gary, I didn’t even notice that the OP had an incomplete doctype.

I had suspected that the lack of text is what kept FF working fine.

6

Man I tell you the more I learn about this CSS, the more I see how little I know about this CSS stuff. I tell you someone needs to come up with a CSS book that has a complete reference of all CSS commands/codes with examples in one concise place.

Have a gad day mate :slight_smile:

7

Thanks. That did the Job
Not sure why, but it does the Job.

WHY:
images are inlines, like text. So inline elements have “lines”: baseline, bottom, middle, text-top, etc… the default is “baseline” which makes sense for text… it leaves a little bit of room on the bottom for the dangly letters (descenders: qyjp…).

Sometimes it’s Firefox who’s the only browser showing the gap. I don’t know why all browsers don’t always show it all the time. But anyway, what Ray did was have you set all the images to “bottom” which is the bottom of the tail of a dangly letter. So, no more gap.

If you happen to set the image into a block context (display: block, float, position: absolute) then the gap also goes away, as it’s just for inlines.

8

Thanks. That did the Job :slight_smile:
Not sure why, but it does the Job.

9

Hi,
It looks like vertical-align:bottom on the html image will fix things for you.
Set up a class in the css so you can control which image gets the v-a bottom.

[COLOR=Blue]img.vab [/COLOR]{vertical-align:bottom}

Now set that class on the top image in your html

[COLOR=Blue]<img class="vab"[/COLOR] src="images/new_homepage_left_2.gif" usemap="#Map" border="0" height="76" width="678">