Unwanted space btwn divs in Netscape

[Aaron]

Hi,


In the following code, everything looks fine on Explorer, but on Netscape
there is a large white gap between the 'top' section and the 'bottom menu'
section. I've set the style 'div img {display:block} ' already to get rid on
Netscape's problem with putting space around images, but it does nothing for
this. Setting margins and padding to zero do nothing also. Here's the code:


<!-- top -->
<div style="width: 100%; background: url(week01/images/innertop.gif)
repeat-x top;">
<img
src="week01/images/innercorner.gif " alt="" width="23" height="23"
style="padding-left: 125px; background-color: #B5302B; ">
</div>

<!--bottom menu -->
<div style="width: 130px; background: #b5302b
url(week01/images/innerright.gif) repeat-y right; float: left;">
<h3>Item 1</h3>
<h3>Item 2</h3>
<h3>Item 3</h3>
</div>

<!--bottom head -->
<div >
Text goes here
</div>


Thanks,
Aaron

[Andrés Sedano]

Re: Unwanted space btwn divs in Netscape

Aaron wrote:
[color=blue]
> Hi,
>
>
> In the following code, everything looks fine on Explorer, but on Netscape
> there is a large white gap between the 'top' section and the 'bottom menu'
> section. I've set the style 'div img {display:block} ' already to get rid on
> Netscape's problem with putting space around images, but it does nothing for
> this. Setting margins and padding to zero do nothing also. Here's the code:
>
>
> <!-- top -->
> <div style="width: 100%; background: url(week01/images/innertop.gif)
> repeat-x top;">
> <img
> src="week01/images/innercorner.gif " alt="" width="23" height="23"
> style="padding-left: 125px; background-color: #B5302B; ">
> </div>
>
> <!--bottom menu -->
> <div style="width: 130px; background: #b5302b
> url(week01/images/innerright.gif) repeat-y right; float: left;">
> <h3>Item 1</h3>
> <h3>Item 2</h3>
> <h3>Item 3</h3>
> </div>
>
> <!--bottom head -->
> <div >
> Text goes here
> </div>
>
>
> Thanks,
> Aaron
>
>[/color]


The space is made by the image inside the div. Try to put a colored
background to the top div and you'll see that there's no gap between the
two divs... Why do you put a background color to the image? And, by the
sake of god, don't put an empty "alt" attribute ;-)

[Barry Pearson]

Re: Unwanted space btwn divs in Netscape

Andrés Sedano wrote:[color=blue]
> Aaron wrote:[/color]
[snip][color=blue][color=green]
>> <img
>> src="week01/images/innercorner.gif " alt="" width="23" height="23"
>> style="padding-left: 125px; background-color: #B5302B; ">
>> </div>[/color][/color]
[snip][color=blue]
>
> And, by the sake of god, don't put an empty "alt" attribute ;-)[/color]

Why not? If that image is intended for decoration (is it?), rather than adding
value that a blind person or someone using a text-browser may need, an empty
alt is surely best?

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[Andrés Sedano]

Re: Unwanted space btwn divs in Netscape

Barry Pearson wrote:[color=blue]
> Andrés Sedano wrote:
>[color=green]
>>Aaron wrote:[/color]
>
> [snip]
>[color=green][color=darkred]
>>><img
>>>src="week0 1/images/innercorner.gif " alt="" width="23" height="23"
>>>style="paddi ng-left: 125px; background-color: #B5302B; ">
>>></div>[/color][/color]
>
> [snip]
>[color=green]
>>And, by the sake of god, don't put an empty "alt" attribute ;-)[/color]
>
>
> Why not? If that image is intended for decoration (is it?), rather than adding
> value that a blind person or someone using a text-browser may need, an empty
> alt is surely best?
>[/color]

If it's intended for decoration (presentation, definitely), it must not
be in the markup. Put it in a background...

[Christoph Paeper]

Re: Unwanted space btwn divs in Netscape

*Andrés Sedano*:[color=blue]
>
> don't put an empty "alt" attribute ;-)[/color]

For many images around on the Web the empty is the only correct value. And
no, not all of those belong into CSS.

