Hi,
I'm getting a bit frustrated...I work in dreamweaver cs4 and have managed to set my table borders to my liking (had to put everything inside a single table or all the tables ended up with the same effect which I wanted to be global around all not individual) but...
When I preview in either firefox, opera, safari etc... I end up with an extra frame border the size of entire display page. See attached pic.

What I mean is...my centered table of 800 x 860 is fine and centered with the desired borders but the outside area's full screen has an extra border exactly like the one I created for the table.

Can anyone tell me what I'm doing wrong?
Here's my css code:

<style type="text/css">
<!--
body,td,th {
	font-family: Verdana;
	font-size: 15px;
	color: #000;
	border-top-color: #999;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #999;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 2px;
	border-right-width: 8px;
	border-bottom-width: 8px;
	unicode-bidi: 6;
	border-left-width: 2px;
	font-stretch: 2;
	direction: 8;
}
body {
	background-color: #ffffff;
	background-image: url(file:///E|/griffin_graffix/website/site_images/background_green.jpg);
}
.Hometext {
	font-family: Verdana;
	font-size: 15px;
	color: #CCC;
	font-weight: normal;
	line-height: normal;
	text-align: center;
	font-style: normal;
}
a:link {
	color: #99B883;
}
a:visited {
	color: #6F3;
	border-top-style: none;
}
a:hover {
	color: #FC0;
}
.Hometext h1 font {
	font-family: Verdana;
	font-size: x-large;
	font-weight: lighter;
	font-style: normal;
	letter-spacing: 0.1em;
}
.centeredtext {	font-family: Verdana;
	text-align: center;
	line-height: 25px;
}
.footer {
	font-family: Verdana;
	font-size: 10px;
	color: #719135;
}
-->
</style>

Thanks!

Dani AI

Generated

Short answer: the extra frame comes from applying border rules to a global selector (the page itself) instead of the centered container. As pointed out, styling body (or html) with borders will draw that outer border. 's long-term advice is also sound: move layout into CSS rather than using tables, and use relative type sizes for accessibility. 's quick Photoshop shadow fix works as a workaround, but the CSS approach below is cleaner and easier to maintain.

Fix steps (easy, immediate)

  • Remove any border declarations from body, html, or global rules that include td, th unless you really want every table cell framed.
  • Wrap the page content in a specific element (id or class) and apply the border to that element only.
  • Reset default body margins (different browsers add them) so centering is consistent.
  • If you must keep tables, use border-collapse to avoid doubled internal borders.

Example (minimal, new and safe to paste)

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

/* centered page container: border only here */
#page {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #999;
}

/* if using tables for layout */
table { border-collapse: collapse; }

Troubleshooting tips

  • Use browser DevTools (Inspect Element -> Computed Styles) to see which selector is adding border-* to body or html.
  • Search stylesheets for any rule that targets body, html, td, or th and remove border declarations there.
  • Clean out nonstandard or Dreamweaver-injected properties; they can cause odd rendering in some browsers.
  • For future work, prefer CSS layout (flexbox/grid) and scalable font units (em/rem) as suggested.

Recommended Answers

All 4 Replies

what does your html look like? you also set the border style to your body (which is the outside border you are seeing). you need to style your body as basic and add styles to your tables and divs with your style sheet

what does your html look like? you also set the border style to your body (which is the outside border you are seeing). you need to style your body as basic and add styles to your tables and divs with your style sheet

Thanks mj,
I thought it might be something along those lines....not very good with css just yet...went another route for this one...created my shadows in photoshop and applied them to background but your info is going to come in handy very soon I'm sure.
Thanks!

using css styling,
Try for more consistent, you are using px(bad) em(good) x-large(ok), in the same css document. the w3c recommendation for display is em and %. Makes the display device independent and allows the user to set the basefont per their vision. particularly 15px is very small on a 2000px monitor, using any fixed font makes the text vanishingly small on a large screen, and impossible large on a handheld deviceLegal vultures have begun lawsuits regarding accessible web pages(V.bad)

Try to move away from tables as a layout device
might be better to use css positioning as well
tables are difficult to render accurately, another place where standards compliance and IE differ markedly

using css styling,
Try for more consistent, you are using px(bad) em(good) x-large(ok), in the same css document. the w3c recommendation for display is em and %. Makes the display device independent and allows the user to set the basefont per their vision. particularly 15px is very small on a 2000px monitor, using any fixed font makes the text vanishingly small on a large screen, and impossible large on a handheld deviceLegal vultures have begun lawsuits regarding accessible web pages(V.bad)

Try to move away from tables as a layout device
might be better to use css positioning as well
tables are difficult to render accurately, another place where standards compliance and IE differ markedly

Thank you almostbob! I know you are right but I'm really having a hard time getting css and layout without tables. dreamweaver gives you just so many options and when I style my page with it, you get the code that you saw. I just really need someone to sit with me one afternoon and explain it clearly...
I tried some tutorials but they end up confusing me and I can't ask q's as I go.

Gonna keep reading and I'll eventually get it...lol

Thanks for the advice...I'll remember it and use it as much as I can.

Griffin

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.