Background Image Repeating in Tables Options

[Kite]

Note: I am using NVU to build my website, but I have no online examples of what I have so far.

Problem: Background image in table repeating as table content is entered.

I have the table sized perfectly to fit the background image and everything - but when I type a lot of content in the table - enough to overflow and increase the table size - the background image is repeated.

I have searched through the forums here and anything helpful I find won't work. Everything I try to enter is changed by NVU, and any codes that seem correct do not work.

Current HTML in beginning of table:

CODE

<table style="text-align: left; width: 973px; height: 687px;"
background-repeat="no-repeat" background="../../layout3.png"
border="0" cellpadding="2" cellspacing="2">

I'd like some help figuring this out, or maybe suggestions on how to make this table easier to manage than the way I'm doing it?

[pandy]

Feed the CSS bit to the W3C CSS checker.
http://jigsaw.w3.org/css-validator/validat...;usermedium=all

You have quotations marks that shouldn't be there, you have equal signs instead of colons. You need to read up a little on CSS syntax.
http://htmlhelp.com/reference/css/structure.html

Basically it's like this.

CODE

selector     { property1: value1; property2: value2; property3: value3 }

Since you use inline CSS there is no selector. Instead you have it all as the value of a style attribute.

CODE

style="property1: value1; property2: value2; property3: value3"

That's where the quotes go, around the attribute value, which is the whole CSS shebang, and nowhere else.

[Kite]

That did help, but now the background doesn't show up at all.

I'll try reading through the links you sent me; thanks for your help!

[Kite]

Aha! Nevermind, I figured it out. Thanks so much for your help!

[pandy]

So how does the CSS look now?

[Kite]

This is what I have:

CODE

<table
style="border: 0pt none; background: transparent url(../../layout3.png) no-repeat scroll 0%; text-align: left; width: 973px; height: 687px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">

NVU turned it into that.

Now, though, when I preview my page in IE, it's like the background was shifted down a couple inches.

[pandy]

Well, you can safely remove all the properties prefixed with -moz. No idea why the thing put them in there.

You can also remove 'scroll' and '0%' since that's the default. Also, 'border: none' is enough, even if what you have isn't wrong.

Can't help with the shift without seeing the page.

Another thing though. You are going to fill that table with text, I assume? It isn't a good idea to fix both width and hight. Where will the text go if it doesn't fit? You have to remember that I maybe use a much larger text size than you did when you designed it.

[Kite]

And when I remove the -moz items, the rest of the code disappears xD I have to re-add my background to the code, and it'll just give me -moz again.

Darn NVU.

Yes, it will be filled with text - I figured that if the text overflows the table, the table would just stretch.
I'll try redoing the table code to see if I can spot where the strange breaks come in.

[pandy]

I think NVU has a mode where you can write the code manually without it making changes to it.

I've never used it myself, but I use to recommend it to people who absolutely want a WYSIWYG editor. I think I'll stop doing that now.

[Kite]

Well, it's very useful and is open source of course, so it's the #1 choice for people like me

I know it has a direct coding editor, but that's the part it keeps changing on me.
Unless there's one that I totally can't find.

[pandy]

Maybe you need to tell it not to do that.

Hey, it really is easier to learn how to write the stuff, you know. And faster once you get over the hump.

[Kite]

This will be my first real website, and I've been around the internet so I can imagine how confusing a lot of it gets, especially when you get into PHP and those sorts of things.

I figured I might as well learn it all for myself instead of being forced to pay someone for the service. I actually /want/ to know what's going on behind the scenes.

Anyway, thanks so much for your help! I'm really glad I stumbled onto this site - very helpful!

[pandy]

I actually /want/ to know what's going on behind the scenes.

Good for you. But then you should wean yourself off WYSIWYG as soon as possible. You can't really learn from the markup and CSS they generate. If nothing else, there is way too much of it as you have seen.

[Kite]

Alright, I'll try my best to do that. Thanks again!