SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trouble with Doug's easy corners?

    Hi,
    I wanted to figure out how to do rounded corners a la Doug's easy corners. (http://www.redmelon.net/tstme/4corners/) By following the example, but making my own images, also 7x7, all went well. However, I did a 2nd example, changing only the size of the images (6X6). Here is my code:

    <style type="text/css">
    <!--
    /* START - first example */

    /* set millions of background images */
    .rbroundbox { background: url(creambox6.gif) repeat; }
    .rbtop div { background: url(topleft6.gif) no-repeat top left; }
    .rbtop { background: url(topright6.gif) no-repeat top right; }
    .rbbot div { background: url(creambox6.gif) no-repeat bottom left; }
    .rbbot { background: url(creambox6.gif) no-repeat bottom right; }

    /* height and width stuff, width not really nessisary. */
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 6px;
    font-size: 1px;
    }
    .rbcontent { margin: 0 6px; }
    .rbroundbox { width: 50%; margin: 1em auto; }


    /* END - first example */
    -->
    </style>
    I only changed where it said 7 in the code (2 places) to 6. Yet it no longer works: http://layla.sian.net/rounded_corners/
    Can someone tell me what I'm missing?

    PS Here you can see where I have it working:
    http://layla.sian.net/rounded_corners/index7.html
    The guy is so tough I think his beard could beat up
    Nowitzki. -Gene Wojciechowski on Baron Davis |
    last.fm: lssian

  2. #2
    SitePoint Wizard jax502's Avatar
    Join Date
    Jul 2003
    Location
    Jacksonville, FL
    Posts
    1,031
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm getting a file not found on:
    http://layla.sian.net/rounded_corners/index7.htm
    jax502

  3. #3
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You left off the l at the end

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's working you've just assigned two little square blocks as the bottom left and right corners.
    Code:
    .rbbot div  { background: url(creambox.gif) no-repeat bottom left; }
    .rbbot	  { background: url(creambox.gif) no-repeat bottom right; }
    You need to change the creambox gifs for two nice rounded corners

    Paul

  5. #5
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Actually I did that on purpose--I only want the top 2 rounded. If you look at the one that works, (http://layla.sian.net/rounded_corners/index7.html) you'll see that I left the square images on the bottom corners. What I don't understand is why, when I try to use 6x6 images in place of 7, it breaks (http://layla.sian.net/rounded_corners). I thought I could just replace "7" in the code with the appropriate size of my images "6" but it doesn't work.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well it would be better if you linked to the one that doesn't work so we can see what's happening

    I've just saved your 7px image and changed it to 6px and changed the 6px in the code and it worked straight away.

    Paul

  7. #7
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,
    Well it would be better if you linked to the one that doesn't work so we can see what's happening
    I linked to it in my first post

    But I forgive you, you always have the answer! Mind posting what you did, just so I can see? Was it really different from the one I couldn't get to work? Maybe I missed a typo!

  8. #8
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...well, I resized my 7x7 images and tried another page, http://layla.sian.net/rounded_corners/7to6.html, and it works.

    I still can't see why that other page wouldn't (grrr) --If I took out the repeating block, I could see the round corners to the left & right, but as soon as I replaced the line for the repeating background squares, the rounded corners would be covered up. Mystery!

  9. #9
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I answered my own question, and unsurprisingly it was a pretty thoughtless mistake: I saved the 6X6 images with transparent backgrounds. Yup, I feel very small right now! (slinking out of room...)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I' just worked that out when you posted

    I must admit it had me confused for a minute lol

    Paul

  11. #11
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Sorry to have used up your time on my dumb error...just trying to keep everyone on their toes! (mumble, transparent gif! mumble)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •