Help - Search - Members - Calendar
Full Version: Center background image only appearing at the very top
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Holly1
Hi everyone, first let me say what a very nice site this is. I'm hoping that someone might be able to help me. On our website www.PartyFavorWebsite.com we have a yellow image that used to appear in the center of our page all the way down to the bottom of the screen. It used to be shown behind our header and main image and was bordered on all of the edges by a pink background. I have attached a pic to show how it shold appear. Well yesterday the yellow image only appears at the very top of our page behind our header. Some of the html code shows now above it. I would like to get the image to display all the way down to the center again, along with removing the viewable code above the header. Can anyone please tell me what might be causing this? I know it must be something very minor, but I have checked the code and still cannot find the error. Any help would be greatly appreciated. Thank you in advance. smile.gif

BTW my knowledge of html is extremely limited at best!
pandy
See what you have at the very top of the page when viewed in a browser?
="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">
Something is broken and that doesn't help. I'll have a look at the markup.
Frederiek
Start by fixing the markup and CSS errors found by the online tools:
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://jigsaw.w3.org/css-validator/validat...vorWebsite.com/

BTW, the first markup error actually refers to a non closed meta tag on Line 2.
Don't mix XHTML syntax with a HTML Strict DOCTYPE.
And, since you use CSS, don't use deprecated elements such as FONT (in the markup, I mean).
pandy
Yeah, here is what you have.

CODE
<td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


See? You have closed the TD directly after 'style'. The rest, "="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">", becomes just a text string and thus is displayed on the page instead of adding the background
Holly1
QUOTE(pandy @ Apr 25 2012, 08:38 AM) *

Yeah, here is what you have.

CODE
<td style><td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


See? You have closed the TD directly after 'style'. The rest, "="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">", becomes just a text string and thus is displayed on the page instead of adding the background


Thank you! I really appreciate your help.
Holly1
QUOTE(Frederiek @ Apr 25 2012, 08:36 AM) *

Start by fixing the markup and CSS errors found by the online tools:
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://jigsaw.w3.org/css-validator/validat...vorWebsite.com/

BTW, the first markup error actually refers to a non closed meta tag on Line 2.
Don't mix XHTML syntax with a HTML Strict DOCTYPE.
And, since you use CSS, don't use deprecated elements such as FONT (in the markup, I mean).


Thanks Frederiek, but that is what got me into this mess in the first place. Part if this site uses shopping cart software, so some of the code is supposed to be left untouched. At least that is what i had been told. Each time I tried to correct this, it had just made matters worse.
At least we now have our background image placed correctly. Thank you!
pandy
QUOTE(Holly1 @ Apr 25 2012, 03:55 PM) *

I'm sorry but is it the two <td style><td style>=" types of code that need to be removed? I am honestly so ignorant to this that I don't want to make matters any worse. would correcting that, then also bring the yellow center image back to the correct place?


Sorry, the extra TD was me being sloppy when copy-pasting (corrected in my post above).

THIS is what you have.

CODE
<td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


You close the TD (with >) directly after style.
CODE
<td style>


With me so far? What isn't in a tag is content. That's why the rest of it displays on the page and doesn't do what it's supposed to. All of it must be in the start tag for TD. It's all there, it's just that you inserted that extra ">" in the middle of it.

Like so.
CODE
<td style="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">
Holly1
Thank you so much Pandy. It worked! I sincerely appreciate your help. The site is back to normal now. I think for the time being, I will stay away from code validators as this is what started the whole mess. Thanks so much once again.

BTW I love your avatar!





QUOTE(pandy @ Apr 25 2012, 10:32 AM) *

QUOTE(Holly1 @ Apr 25 2012, 03:55 PM) *

I'm sorry but is it the two <td style><td style>=" types of code that need to be removed? I am honestly so ignorant to this that I don't want to make matters any worse. would correcting that, then also bring the yellow center image back to the correct place?


Sorry, the extra TD was me being sloppy when copy-pasting (corrected in my post above).

THIS is what you have.

CODE
<td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


You close the TD (with >) directly after style.
CODE
<td style>


With me so far? What isn't in a tag is content. That's why the rest of it displays on the page and doesn't do what it's supposed to. All of it must be in the start tag for TD. It's all there, it's just that you inserted that extra ">" in the middle of it.

Like so.
CODE
<td style="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


pandy
Thank you. tongue.gif

No, it wasn't the validator's fault. The validator is all good, you can learn from it. But you must learn the basics or you will make new mistakes like this, validator or not.
script_monkey
yeah, what he is trying to tell you is the language is wrong.

sorta like if you made a sentence in english and ended the sentence in the middle with a period like this

today I was on. The html help forum

the period is like a closing bracket tag. < > it tells the Browser in HTML where your code starts, stops and what actions it will take to render code as text or use it in script . If your code is wrong is more than only a code error that could be corrected, its a full on coding language error.

example
Today I was. On the html forums

if you say its not supposed to say forums at the end its supposed to say website, then they're tyring to tell you = before you fix what its saying, you have to fix your sentence /language structure. too biggrin.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.