background image wrapped weirdly

Any kind soul feel like ending my efforts to figure out
why two images are removing the top few rows of pixels
but repeating them at the bottom?

http://www.northwestallentrails.org/

Looks the same in all Mac browsers, including IE 5.3

Can't remember for sure but I think it is also happening
on IE 6/Windows and other Windows browsers.

I can't try it on a Unix variant because I can't get my
hardware to support X11.

I will study my CSS to see whether I goofed, but I THINK
I specified the height to be the same as the images--and
actually put the logo in with an IMG tag to further encourage
the browser to make space.

If you're _really_ generous and ambitious, why are my
"centered" navigation links slightly off-center?

Thanks!

--
Wes Groleau
-----------

"Thinking I'm dumb gives people something to
feel smug about. Why should I disillusion them?"
-- Charles Wallace
(in _A_Wrinkle_In_Time_)

Wes Groleau wrote:

Any kind soul feel like ending my efforts to figure out
why two images are removing the top few rows of pixels
but repeating them at the bottom?

Set the background image to no-repeat. The table-cell height is larger

than the image so the image is repeated. Since the difference in heights
is 3 - 5 pixels, only that much of the repeated image shows.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

Wes Groleau wrote:
Any kind soul feel like ending my efforts to figure out
why two images are removing the top few rows of pixels
but repeating them at the bottom?

Set the background image to no-repeat. The table-cell height is larger
than the image so the image is repeated. Since the difference in heights
is 3 - 5 pixels, only that much of the repeated image shows.

Can't hurt to try it, but:

- the HTML does not specify height.

- when I removed the CSS height (which was two pixels
SMALLER than the image height) and clicked refresh,
nothing changed.

- The part that is repeated at the bottom is not really
repeated; it has been cropped from the top of the images.

Anyway, I tried it, and not surprisingly, the "bad" part
changed to the background color. Since that was chosen
as an approximation of the overall image colors, it wasn't
too obvious, but it could be seen. The fix for that was to
make the backgrounds of both cells match the color of the
between-cell border. That conveniently fixed another problem:
before, another mystery was that the border above the footer
was thicker than the border below the header.

I still don't understand why two pixels at the top are
cut off, but at least it looks OK without the (web-traditional)
ridiculous amount of cruft in either HTML or CSS.

--
Wes Groleau

Wes Groleau wrote:

Any kind soul feel like ending my efforts to figure out
why two images are removing the top few rows of pixels
but repeating them at the bottom?

Set the background image to no-repeat. The table-cell height is larger
than the image so the image is repeated. Since the difference in heights
is 3 - 5 pixels, only that much of the repeated image shows.

The base problem is using tables for layout. But aside from that...

<img> is an inline element. Browsers are inconsistent how they treat
<img> with respect to spacing. FF treats it as it does text by allowing
space for a descender. Also there is a whitespace issue caused by the
newline following <img>:

<td id="logo">
<img src=...>
</td>
Change it to:
<td id="logo"><img src=...></td>
so there is no newline (aka: linebreak) after <img>. If you just gotta
wrap the line, do it in the middle of <img>.
Setting ".logo { vertical-align:top} removes the descender space.

I still don't understand why two pixels at the top are
cut off, but at least it looks OK without the (web-traditional)
ridiculous amount of cruft in either HTML or CSS.

Because that is all of the image that could be shown in a 2 pixel high

space.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

The base problem is using tables for layout. But aside from that...

Ah, yes. Well, what was given me was a rat's nest
of nested single-cell tables that was unmaintainable.
I had to turn it into something I could maintain
while still approximating the original appearance.
Floating divs worked great for the columns--as long
as I could trust my audience to only use ONE O.S. and
ONE browser.

I didn't want to turn my CSS file into spaghetti code
trying to take advantage of browser bugs to emulate
IF statements.

img> is an inline element. Browsers are inconsistent how they treat
img> with respect to spacing. FF treats it as it does text by allowing
space for a descender. Also there is a whitespace issue caused by the
newline following <img>:

Ah, that may have something to do with it!

Setting ".logo { vertical-align:top} removes the descender space.

I don't quite understand how it does that, but I had
intended that parameter to be there for other reasons,
just forgot to put it in.

I still don't understand why two pixels at the top are
cut off, but at least it looks OK without the (web-traditional)
ridiculous amount of cruft in either HTML or CSS.

Because that is all of the image that could be shown in a 2 pixel high
space.

Again I am not understanding you. How does that relate to
the TOP of the image being cut off, in an element specified
to be the same height as the image?

--
Wes Groleau

Ostracism: A practice of sticking your head in the sand.

Wes Groleau wrote:

I still don't understand why two pixels at the top are
cut off, but at least it looks OK without the (web-traditional)
ridiculous amount of cruft in either HTML or CSS.

Because that is all of the image that could be shown in a 2 pixel high
space.

Again I am not understanding you. How does that relate to
the TOP of the image being cut off, in an element specified
to be the same height as the image?

I guess we are not talking about the same thing. I though you were

asking why only the top 2 pixels were shown when the background image was
repeated.
Now, if I am correct, you are asking why the top 2 pixels of the first
repetition are being clipped. They are not. At least not with FF v1.5.0.5.
When I view the image separately and compare it to what is shown on the
page there is no difference.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Wes Groleau wrote:

If you're _really_ generous and ambitious, why are my
"centered" navigation links slightly off-center?

The 'News & Notes' line is centered perfectly.
All the others are centered off to the right somewhat.

There are two white spaces (&nbsp;&nbsp for all except for the 'News &
Notes' line. DOM Inspector also shows same.

If you delete all before the <a up to the beginning of the line then you
should be ok.

Don't know what kind of editor you are using and how the fixed widths
got in there. Windows Notepad does not show them.

--
Gus

Gus Richter wrote:

Wes Groleau wrote:
If you're _really_ generous and ambitious, why are my
"centered" navigation links slightly off-center?

The 'News & Notes' line is centered perfectly.

The one I added yesterday!

All the others are centered off to the right somewhat.

There are two white spaces (&nbsp;&nbsp for all except for the 'News &
Notes' line. DOM Inspector also shows same.

Sigh. Probably some poorly-thought-out global replace.

If you delete all before the <a up to the beginning of the line then you
should be ok.

Don't know what kind of editor you are using and how the fixed widths
got in there. Windows Notepad does not show them.

The Unicode/UTF-8 capable Mac OS X TextEdit. I do put actual NBSP
characters (not entities) intentionally in other places. Of course
I can't see the difference until they get into a browser. I don't
know how these got there--I could have spotted them with 'vi' but
it might never have occurred to me to look. Thanks for the heads-up.

--
Wes Groleau

Words of the Wild Wes(t) = http://ideas.lang-learn.us/WWW