473,320 Members | 1,722 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Unwanted space btwn divs in Netscape

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
Jul 20 '05 #1
13 2477
Aaron wrote:
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

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 ;-)
Jul 20 '05 #2
Andrés Sedano wrote:
Aaron wrote: [snip]
<img
src="week01/images/innercorner.gif" alt="" width="23" height="23"
style="padding-left: 125px; background-color: #B5302B; ">
</div>

[snip]
And, by the sake of god, don't put an empty "alt" attribute ;-)


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/
Jul 20 '05 #3
Barry Pearson wrote:
Andrés Sedano wrote:
Aaron wrote:


[snip]
<img
src="week01/images/innercorner.gif" alt="" width="23" height="23"
style="padding-left: 125px; background-color: #B5302B; ">
</div>


[snip]
And, by the sake of god, don't put an empty "alt" attribute ;-)

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?


If it's intended for decoration (presentation, definitely), it must not
be in the markup. Put it in a background...
Jul 20 '05 #4
*Andrés Sedano*:

don't put an empty "alt" attribute ;-)


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."
Jul 20 '05 #5
Andrés Sedano wrote:
Barry Pearson wrote:

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?


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


*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.
Jul 20 '05 #6
kchayka wrote:
Andrés Sedano wrote:
Barry Pearson wrote:

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?


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


*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.


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/
Jul 20 '05 #7
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote in
news:Ur***************@newsfep3-gui.server.ntli.net:
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.


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.
Jul 20 '05 #8
On Sat, 14 Feb 2004, Eric Bohlman reveals that:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote
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.
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.
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="".
Yes, that seems to me to be an entirely appropriate choice, in the
circumstances.
I suppose it could be
argued that the thumbnail was "just decoration". But that would
stretch the term to the point of being useless.


Correct.


(with respect, it's not _entirely_ clear which of the above points
you're confirming. I'm assuming the right ones, I hope ;-)
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.
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.
BTW, don't assume that anyone who needs alt text is automatically blind.


Indeed. (and I see that you go on to make some very similar points to
the ones I had made above.)
Jul 20 '05 #9
Eric Bohlman <eb******@earthlink.net> wrote:
BTW, don't assume that anyone who needs alt text is automatically blind.


Hell, no! I'm not blind, but ALT texts (among other things) allow me
to search for
<http://images.google.com/images?q=%22Felis+silvestris%22>
Jul 20 '05 #10
On Sat, 14 Feb 2004 12:09:13 +0100, Andrés Sedano <as*****@ya.com>
wrote:
If it's intended for decoration (presentation, definitely), it must not
be in the markup. Put it in a background...


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/
Jul 20 '05 #11
Looks like my original message went spiralling out of control over a
discussion of alt tags...well, back to the original question:
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...
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).
Why do you put a background color to the image?
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" <as*****@ya.com> wrote in message
news:c0**********@news.ya.com... Aaron wrote:
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

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 ;-)

Jul 20 '05 #12
Aaron wrote:
Looks like my original message went spiralling out of control over a
discussion of alt tags...well, back to the original question:


I'm afraid I don't recall the original question.
The space is made by the image inside the div.


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/

Jul 20 '05 #13
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>

Jul 20 '05 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Adam Siler | last post by:
i want to display a series of inline, fixed-width DIVs that will wrap into columns - a table, basically. i can do it under Internet Explorer, but the same code under Netscape or Opera does not...
3
by: Peter Jenkins | last post by:
I have some divs I am using to get a two column layout for a section of a page, like so; <div1> <div2> <div3> blah blah blah blah blah blah blah blah...
23
by: MattB | last post by:
Hello please help, I have a table cell with a div in it. The div has a width of 300px. but when it is rendered it puts extra space into the table cell. Here's the style <style>...
3
by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that...
6
by: Tony T | last post by:
Can anyone help me with this - it may be obvious, but I just can't see it. I'm working with PC and WinME. In IE6, the two divs inside the wrapping div have no space between them, which is how I...
1
by: tabert | last post by:
I want to use JavaScript when a button is clicked to show and hide a SPAN or DIV. This works in both IE and Netscape, but what I'd like to happen is for there to be no white space where the hidden...
16
by: lovecreatesbeauty | last post by:
/* When should we worry about the unwanted chars in input stream? Can we predicate this kind of behavior and prevent it before debugging and testing? What's the guideline for dealing with it? ...
11
by: dusk | last post by:
Hi, I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy. I have several different pages to write, each with about...
2
by: dusk | last post by:
Hi, I have a page with lots of hidden divs which are revealed based on choices made at each 'layer'. So I've used naming convention which represents the order in which each div becomes...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shćllîpôpď 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.