• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 162
  • Last Modified:

Why does border style add extra space?

I have a table that is 900 pixels wide. It is surrounded by a <div> wherein I specify a class for the border. The border is outlining an area that is 974 pixels wide ... not 900. Why? Here's the relevant code:

In style sheet:
.outborder{border:1px solid #FFCC99;}

In web page:
<body>
<div class="outborder">
<table width="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td width="15">&nbsp;</td>
    <td width="270">&nbsp;</td>
    <td width="15">&nbsp;</td>
    <td width="270">&nbsp;</td>
    <td width="15">&nbsp;</td>
    <td width="300"><img src="/_omc/images/voodo.jpg" width="300" height="450" /></td>
    </tr>
</table>
</div>
</body>
0
alicia1234
Asked:
alicia1234
  • 4
  • 4
2 Solutions
 
Mark StegglesWeb DeveloperCommented:
Hello,

add * {padding:0;margin:0;} to your stylesheet.

Why do you need the border on the div? Why not have the border on the table and remove the div?

Cheers
Steggs
0
 
alicia1234Author Commented:
I was basically following an example; didn't know I could put it in the table. I thought that would cause vertical borders on all the columns too, but it doesn't. So is putting in the table the "better" way to do it?
Thanks.
0
 
NeoTeqCommented:
Also, keep in mind that the border itself is 1 pixel wide at each end, so if you add a border to something that is 900px wide, it'll total 902px. At least, that's the expected behavior.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
alicia1234Author Commented:
Actually, adding padding and margin to the style sheet doesn't fix the problem. Putting the class inside the table instead of div tag does fix the problem. Any idea why?
0
 
Mark StegglesWeb DeveloperCommented:
because a div is a block level element, it will take up all the space available unless you give it a width
0
 
alicia1234Author Commented:
But how do you give it a width? "Width" isn't an attribute for the DIV tag? And if I add width=900; to my class definition, it makes no difference; border still displays too wide.
0
 
Mark StegglesWeb DeveloperCommented:
<div style="width:900px">

or

class {
width:900px;
}

in your stylesheet
0
 
Mark StegglesWeb DeveloperCommented:
should be

.class {
width:900px;
}
0
 
alicia1234Author Commented:
OK, that does it. Final solution:

In CSS:
.outborder{border:1px solid #FFCC99;
width:900px;}

Code in web page same as in my original post.
Thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now