Posted by Ben C on 10/18/06 20:33

On 2006-10-18, John Dalberg <nospam@nospam.sss> wrote:
> Ben C <spamspam@spam.eggs> wrote:
>> On 2006-10-18, John Dalberg <nospam@nospam.sss> wrote:
>> > I am creating a header which consists of two adjacent images and
>> > filling the rest of the header width with a solid color so that
>> > different resolutions have the same header. The effect works fine in IE
>> > (my users use IE only) but there's a gap between the header and the
>> > rest of the page which I can't get rid off. (The effect is also broken
>> > in Firefox but that's not important)
>> >
>> > How can I remove the gap (and make it work in FF also if possible )?
>>
>> [source snipped]
>>
> Thanks for your reply.
>
>> If what you have here works in IE, you're relying on IE bugs. This is
>> not a good starting point especially when you then need to ask how do I
>> get rid of this or that gap.

> It's not an absolute rule that if something works in IE but not in FF that
> this IE is buggy.

No, but in this case, FF did not appear to be doing anything wrong with
the content. It therefore follows that if IE was doing something
different there is a fairly good chance that this was due to IE bugs.

> FF is not a perfect browser either. Do you what the buy is exactly in
> my code.

As far as I could see there were no bugs in your code, and FF was
rendering it correctly. But the result wasn't what you wanted.

[snip]

> What I want is this.
>
> image | image | rest of width filled with background color.

OK, I thought you wanted each image at either side. I now see that you
did actually say "adjacent", so I'm sorry about that.

In my previous example, if you make #C float: left as well, and add
width: 100% to #A, is that the effect you want?

> I had this problem when I was working on my style. I don't know why
> there's a gap if the second image has float: left which means it
> should be tangent to the first image to its right.

Yes it should be, and it is working for me. I don't have your images, so
maybe the gap is actually in one of the images?

How big is the gap?

In your original post I thought you were talking about a gap below the
header. But perhaps you only get that in IE, not Firefox.

> Your clear: both means it will put that div below the images which is not
> the desired effect.

I don't understand, I thought this was a header?

image | image | background color to edge
Content down here?

That's why I had clear.

> Plus I am sure an empty div does anything.

It should clear things if it has clear set on it.

> However the content has a clear: both (not shown in my code) so that
> the content renders below the header.

Then as you say you don't need the empty div.

> My problem was that there's gap between the header and the content
> which I don't know why it's happening in IE.

So this is IE only. I don't have access to IE so I can't really help
you.

But one thing did occur to me. If for some reason IE is still treating
the images as if they were normal inline replaced elements, you would
expect a gap below them equal to the current font's descender because
they would be baseline aligned by default.

So you could try adding

img { vertical-align: bottom; }

to the styles and see if that helps.

[Back to original message]