design issue in a template

I have a very Basic layout page in which my table starts with a width of 900 pixels and is centered, and the area inside the table tags is white and everything is nested inside that main table

i want that the outside of the borders of that table i should be able to show a background gradient image or a solid color so inside that table and nested table, everything should remain white and it should not pick the background color of the main page!

I am basically a Table Lover and uses less DIV tags, but i can prefer DIV's if they are used in few instances,

Here is the simple layout of the page!

CSS Body tag

body {
      padding: 0;
      margin: 0;
      font: 0.7em verdana, sans-serif;
      line-height: 1.5em;
      background: #fff;
      color: #454545;
      margin:10px;
}

HTML Page!

<html>
<head></head>
<body>
<table width="900" border="0" align="center" cellpadding="1" cellspacing="2" class="border">
All nested tables are inside this table and the backgound of this table is white and i want that the baackgound of this table and nested tables should remain white!
</table>
</body>
LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
Nothing in the code above should change the white background.  What is the issue you are having?
0
Chris StanyonWebDevCommented:
If I understand this right, you want a white table to sit on a gradient background.

Set all the background colours for your table to white, and then set the background or body to use your image.

Something like this should do it.
//CSS
body {
      padding: 0;
      margin: 0;
      font: 0.7em verdana, sans-serif;
      line-height: 1.5em;
      background: url("path/to/your/background_image.jpg") center top no-repeat
      color: #454545;
      margin:10px;
}

table, tr, td { background-color: #ffffff; }

Open in new window

0
Gurpreet Singh RandhawaCEOAuthor Commented:
@ ChrisStanyon

Your IDEA worked but inside the tables, i was using a rounded box inside the tables and setting their BG values also, and they are also changing to white, this is not good way i think
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
Not sure what you mean. In your question you say you want the background of the table to be white and everything outside of the table to be a gradient background.

Maybe I need to look at more of your code to see exactly what you are doing.

Can you post a link to your site online for me to have a look at.


0
Gurpreet Singh RandhawaCEOAuthor Commented:
well site is not online but i can show the code in paste bin

here is the link!

http://pastebin.com/pNRFZTQ3

the above link will expire in 1 day
0
Chris StanyonWebDevCommented:
Sorry. I'm still struggling to see exactly what you need. The pasted code you've provided shows lots of classes which don't appear anywhere in your document, and don't look like they'd 'round' anything.

On looking at your code though, I would strongly suggest converting this to a DIV based layout. Using tables for design is out-dated, problematic and limited at best.

A div based layout for your pages looks like it would be very straight forward. Something like below should get you going
//CSS
#outer { width:900px; margin:0px auto; }
#column1 { width: 26%; }
#column2 { width: 58%; }
#column3 { width: 16%; }
.column { float: left; }
#footer { clear:both; }


//HTML
<div id="outer">

	<div id="header">
		<div id="hdr1"><include template="header.asp"></div>
		<div id="hdr2"><include template="header.html"></div>
	</div>

	<h1>Logo Banner</h1>

	<div id="content">
		<div class="column" id="column1">test</div>
		<div class="column" id="column2">test2</div>
		<div class="column" id="column3">test3</div>
	</div>

	<div id="footer">
		<div id="ftr1">Footer</div>
		<div id="ftr2">End</div>
	</div>

</div>

Open in new window

0
Gurpreet Singh RandhawaCEOAuthor Commented:
ok well i am placing my layout online so it was take a bit of time to view give me a day/2
0
Gurpreet Singh RandhawaCEOAuthor Commented:
ok i have made a gradient but its placement is not correct

i am using like this

background: url(../images/gradient.jpg) center top repeat-x

but it is jus covering only the top portion and extenting to the last line, but if i use the repeat only, it overlaps, the one image over another, please guide
gradient.jpg
0
Chris StanyonWebDevCommented:
Take a look here for details on how to position and repeat a background

http://www.w3schools.com/css/css_background.asp
0
Gurpreet Singh RandhawaCEOAuthor Commented:
Solved it by using!

div > table {

}

it worked
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurpreet Singh RandhawaCEOAuthor Commented:
Solved by using DIV point ting to table inside it
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.