--
The Hitchhiker's Guide to the Galaxy:
"Reality is frequently inaccurate."

[kchayka]

Re: Unwanted space btwn divs in Netscape

Andrés Sedano wrote:
[color=blue]
> Barry Pearson wrote:[color=green]
>>
>> If that image is intended for decoration (is it?), rather than adding
>> value that a blind person or someone using a text-browser may need, an empty
>> alt is surely best?[/color]
>
> If it's intended for decoration (presentation, definitely), it must not
> be in the markup. Put it in a background...[/color]

*Must* not? That's a bit fanatical, don't you think? There are
occassions when this is indeed the right approach, but it is not always
feasible to put purely decorative graphics as background images only.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Barry Pearson]

Re: Unwanted space btwn divs in Netscape

kchayka wrote:[color=blue]
> Andrés Sedano wrote:[color=green]
>> Barry Pearson wrote:[color=darkred]
>>>
>>> If that image is intended for decoration (is it?), rather than adding
>>> value that a blind person or someone using a text-browser may need,
>>> an empty alt is surely best?[/color]
>>
>> If it's intended for decoration (presentation, definitely), it must
>> not be in the markup. Put it in a background...[/color]
>
> *Must* not? That's a bit fanatical, don't you think? There are
> occassions when this is indeed the right approach, but it is not
> always feasible to put purely decorative graphics as background
> images only.[/color]

I won't comment further on decorative images, because nowadays I tend not to
use that sort. (Although I still have some spacers). But there are other cases
where alt="" makes sense.

I have some thumbnail galleries where the thumbnails point to further pages.
The text beside a thumbnail summarising the target page is also a link to it.
So the thumbnail gives a visual clue about the target page, but is "redundant"
in the sense that someone using a speaking browser (on a photographic site?)
has sufficient information with the text summary. After trying a speaking
browser myself, I concluded that getting told twice about each thumbnail+text
pair was just plain irritating, so the thumbnails have alt="". I suppose it
could be argued that the thumbnail was "just decoration". But that would
stretch the term to the point of being useless.

Those "black & white" rules like "If it's intended for decoration it must not
be in the markup", and "don't put an empty "alt" attribute" may be a useful
starting point for beginners, but eventually a bit more thought is needed.
(Which is a good thing for authors who want to justify why hiring an
experienced and knowledgeable author is worthwhile! Authors are more than
people who follow rules blindly).

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[Eric Bohlman]

Re: Unwanted space btwn divs in Netscape

"Barry Pearson" <news@childsupp ortanalysis.co. uk> wrote in
news:UrsXb.213$ Dg7.137@newsfep 3-gui.server.ntli .net:
[color=blue]
> I have some thumbnail galleries where the thumbnails point to further
> pages. The text beside a thumbnail summarising the target page is also
> a link to it. So the thumbnail gives a visual clue about the target
> page, but is "redundant" in the sense that someone using a speaking
> browser (on a photographic site?) has sufficient information with the
> text summary. After trying a speaking browser myself, I concluded that
> getting told twice about each thumbnail+text pair was just plain
> irritating, so the thumbnails have alt="". I suppose it could be
> argued that the thumbnail was "just decoration". But that would
> stretch the term to the point of being useless.[/color]

Correct. Redundant alt text actually makes a page less usable in a text-
only situation. The rule is really "use empty alt text if the image in
question isn't necessary for the usability of the page" and that can be the
case if the regular text *already* contains an alternative to the image.

BTW, don't assume that anyone who needs alt text is automatically blind.
Someone on a slow or expensive connection (which still exist in many parts
of the world) might well use a text-only browser like Lynx to *navigate* a
photography site, using a helper application to download/view only those
pictures that seem promising according to the text descriptions.

And remember that alt text also gets displayed while the browser is waiting
for an image to load, so it's especially important when images are used as
links (without redundant text links) so the user doesn't have to wait for
all images to load if he already knows where he wants to go.

The main thing to remember here is that a user's ability to view an image
is not dependent on his browser's ability to display it inline at any given
moment.

[Alan J. Flavell]

Re: Unwanted space btwn divs in Netscape

