Why does this content drop?

Question

OK. I give up. At least for tonight...
This page looks as I want in IE but the main content drops
down below
the menu and just about fills the width of the container div
in FF. I
know it has to do with the margins being set on the menu and
possibly
the content, but don't see how else to do this. I am sure
there is a
better way, well actually a way that works, but I seem to
stuck in
whatever way I am thinking at the moment.
Here is the page:
http://www.eclipsme.com/chooserockledge/test2.html
Thanks for any help,
Harvey

Answer 1

"eclipsme" <[email protected]> wrote in message
news:[email protected]...
>>
>> The image above is a real image element and is 544px
tall, it should be
>> sliced at 174px. Not only to reduce its weight, but
also to use the
>> tecnique I mentionned before regarding using the
sidebar to display the
>> bottom part of the image. That will give you a more
flexible design.
>> On the other hand, if you switch to PNG to get rid
of the white line, you
>> may increase file size actually :-(
>
> see below.
>
>> As a side note, you can't have that image taking
most part of the layout,
>> it doesn't work that way. It will be "in your way"
as soon as you start
>> building content in your site.
>
> You mean the height of the header? I agree, but this is
what the client
> wants. Personally, I think we have been through some
much better designs,
> but this is what they want...
No I meant the height of the image used for the header,
that's why I said to
slice it. Part of the image goes in th header DIV the other
part is used
with the nav. The rest is whole whitespace you don't need...
>>> The background image consisting only of the
image bellow the wave -
>>>
http://www.eclipsme.com/chooserockledge/images/backgrounds/homeTransparent.jpg
>>> 22K
>>>
>>> I could probably tweak this to get a bit better
perhaps by cropping the
>>> images tighter and using positioning, but if I
am understanding what you
>>> propose correctly, I am taking a hit of 12k
(22+16-26) on initial load,
>>> and a savings of 4k (56-22) after that.
>>>
>>> Doesn't seem worth while in this case, at least.
Would you agree? I
>>> think the problem is that the large solid areas
compress very well so
>>> represent a tiny fraction of the complete image.
>>
>> I agree, 4k doesn't sound like much, but try to
reduce the height of the
>> banner image to see how much you can save there and
check what you lose
>> using a PNG image.
>> Don't forget that there is another issue we're
trying to tackle here, it
>> is the fact that you rely solely on *graphic text*
and on top of that
>> used as a background image, which means there is not
even an alt text to
>> convey the information contained in that banner.
Disabling images in
>> Firefox will show you what search engines and
screen-reader users "see"
>> on your site.
>
> I have not forgotten.
>
>>
>>> Or... am I missing something?
>>>
>>> Oh, and there is also the problem of the white
dotted line along the
>>> border of the transparent area. What's with
that?
>>
>> That's the difference between using a GIF and a PNG
image
>>
> Getting better. I sliced it a bit differently rather
than use transparent
> anythings. I don't quite have the menu yet, but enough
to see that this
> seems to be how to do it.
>
> Total header image size is now 22k, of which 14k is the
replacing picture,
> but the other replacements are smaller, so more savings.
I don't know that
> it was really worth the effort just to save 10 or 15k of
overhead, but I
> do like the layout better now. There are no negative
margins and it seems
> to flow better - or at least will after I clean up the
css.
You don't think 10 - 15k doesn't worth the effort? But it is
huge! What's
the total weight of your page (including markup and all
assets)?
> However, I have 1 problem that I don't understand. In IE
there is a
> separation between the images, under the first image,
but not in FF. It
> looks like a white line across the width of the page. Is
this because of
> the box model? I have tried setting margins=0, but no
luck.
>
> Help????
Use this:
#header img {display:block}
As a side note, you're not using the Image Replacement
technique I mentioned
before, which is no big deal as you're using IMG elements now
(vs.
background images), but make sure to use ALT attributes.
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- divaGPS - Add "you are here" highlighting to virtually any
menu
- divaFAQ - Create FAQ pages that toggle (show/hide) the
answers
- divaPOP - Easy, clean, standards-compliant popup windows.