SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rounded corner image borders showin gaps

    Hi Guys,
    I'm trying to use images to create a border around my main content.
    Page is at http://www.kitchenplans.biz/phoenix/border.htm
    The trouble is the gaps showing between rows.
    I've tried adding this class to the table to no avail
    .no-gaps { border-collapse: collapse;}
    I thought it would be oh so simple.
    Any advice gratefully recieved.
    Cheers,
    Gene Stevo

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your tr computed box height size for the td having url("borders/orange-tl.gif") is 20px but your corner image orange-tl.gif is only 18x18px.

    you either change the height for the trs having corner images (fixed line-height of 18px) or provide a larger corner image.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, browsers are increasing the height of the <td>'s to make room for the default font size. Lower the font size to at most 15px and it will get rid of the gap
    Code:
    td{font-size:15px;}
    Or you could just specify the line height to be 18px (setting a height won't fix it because of the expanding problem)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Also, do you really need a table for this? I suspect from the layout you are using that this is not for tabular data. If so, a table is not the best choice. This is easier with divs.

  5. #5
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for replying so quick.
    I had tried fixing font ht's but I'd only applied to top & bottom middle <td>
    Never thought of applying as a stand alone to the tr's.
    Suppose div's would be easier but I forgotton just about everything I ever new so I'm basically starting from scratch. At least with tables I can (usually see what's going on).
    Thanks anyway chaps (did I mention I'd been on this issue for hours, time for a beer).

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gene-stevo View Post
    Thanks all for replying so quick.
    I had tried fixing font ht's but I'd only applied to top & bottom middle <td>
    Never thought of applying as a stand alone to the tr's.
    Suppose div's would be easier but I forgotton just about everything I ever new so I'm basically starting from scratch. At least with tables I can (usually see what's going on).
    Thanks anyway chaps (did I mention I'd been on this issue for hours, time for a beer).
    Tables are also harder to control because they have a lot more default behavior going on then normal <div>'s

    Glad we helped .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As already mentioned above your &nbsp; is taller than the image you are using. I would set a height and set the font-size to zero for those top and bottom elements.

    Code:
    .bdr-tl,.bdr-top,.bdr-tr,
    .bdr-bl,.bdr-bot,.bdr-br  {
        height:18px;
        font-size:0;
    }
    I have to say this but you really shouldn't be using a table for this as that isn;t the correct semantic use for a table (unless you are displaying tabular data). The CSS won't be much more concise but will be semantically correct. There are many CSS round corner examples around.

    Edit:


    I started this post nearly an hour ago but got interrupted

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There are many CSS\
    That reminds me I've really got to get the updated version of that up soon.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    That reminds me I've really got to get the updated version of that up soon.
    I wasn't sure if that was the latest one and it took a little bit of finding

  10. #10
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As of my last project, I've started using CSS border-radius for many of my rounded corners:

    Code:
    -moz-border-radius: 15px;
    border-radius: 15px;
    Yes, it does not work for all browsers. IE6, 7, and 8 will display square corners. Someday we will all look back and laugh at the rounded corner images we used to make.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by skunkbad View Post
    Yes, it does not work for all browsers. IE6, 7, and 8 will display square corners.
    Although there are simple JS workarounds for those browsers.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Although there are simple JS workarounds for those browsers.
    Two words. Simple degradation
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Two words. Simple degradation
    Another two words: Picky clients

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skunkbad View Post
    Someday we will all look back and laugh at the rounded corner images we used to make.
    Or since all border-radius does is round the corner (*YAWN*) we'll STILL be using images by way of CSS3's "border-images"

    There was just a sitepoint article about that:
    http://articles.sitepoint.com/articl...-border-images

    Images for corners are much more powerful than the pathetic rounding code given it can do MORE than just rounded edges.

    Not that I plan to use CSS3 in production code for almost a decade given I dislike throwing giant scripts for support at simple layout elements, and since it's still in DRAFT none of us have any business deploying it in the wild. MAYBE once webkit and gecko pull their heads out of their backsides and actually deploy the REAL CSS3 properties instead of the "this is just for testing" browser specific prefixes, I'll consider deploying it -- and no sooner!

    Which with how long it took for gecko to turn -moz-inline-block and -moz-inline-box into a proper inline-block... I'm not expecting to see that any time soon!

    Also why I laugh at a lot of alleged "CSS3 demos" that don't work in opera because the person who wrote it didn't actually include the REAL CSS3 properties and instead just have the -webkit version or just the -moz version.

    ... besides at WORST the code to use images for borders shouldn't even total half a k (with only like 128 bytes of markup). BIG DEAL.


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
  •