Rounded corner image borders showin gaps

HTML & CSS
1

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

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 :slight_smile:


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)

3

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.

4

As of my last project, I’ve started using CSS border-radius for many of my rounded corners:


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

5

Tables are also harder to control because they have a lot more default behavior going on then normal <div>'s :slight_smile:

Glad we helped :goof:.

6

I wasn’t sure if that was the latest one and it took a little bit of finding :slight_smile:

7

That reminds me I’ve really got to get the updated version of that up soon.

8

As already mentioned above your   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.


.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 [URL=“http://www.devwebpro.com/25-rounded-corners-techniques-with-css/”]round corner examples around.

Edit:

I started this post nearly an hour ago but got interrupted :slight_smile:

9

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

10

Two words. Simple degradation :slight_smile:

11

Another two words: Picky clients :slight_smile:

12

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:

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.

13

Although there are simple JS workarounds for those browsers.

14

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.