Greetings everyone else on the forum. This is my first post. I have a question about css for you all. My knowledge of CSS is relatively elementary, so you'll have to explain a little.

My question is this:

I would like to get an image for the background of my main table. My CSS looks like this:

table { background-image:url('http://www.truthforbusiness.com/images/tablebackground3.gif');
background-attachment: fixed;
background-repeat: repeat;
background-position: top center;
width: 900px;
margin: 0 auto;
border: 0px none;
{

It works fine in the preview section of FrontPage, but in Firefox and IE7 it just shows me a white background.

Thanks all for your help.

Ian

I copied the CSS and made a page with a table and the background image displayed.

Hmmmm... Thats funny, what else could be the problem? Could it be the way I link to the style sheet?

Also, to clarify it shows up fine in the normal view of FrontPage however in the preview of FrontPage it shows up the same way it does in a browser.

Thanks for helping,

Ian

I don't use Front Page but still maybe I can help. Please post the html where you are linking in the CSS file and also the section of the body where you are using the <table>.

Alright, I think that is it. If I put it in the page (with the css in the header) it works fine but in the style sheet it does not work.

My html is this

<link rel="stylesheet" type="text/css" href="CSS.css">

and my css file is formatted like this

.topborder { border-bottom-style: double; border-bottom-width: 3 }
.rightsidebar { background-image: url('images/Sidebar-Background-AD-right.gif') }
.leftsidebar { background-image: url('images/Sidebar-Background.gif') }
.tablebkd { table border="0 cellpadding0 cellspacing0 styleborder-collapse collapse bordercolor#111111 width800 idAutoNumber1 bgcolor#FFFFFF height586 backgroundimagesBlue-Sidebar-Background.gif"
.tablebackground { background-image: url('images/tablebackground.gif') }

table { background-image:url('http://www.truthforbusiness.com/images/tablebackground3.gif');
background-attachment: fixed;
background-repeat: repeat;
background-position: top center;
width: 900px;
margin: 0 auto;
border: 0px none;

(Everything before 'table' are just independent tags someone else put in there. I just put it all here so you could see how it was formatted.)

Thanks,

Ian

Thanks, You replied while I was posting. Here is the section of body where the table is.



<div align="center">
<center>
<table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="900" id="AutoNumber1" bgcolor="#FFFFFF" height="586">
<tr>
<td height="86" colspan="3" width="800" style class="topborder" background="images/White.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="image002.jpg" width="234" height="65">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;
<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsr c:img.getAttribute?img.getAttribute('lowsrc'):img. src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" title="Seminars" href="Seminars.htm">
<img border="0" src="images/Seminars.gif" width="93" height="25" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="images/SeminarsALT.gif"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onmouseover="var img=document['fpAnimswapImgFP5'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsr c:img.getAttribute?img.getAttribute('lowsrc'):img. src;" onmouseout="document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].imgRolln" title="Resources" href="Resources.htm">
<img border="0" src="images/Resources.gif" width="91" height="25" id="fpAnimswapImgFP5" name="fpAnimswapImgFP5" dynamicanimation="fpAnimswapImgFP5" lowsrc="images/ResourcesALT.gif"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onmouseover="var img=document['fpAnimswapImgFP3'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsr c:img.getAttribute?img.getAttribute('lowsrc'):img. src;" onmouseout="document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].imgRolln" href="Services.htm">
<img border="0" src="images/Services.gif" width="80" height="25" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="images/ServicesALT.gif"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onmouseover="document['fpAnimswapImgFP7'].imgRolln=document['fpAnimswapImgFP7'].src;document['fpAnimswapImgFP7'].src=document['fpAnimswapImgFP7'].lowsrc;" onmouseout="document['fpAnimswapImgFP7'].src=document['fpAnimswapImgFP7'].imgRolln" href="The%20Truth.htm">
<img border="0" src="The_Truth.gif" width="100" height="25" id="fpAnimswapImgFP7" name="fpAnimswapImgFP7" dynamicanimation="fpAnimswapImgFP7" lowsrc="images/The-TruthALT.gif"></a></td>
</tr>
<tr>
<td height="183" colspan="3" width="800" background="images/ResourcesPIC.gif" >
<p align="top">&nbsp;</td>
</tr>
<tr>
<td class="leftsidebar" width="116" height="510" rowspan="2" style="" align="left" valign="top">&nbsp;<div id="blueblock" style="width: 121; height: 180">
<ul>
<li><a href="http://www.truthforbusiness.com/Resources.htm">Resources</a></li>
<li><a href="http://www.truthforbusiness.com/Seminars.htm">Seminars</a></li>
<li><a href="http://www.blog.truthforbusiness.com">Blog</a></li>
<li><a href="http://www.truthforbusiness.com/The%20Truth%20about%20John.htm">John's Story</a></li>
<li><a href="http://www.truthforbusiness.com/contact_us.htm">Contact Us</a></li>
<li><a href="http://www.truthforbusiness.com/Services.htm">Services</a></li>
</ul>
</div></td>
<td height="495" width="611" align="left">
<p align="left">
&nbsp; </p>


<p align="left">
&nbsp;<p align="left">
&nbsp;</p>


<p align="center"><span class="title">Resources</span><p align="left">
<span class="normaltext"><font size="5">T</font>he Patrick Group's resources section is designed
to point you towards books, CD's, websites, etc. that we consider to be
trustworthy and helpful. We will be expanding and revising this portion of
our website continually as we find more resources to bring to your
attention. We hope to soon carry many of these items in our Products
section. </span><p align="left">
&nbsp;&nbsp;&nbsp;&nbsp; <a href="books.htm">
<img border="0" src="Booksbutton.jpg" width="144" height="120"></a><p align="left">
<span class="normaltext">Here you will find books that
contain trustworthy truths about business that have helped and encouraged
us and will do the same for you.&nbsp;</span><p align="left">
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="CD's.htm">
<img border="0" src="images/CD'sbutton.gif" width="135" height="109"></a><p align="left">
<span class="normaltext">These are some of the recordings and messages
that have been helpful to us and many of our clients </span><p align="left">
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="links.htm">
<img border="0" src="images/linksbutton.gif" width="124" height="98"></a><p align="left">
<span class="normaltext">Under this heading we list some of the organizations
that are promoting excellent concepts and products for your business</span><p align="left">
&nbsp;<p align="left">
&nbsp;<td class="rightsidebar" height="510" width="116" valign="top" rowspan="2" style="">

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p></p>
<p></p>
<p>&nbsp;</p>
<p></p>
<p></p>
<p></p>
<p>

</tr>
<tr>
<td height="15" width="611" valign="top" style class="lowerborder">
<p align="center">&nbsp;</table>
</center>
</div>


Thanks a lot,

Ian

I see your Resources image. But the table background shouldn't show because you have other images in the other cells.

At the top of your CSS above, where are those images located? I tried in http://www.truthforbusiness.com/images/ and they are not found. You might want to correct those paths.

Don't ask me why, but the correct path for the pictures above is

.rightsidebar { background-image: url(images/New Folder/Sidebar-Background-AD-right.gif') }
.leftsidebar { background-image: url('images/New Folder/Sidebar-Background.gif') }

Thanks for pointing that out.

Are you saying that if I have other images in my cell then the background won't show?

If that is so, what then is the best way to make a background image and still be able to have other images in the cell?

...or are you saying that I should just not make the one cell that has the resources image the background image?

Thanks,

Ian

P. S. for reference this is up on the web as an experment page and not linked to from our website. You can reach it here

Looks like we need to backup. Are you saying you want http://www.truthforbusiness.com/imag...ackground3.gif to show somewhere in the table?

You have background images for each table cell. That is why the table background isn't seen. Please explain more of what you want to see.

Why are you using tables for layout ??
I'll never understand why anyone bothers to use CSS and divs and then you stick the whole thing inside a table.

Tables are meant for TABULAR DATA and there is nothing in your layout that can't be done WITHOUT tables.

- get rid of the quotes around the path in the background-image lines in your css , it is not necessary and can actually cause hiccups.

- background-image isn't necessary, just 'background: url(xxxxx);' will suffice

- Get RID of that horrible Microsoft schema crap in the top of your pages and put in a PROPER DOCTYPE (and people wonder why I hate FP )

I know what you mean LadynRed. Since doing layout with divs, I couldn't ever go back to a table layout

Maybe I should start a new saying, once you do divs you never go back.

once you do divs you never go back

Good one, I agree !!!

Alright, here is whats up. I have decided to make a new page and a new style sheet to make it work on there instead of trying to figure out all of the problems with this one.

New page: here

New Style sheet: here

Thanks LadynRed for your help. The only reason I am using tables is because that is the way a friend told me to do it six months ago when I got into this. If there is a better way I would definitly like to learn; however it would still be nice to be able to edit it in a WYSIWYG program. Can you do that with divs?

Is there a tutorial on divs you would recommend?

Yes, I know I need to get rid all the jibberish our wonder friends at Microsoft like to put on top of my web pages. The only reason I have left it is I was not sure how to format a PROPER DOCTYPE. And after using it, I understand why you hate FP.

Thanks all,

Ian

however it would still be nice to be able to edit it in a WYSIWYG program. Can you do that with divs?

Absolutely.

Get yer doctype here:
http://www.alistapart.com/articles/doctype/

Thanks LadynRed,

Do you know of a tutorial, or book that would teach me about divs? I had seen them in code before and wondered what they were but never ran across any explanation.

James,

To clarify the above post, my background picture still does not work on the blank page I created. Yes, I would like the background picture to be http://www.truthforbusiness.com/imag...ackground3.gif

Thanks both of you,

Ian

Now I'm really confused
On this page:
http://www.truthforbusiness.com/Template.htm
this is the background of the table
http://www.truthforbusiness.com/imag...ackground3.gif

If you are thinking of something else, you need to explain it more fully.

James,

Sorry, I didn't get my post posted soon enough, I just realized that it was somehow working. Sorry for confusing you.

Thanks James for all your hard work! Your ideas really helped.

So now my tables page is working; now for the new adventure of divs!

Also, LadynRed since you and I share the same feelings reagarding FrontPage can you recommend a better WYSIWYG program? Is Dreamweaver any better?

Thanks both of you; you were both a lot of help.

Ian

Glad to help.

If you want to learn, I would suggest an IDE such as
Aptana http://www.aptana.com
or Komodo-Edit
http://activestate.com/Products/komodo_edit/

For divs, here is a good starting point
http://www.alistapart.com/articles/multicolumnlayouts

Some excellent CSS resources
http://www.webmaster-talk.com/css-fo...sites-2-a.html

I recommend that you learn to code by hand and then you will get the most out of any WYSIWYG tool. Dreamweaver is very good - when you know what you're doing. Used only in WYSIWYG mode, DW can produce some really ugly code.

To learn about table-less layouts, I highly recommend these books:
http://www.sitepoint.com/books/css2/
http://www.sitepoint.com/books/html1/

You can also get a LOT of help and info here: http://www.css-discuss.org.

Thanks all for your help. I am checking out those sites and books right now.

Ian