CSS Borders around a table

[pjutter]

Here's a problem I've come up with a number of times: I want to use CSS to create a border around a table. Here's the specific code I'm using around a table: <div style="padding: 7px; border-color: #3B2A7D; border-width: thin; border-style: solid"> This code works great in Netscape. It fits the border around the table with equal padding on all sides. But with Internet Explorer, the border is always the width of the whole screen. Since my table isn't that wide it looks funny. Is there any way to make the border match its contents?

Thanks, Phyllis

[QuackHead]

It's always better to specify the border width in pixels...

I do not think that your border width of "thin" is a valid CSS property... (I could be wrong, but browsers are known to support their own "enhancements" that don't work in other browsers.)

Try setting your border width to 1 pixel... ie..

<div style="padding: 7px; border-color: #3B2A7D; border-width: 1px; border-style: solid">

Also, could you post some screen-shots so that I/we can see what exactly the problem is.

~Quack

[pjutter]

Hey thanks. I've tried, but it makes no difference. :( I'll upload the page and post a link. -Phyllis

[pjutter]

Okay here's a link:
http://www.afsaonline.org/temp/

Works fine in Netscape. Looks weird in IE. The border's not terribly important for this, but I've tried a bunch of times in different scenarios and never been able to get it to work. :mad:

Phyllis

[QuackHead]

I've looked at the site in IE6, Mozilla 1.4a, and Netscape 7

All three browsers make your site look the same.

What version's of IE and Netscape are you using??

Also, are you a Mac user (cause that could explain the differences, Mac browsers are kind of a pain.... )

~Quack

[pjutter]

Sorry I'm still using IE 5.5 I'm on a PC. I would upgrade but most of the people that I'm writing for will not have upgraded. I'm glad to hear it works in the later browsers!

[pjutter]

This is what you get in IE 5.5:

http://www.afsaonline.org/temp/ie55.jpg

Annoying.

[QuackHead]

OH!!!!....

That's what it looks like in all of my browsers as well... let me guess, you don't want the border to be that wide on the right side???

Let me know, I think I have a solution for ya.

~Quack

[pjutter]

And that's also what I get in Netscape 6 or Netscape 4.7. Grr.

[pjutter]

yes yes! I want to collapse the border so that the padding is 7 px on all sides. Like this (the way it looks in Netscape 4):

http://www.afsaonline.org/temp/netscape.jpg

Thanks,
Phyllis

[QuackHead]

Ok...

Set a width to your <div> tag, and make it the same width as your table....

Example:

<div style="padding: 7px; border-color: #00532D; border-width: 1px; border-style: solid; width: 565px;">
<table width="565" bgcolor="#ffffff">

Does that work?

~Quack

[pjutter]

Dang! Sure does! Wish I'd thought of that. I didn't think width was a box property.

THANK YOU!
Phyllis

[QuackHead]

By default, <div> tags will take up as much available space as they can (In your case, 100% width and height)

Therefore, you must specifiy the dimensions if you want it to be exact.

Glad I could help.

~Quack

[pjutter]

Okay, well it doesn't work in Netscape 6. But that's okay -- I don't know anyone using that particular browser. It's fine in IE 5.5. Wonder if you could tell me if it works in IE 6 (?).

Phyllis

[pjutter]

Okay found someone with IE 6 and checked it there. Works great! So thanks again! (Most of my audience uses Netscape 4 or IE 5 [with a few people on IE 6]).

Phyllis

[QuackHead]

IE 6 :thumbsup:
IE 5.5 :thumbsup:
NS 7: :(
Mozilla 1.4a: :(

I'm really not sure why that wouldn't work... but you don't need to use a <div> just to add a border...

get rid of the <div></div> tags and add another table around your existing table...

<!-- New Table -->
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#00532D">
<tr><td bgcolor="#FFFFFF">

<!-- exisiting Table -->
<table width="565" bgcolor="#ffffff">


Be sure to close off the table at the end of your page.

~Quack

[pjutter]

Hey thanks! I don't really mind that it doesn't work in NS or Mozilla. Thanks for all the testing! I've tried the double-table thing. It causes problems in Netscape because the table that's behind shows through between the cells of the table that's on top (does that make sense?). I know one workaround for that, but the workaround doesn't work in an email (and I need to be able to email this page). And I just discovered that the border doesn't work in email either. Oh well. At least I know how to do the border now. I'll definitely need it on webpages. Thanks for all your help! Phyllis