On Sat, 14 Feb 2004, Eric Bohlman reveals that:
[color=blue]
> "Barry Pearson" <news@childsupp ortanalysis.co. uk> wrote[/color]
[color=blue][color=green]
> > I have some thumbnail galleries where the thumbnails point to further
> > pages. The text beside a thumbnail summarising the target page is also
> > a link to it. So the thumbnail gives a visual clue about the target
> > page, but is "redundant" in the sense that someone using a speaking
> > browser (on a photographic site?) has sufficient information with the
> > text summary.[/color][/color]

We could go a bit broader than that. The redundant text is equally
irritating in a text-mode browser. And before anyone pokes fun at
that, let it be said that a text-mode browser (such as Lynx) can be
configured to use the best image-viewing applications that money can
buy, free of all the design compromises in a web browser. Maybe not a
common choice - but not without a certain logic to support it. Those
aiming for quick response until they get to the kernel of the nut
might also configure Opera in its text-only mode, and view only the
images that they chose to view. So it isn't only about speaking
browsers.
[color=blue][color=green]
> > After trying a speaking browser myself, I concluded that
> > getting told twice about each thumbnail+text pair was just plain
> > irritating, so the thumbnails have alt="".[/color][/color]

Yes, that seems to me to be an entirely appropriate choice, in the
circumstances.
[color=blue][color=green]
> > I suppose it could be
> > argued that the thumbnail was "just decoration". But that would
> > stretch the term to the point of being useless.[/color]
>
> Correct.[/color]

(with respect, it's not _entirely_ clear which of the above points
you're confirming. I'm assuming the right ones, I hope ;-)
[color=blue]
> Redundant alt text actually makes a page less usable in a text-
> only situation. The rule is really "use empty alt text if the image
> in question isn't necessary for the usability of the page" and that
> can be the case if the regular text *already* contains an
> alternative to the image.[/color]

Indeed. There are a few other constraints though.

For a number of reasons, I'd say that the image and the accompanying
text need to be marked-up inside one and the same <a href...> element.

Note that it's possible to float the image outside the text if wanted;
it's the markup that counts, not the final visual positioning.

If this advice is not followed, and an image with alt="" is found as
the only token in the scope of an <a href="...">, then accessibility
rules would call for a browser to provide some kind of handle so that
the link can be used. And some browsers follow this guideline, as far
as I am aware. Using separate <a href...> elements for the image and
for the text, albeit with the same URL as their target, can cause
confusion as well as provoking WAI problem reports...

The Bobby checker _used_ to complain if it found any kind of image
with alt="" or alt=" " inside the scope of a link, irrespective of
whether there was also some link text or not. Indeed, Bobby rejected
a specific example of good-practice that could be found in the WAI
recommendations ! I reported this some time back as a fault, and,
after someone else also raised it on their online forum, I repeated
the criticism. They then accepted that it was a bug but months went
by without any fix. But recently by chance I noticed that they were
no longer rejecting this usage. So that's good.
[color=blue]
> BTW, don't assume that anyone who needs alt text is automatically blind.[/color]

Indeed. (and I see that you go on to make some very similar points to
the ones I had made above.)

[Andreas Prilop]

Re: Unwanted space btwn divs in Netscape

Eric Bohlman <ebohlman@earth link.net> wrote:
[color=blue]
> BTW, don't assume that anyone who needs alt text is automatically blind.[/color]

Hell, no! I'm not blind, but ALT texts (among other things) allow me
to search for
<http://images.google.c om/images?q=%22Fel is+silvestris%2 2>

[Stephen Poley]

Re: Unwanted space btwn divs in Netscape

On Sat, 14 Feb 2004 12:09:13 +0100, Andrés Sedano <asedano@ya.com >
wrote:
[color=blue]
>If it's intended for decoration (presentation, definitely), it must not
>be in the markup. Put it in a background...[/color]

Where has this idea suddenly come from that decorative images must be
background images? This must be the third time I've seen someone claim
it this year. (It wasn't you the first two times was it?)

Background images must be decorative/presentational, but the converse is
not necessary.

If you want a decorative image to adjust to something else (stretching
or tiling) or have other elements render on top of it, then a background
is appropriate. But if it is to take up its own space in the layout, it
might as well be an IMG element. And if it is to be inline, I suspect
you *can't* display it as a background in a reliable fashion (but I
don't find the possibility interesting enough to spend time
experimenting).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Aaron]

