Tiling of background image.

Discussion in 'HTML' started by Shelly, Dec 4, 2007.

  1. Shelly

    Shelly Guest

    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.
     
    Shelly, Dec 4, 2007
    #1
    1. Advertising

  2. Shelly

    Shelly Guest

    Shelly wrote:
    > 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?
     
    Shelly, Dec 4, 2007
    #2
    1. Advertising

  3. Shelly

    Shelly Guest

    Shelly wrote:
    > Shelly wrote:
    >> 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?


    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.
     
    Shelly, Dec 4, 2007
    #3
  4. Shelly

    Bergamot Guest

    Shelly wrote:
    >
    > 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.

    --
    Berg
     
    Bergamot, Dec 4, 2007
    #4
  5. Shelly

    Shelly Guest

    Bergamot wrote:
    > Shelly wrote:
    >>
    >> 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.


    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, it is in the <head>

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


    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.
     
    Shelly, Dec 4, 2007
    #5
  6. Shelly

    Bergamot Guest

    Shelly wrote:
    > Bergamot wrote:
    >> Shelly wrote:
    >>>
    >>> 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 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.

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

    >
    > 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?

    >> You seem to be hacking away at CSS without any comprehension of how it
    >> is *supposed* to work.

    >
    > 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?

    --
    Berg
     
    Bergamot, Dec 4, 2007
    #6
  7. Shelly wrote:
    > Bergamot wrote:



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


    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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 4, 2007
    #7
  8. Shelly

    dorayme Guest

    In article <>,
    "Shelly" <> wrote:

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


    Allow me... here is a work in progress (I don't think I can get
    back to it before Xmas) but it does make a big thing about no
    heights and widths which may inform you:

    http://netweaver.com.au/floatHouse/page1.html

    --
    dorayme
     
    dorayme, Dec 4, 2007
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U3JpZGhhcg==?=

    stretching the background image instead of tiling

    =?Utf-8?B?U3JpZGhhcg==?=, Nov 23, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    8,245
    Mats Lycken
    Nov 30, 2005
  2. Anders Thorsen Holm

    Re: Repeating a tiling image in a table cell

    Anders Thorsen Holm, Jul 15, 2003, in forum: HTML
    Replies:
    0
    Views:
    2,954
    Anders Thorsen Holm
    Jul 15, 2003
  3. Nik Coughlin
    Replies:
    9
    Views:
    406
    Jeremy
    Nov 28, 2007
  4. Dave Kelly

    tiling background images

    Dave Kelly, Mar 23, 2008, in forum: HTML
    Replies:
    1
    Views:
    387
    Jonathan N. Little
    Mar 23, 2008
  5. Roedy Green

    tiling

    Roedy Green, Mar 18, 2009, in forum: Java
    Replies:
    13
    Views:
    833
    Philipp
    Mar 23, 2009
Loading...

Share This Page