Tiling of background image.

S

Shelly

Here is the URL:
www.sheldonlg.com/css.htm

The problem is this. Without the <div "index-01" ></div>, the green
background image from the #navWrapper does not tile. It shouldn't. Once I
put in that div, it tiles in the background. The index-01 is:

#index-01 {
position:relative;
width:900px;
height:132px;
background-image: url(http://www.thenursebook.com/images/index_01.gif);
}

If I remove the height: 132px; then it doesn't tile, but the image doesn't
appear either.
 
S

Shelly

Shelly said:
Here is the URL:
www.sheldonlg.com/css.htm

The problem is this. Without the <div "index-01" ></div>, the green
background image from the #navWrapper does not tile. It shouldn't. Once I
put in that div, it tiles in the background. The index-01 is:

#index-01 {
position:relative;
width:900px;
height:132px;
background-image:
url(http://www.thenursebook.com/images/index_01.gif); }

If I remove the height: 132px; then it doesn't tile, but the image
doesn't appear either.

When I put in the missing </div> in my example, it still tiles in IE, but
not in FF. OK, so this is an IE problem. How do I fix this?
 
S

Shelly

Shelly said:
When I put in the missing </div> in my example, it still tiles in IE,
but not in FF. OK, so this is an IE problem. How do I fix this?

Well, I fixed it. I commented out the "padding: 0.5em 0em;" line in the
#navMain ul style. I remembered that IE seems to have trouble with padding.
 
B

Bergamot

Shelly said:
www.sheldonlg.com/css.htm

The problem is this. Without the <div "index-01" ></div>, the green
background image from the #navWrapper does not tile. It shouldn't.

It shouldn't *not* tile? I think you misstated what you perceive to be
the problem.

Regardless, your HTML is invalid, so you can't expect any browser to
give you what you want.
http://validator.w3.org/check?verbose=1&uri=http://www.sheldonlg.com/css.htm

Fix your errors and try again.
- Your stylesheet needs to be inside the <head>
- <style> is missing the required type attribute
- You haven't closed all your divs

BTW, you should be using a strict doctype, not transitional.
#index-01 {
height:132px;
background-image: url(http://www.thenursebook.com/images/index_01.gif);
}

If I remove the height: 132px; then it doesn't tile, but the image doesn't
appear either.

Your html:
<div id="index-01"></div>

It's an empty element, which means it has no height, so there is no
space for a background. As it should be.

You seem to be hacking away at CSS without any comprehension of how it
is *supposed* to work. Get a book, or read the specs at w3c.org.
 
S

Shelly

Bergamot said:
It shouldn't *not* tile? I think you misstated what you perceive to be
the problem.

It shouldn't tile.
Regardless, your HTML is invalid, so you can't expect any browser to
give you what you want.
http://validator.w3.org/check?verbose=1&uri=http://www.sheldonlg.com/css.htm

Fix your errors and try again.
- Your stylesheet needs to be inside the <head>

I made a mistake in placing it here in the file I prepared for this group.
In the actual said:
- <style> is missing the required type attribute
OK

- You haven't closed all your divs

I caught that one about an hour ago.
BTW, you should be using a strict doctype, not transitional.


Your html:
<div id="index-01"></div>

The #index-01 has a background-image. It does display.
It's an empty element, which means it has no height, so there is no
space for a background. As it should be.

Please expand.
You seem to be hacking away at CSS without any comprehension of how it
is *supposed* to work. Get a book, or read the specs at w3c.org.

I didn't write this CSS and I am a php, not a CSS or html, person. I really
am just hacking away because I was asked to "fix" this and I am doing the
best I can without taking the extensive time to develop a whole new area of
expertise.
 
B

Bergamot

Shelly said:
It shouldn't tile.

But it does. You mistakenly believe that the user's font size will be
within whatever confines you set. Don't count on it. The green gradient
tiles both on the x and y axis. It's not attractive.
Please expand.

The background only displays when you set the height property on
#index-01, which is what you were complaining about. Without an explicit
height, the div expands to whatever its content height is. In this case,
it's 0. What do you think you'll see in a zero-height element?
I didn't write this CSS and I am a php, not a CSS or html, person. I really
am just hacking away because I was asked to "fix" this

Hacking away without comprehension will only get you deeper into a hole
you'll have trouble getting out of, not to mention the frustration
you'll experience when things don't work. This little snippet you posted
is likely only the tip of the iceberg. I imagine there are more design
flaws than you know about.

Why don't you post a whole page?
 
J

Jonathan N. Little

Shelly said:
Bergamot wrote:


The #index-01 has a background-image. It does display.


Please expand.

I don't know, its pretty self explanatory, but lets try an analogy.

What is size of the smallest box needed to hold *zero* wombats? Now you
measure the sides of that box and find height, width, and depth is
0"x0"x0". Now what color is it?

Same goes for the DIV. If it contains nothing then it will have *no
size* and therefore no background. You can explicitly give an empty DIV
dimensions as also you could grab a larger box to hold zero wombats, but
note that some browsers may not display a DIV unless it has something in
it, especially depending on your doctype.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top