473,320 Members | 1,896 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.

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_)
Aug 19 '06 #1
7 1382
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)
Aug 19 '06 #2
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
Aug 20 '06 #3
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...
<imgis an inline element. Browsers are inconsistent how they treat
<imgwith 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)
Aug 21 '06 #4
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.
<imgis an inline element. Browsers are inconsistent how they treat
<imgwith 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.
Aug 23 '06 #5
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)
Aug 23 '06 #6
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
Aug 23 '06 #7
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
Aug 24 '06 #8

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

Similar topics

4
by: erik | last post by:
Is it posssible to inherit the previous pages (parent pages) background image? Is there a script out there I could look at? Thanks
2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
13
by: Giggle Girl | last post by:
Hi there, I need to use a background image in a TR that does NOT restart everytime it hits a TD. Can it be done? Specifically, if you set a background image for an entier table, now mater how...
3
by: Viken Karaguesian | last post by:
Hello all, I need somehelp with background tiling. I have a sneaking suspicion that what I want to do is not possible, but I'll ask anyway. :>) First some background: Here's the site in...
2
by: Trond Michelsen | last post by:
Hi. I have a transparent PNG-image that I would like to display on top of the rest of the web page. I've already got this part working. But, I'd like the background (as in "the part of the image...
6
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to...
16
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of...
1
by: sklett | last post by:
I need to bang out a quick application to extract CCITT compressed TIF images from a ton of PDFs. I've used PDFSharp in the past to work with PDFs but ti doesn't have support for the PDF...
2
by: thephatp | last post by:
I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm...
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...
0
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...
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: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
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...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
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: 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...

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.