Re: Unwanted space btwn divs in Netscape

Looks like my original message went spiralling out of control over a
discussion of alt tags...well, back to the original question:
[color=blue]
>The space is made by the image inside the div. Try to put a colored
> background to the top div and you'll see that there's no gap between the
> two divs...[/color]

If the space is made by the image in the div, how do I get rid of the space?
I don't want to mask it by filling with color, since there needs to be
continuity between the 'top' section and the 'bottom menu' section (for
decorative reasons).
[color=blue]
>Why do you put a background color to the image?[/color]

The reason why I used a background color for the divs was because the images
are only a fraction of the size of the div, and it was neccessary for the
look.

Aaron







"Andrés Sedano" <asedano@ya.com > wrote in message
news:c0kklp$hjj $1@news.ya.com. ..[color=blue]
> Aaron wrote:
>[color=green]
> > Hi,
> >
> >
> > In the following code, everything looks fine on Explorer, but on[/color][/color]
Netscape[color=blue][color=green]
> > there is a large white gap between the 'top' section and the 'bottom[/color][/color]
menu'[color=blue][color=green]
> > section. I've set the style 'div img {display:block} ' already to get[/color][/color]
rid on[color=blue][color=green]
> > Netscape's problem with putting space around images, but it does nothing[/color][/color]
for[color=blue][color=green]
> > this. Setting margins and padding to zero do nothing also. Here's the[/color][/color]
code:[color=blue][color=green]
> >
> >
> > <!-- top -->
> > <div style="width: 100%; background: url(week01/images/innertop.gif)
> > repeat-x top;">
> > <img
> > src="week01/images/innercorner.gif " alt="" width="23" height="23"
> > style="padding-left: 125px; background-color: #B5302B; ">
> > </div>
> >
> > <!--bottom menu -->
> > <div style="width: 130px; background: #b5302b
> > url(week01/images/innerright.gif) repeat-y right; float: left;">
> > <h3>Item 1</h3>
> > <h3>Item 2</h3>
> > <h3>Item 3</h3>
> > </div>
> >
> > <!--bottom head -->
> > <div >
> > Text goes here
> > </div>
> >
> >
> > Thanks,
> > Aaron
> >
> >[/color]
>
>
> The space is made by the image inside the div. Try to put a colored
> background to the top div and you'll see that there's no gap between the
> two divs... Why do you put a background color to the image? And, by the
> sake of god, don't put an empty "alt" attribute ;-)[/color]

[Brian]

Re: Unwanted space btwn divs in Netscape

Aaron wrote:[color=blue]
> Looks like my original message went spiralling out of control over a
> discussion of alt tags...well, back to the original question:[/color]

I'm afraid I don't recall the original question.
[color=blue][color=green]
>> The space is made by the image inside the div.[/color][/color]

Images are inline by default. It may be the baseline/line height.

http://devedge.netscape.com/viewsource/2002/img-table/

[snipped lots of message text that was below your sig; please trim
quotes in your replies]

--
Brian (follow directions in my address to email me)

http://www.tsmchughs.com/

[Aaron]

Re: Unwanted space btwn divs in Netscape

I figured it out...once I changed the headings in the menu to {display:
inline}, all was well in the universe. I guess block elements in a div don't
just act like block elements w/ respect to each other in the div, but even
w/ respect to other divs (??!). Go figure....it's Netscape.

Aaron

P.S. The original code I'm talking about is:

<!-- top -->
<div style="width: 100%; background: url(week01/images/innertop.gif)
repeat-x top;">
<img
src="week01/images/innercorner.gif " alt="" width="23" height="23"
style="padding-left: 125px; background-color: #B5302B; ">
</div>

<!--bottom menu -->
<div style="width: 130px; background: #b5302b
url(week01/images/innerright.gif) repeat-y right; float: left;">
<h3>Item 1</h3>
<h3>Item 2</h3>
<h3>Item 3</h3>
</div>

<!--bottom head -->
<div >
Text goes here
</div>