Member Avatar for DSLKeper

I'm stepping up to trying to fix page on a website. The background image is not centering in browsers. What's wrong with my code? Why does it show good when I'm working on the page on my computer but not when it is uploaded???


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>
OnAIR With Keeper
</title>
</head>
<body style=
"background:#000000 url(http://www.directsellinglive.com/OnAIR/OnAir-DSL-Background-1112011.jpg); background-repeat:no-repeat; background-position:top center;">
<div style="width:1916px; height:1764px;">
&nbsp;
<table>
<tbody>
<tr>
<td class="">
<div id="video_player" style=
"FLOAT: left; WIDTH: 289px; HEIGHT: 80px; left: 660px; position: relative; top:130px;">
<div id="mediaplayer2"></div><br />
<p id='preview'></p><script type='text/javascript'
src='swfobject.js'>
</script> <script type='text/javascript'>
//<![CDATA[
var s1 = new SWFObject('player.swf','player','502','301','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=XANGO 9-17-2011b_DSL_480x360_2.flv&title=Massengale TV&autostart=true');
s1.write('preview');
//]]>
</script><br />
</div><br />
<div id="Petition-Banner-Sm" style=
"left: 895px; width:441px; position: relative; top: 147px; height:10px;">
<a href=
"http://directsellinglive.com/TaxInitiative/TaxInitiative.htm">
<img src=
"http://www.directsellinglive.com//OnAIR/Petition-Banner-Sm.jpg"
border="0" /></a>
</div>
<div id="Petition-Banner-Lg" style=
"left: 772px; width:441px; position: relative; top: 702px; height:1473px;">
<a href=
"http://directsellinglive.com/TaxInitiative/TaxInitiative.htm"
target="_blank"><img src=
"http://www.directsellinglive.com//OnAIR/Petition-Banner-Lg.jpg"
border="0" /></a>
</div>
<div id="DIV1" style=
"FLOAT: left; WIDTH: 152px; HEIGHT: 16px; left: 1140px; position: relative; top: 165px; color: #800080;">
<a href=
"mailto:onair@directsellinglive.com"><font size="2"
face="arial"><font color="#800080">Send A Us
Message</font></font></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

  • 2 Contributors
  • 7 Replies
  • 92 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by DSLKeper
Member Avatar for Dandello

If everything's looking okay in multiple browsers on a test server and not looking okay on the main server, then either some file hasn't been updated or you need to clear your browser cache. Try refreshing using CTRL F5. That will refresh the css (which is held in the browser cache).

Member Avatar for DSLKeper

It only shows good on one computer. On all other computers the background image on the page is justified to the left leaving a large black background on the right side of the page.

Can you take a look at the page and tell me what you think? http://directsellinglive.com/OnAIR/OnAIR.htm

I tried to fix it by starting with the fix you recommended for my test page on the weekend.

Member Avatar for Dandello

Okay - what I think is happening is related to the monitor size. I have a pretty wide monitor and the background looks fine. However, if you don't mind the background repeating horizontally, instead of 'no-repeat' use 'repeat-x'.

Otherwise, take the background out of the body and make it the background of your container div. In the style for your container div add 'margin-right:auto; margin-left-auto'. That will keep the div centered in the browser window when the window is larger than the div.

Member Avatar for DSLKeper

Will do.
Question... when the page is pulled from left to right will it remain in alignment with the video player and graphics not attached to the background? I'm see that is a problem.

Member Avatar for DSLKeper

FYI - I know next to nothing about code. I have been forced to have to have to learn because my code person will be out for at least a week and I need to get this issue fixed by Friday. I have been asking anyone I think might know something about HTML code writing when I came across this community on Friday. Thanks for your patience, understanding and your willingness to help through this.

Member Avatar for Dandello

There are a couple ways to go here - with all the positions set in pixels and the width of the div fixed, when the window is made smaller, there will be a scroll bar and things will look like they're falling off the screen.

The other way to do it (assuming you don't mind the background distorting) is to set all the right and left positions using percents, including the width of the main container. An example of this can be found at http://www.bigapricot.org/index.shtml. The background graphic adjusts to the size of the window and everything stays aligned with it.

Just remember to set a min-width for the div that's big enough to hold your largest non-shrinkable element.

Member Avatar for DSLKeper

Okay. I'll try to figure this out and give it a shot. Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.