Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Center background image only appearing at the very top

Posted by: Holly1 Apr 25 2012, 05:58 AM

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!


Attached thumbnail(s)
Attached Image

Posted by: pandy Apr 25 2012, 07:34 AM

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.

Posted by: Frederiek Apr 25 2012, 07:36 AM

Start by fixing the markup and CSS errors found by the online tools:
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//www.PartyFavorWebsite.com/&warnings=yes&input=yes
http://jigsaw.w3.org/css-validator/validator?lang=en&uri=http%3A//www.PartyFavorWebsite.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).

Posted by: pandy Apr 25 2012, 07:38 AM

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

Posted by: Holly1 Apr 25 2012, 08:55 AM

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.

Posted by: Holly1 Apr 25 2012, 09:00 AM

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.cgi?url=http%3A//www.PartyFavorWebsite.com/&warnings=yes&input=yes
http://jigsaw.w3.org/css-validator/validator?lang=en&uri=http%3A//www.PartyFavorWebsite.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!

Posted by: pandy Apr 25 2012, 09: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);">

Posted by: Holly1 Apr 25 2012, 10:01 AM

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);">



Posted by: pandy Apr 25 2012, 10:31 AM

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.

Posted by: script_monkey May 2 2012, 03:38 PM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)