Vertical Alignment off by 1 pixel???? [Archive]

Click to See Complete Forum and Search --> : Vertical Alignment off by 1 pixel????

creativeforces

04-03-2006, 10:41 AM

I am making a website with a jpeg that repeats on the x-axis and then putting an SWF over the top of it. Everything works great except for the fact that my SWF is one pixel lower than my background jpeg, so they don't line up and it looks like crap. Can anyone help me line these up?

here is the html for the site. Thanks for the help

<TITLE>Index</TITLE><style type="text/css">body {margin:0;}</style>
<script language="JavaScript">
// This is only needed for Netscape browsers.
function flashGetHref() { return location.href; }
function flashPutHref(href) { location.href = href; }
function flashGetTitle() { return document.title; }
function flashPutTitle(title) { document.title = title; }
</script>
</HEAD>
<BODY bgcolor="#F3F3F3">
<center>



<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="850" HEIGHT="1050" align="top">
<PARAM NAME=movie VALUE="http://www.XXXXXXXXXXXX/index1.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=bgcolor VALUE=#F3F3F3> <EMBED src="index1.swf" WIDTH="850" HEIGHT="1050" quality=high scale=noscale bgcolor=#F3F3F3 swLiveConnect=true
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

<A NAME=about></A>
<A NAME=services></A>
<A NAME=history></A>
<A NAME=employment></A>
<A NAME=technology></A>
<A NAME=loadtracking></A>
<A NAME=documenting></A>
<A NAME=contact></A>
</center>

<style type="text/css">
<!--
body {
padding: 0px;
margin: 0px;
background: url(http://www.XXXXXXXXXXXXXXX/repeat.jpg); /*the path to your image*/
background-position:center center;
background-repeat:repeat-x;
background-attachment:scroll;
}
</style>
</BODY>

WebJoel

04-03-2006, 02:12 PM

Always include this in any web page, -it will correct the IE faults and not affect anything other ("compliant") browser:

<style>
{padding:0; border:0; margin:0;}
</style>

Not sure if this will help you in this case, but I have found that in nearly every page that I have ever built, that including this DOES affect a difference (although to date I have been lucky and not had any site display unsatisfactorially in it's absence... well, just ONE site actually, and adding this STYLE corrected the problem!).

-Joel

creativeforces

04-03-2006, 04:11 PM

Thanks for the help, but that did not clear up the problem.

pcthug

04-04-2006, 03:57 AM

The infamous 'Box Model' issue (http://www.w3.org/TR/CSS21/box.html).

BTW, your flash is huge! (2,898.66 KB) and should be seriously reducted in size

WebJoel

04-04-2006, 07:21 AM

Your code right now is:

<TITLE>Index</TITLE><style type="text/css">body {margin:0;}</style>
<script language="JavaScript">
// This is only needed for Netscape browsers.
function flashGetHref() { return location.href; }
function flashPutHref(href) { location.href = href; }
function flashGetTitle() { return document.title; }
function flashPutTitle(title) { document.title = title; }
</script>
</HEAD>
<BODY bgcolor="#F3F3F3">
<center>



<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="850" HEIGHT="1050" align="top">
<PARAM NAME=movie VALUE="http://www.XXXXXXXXXXXX/index1.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=bgcolor VALUE=#F3F3F3> <EMBED src="index1.swf" WIDTH="850" HEIGHT="1050" quality=high scale=noscale bgcolor=#F3F3F3 swLiveConnect=true
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

<A NAME=about></A>
<A NAME=services></A>
<A NAME=history></A>
<A NAME=employment></A>
<A NAME=technology></A>
<A NAME=loadtracking></A>
<A NAME=documenting></A>
<A NAME=contact></A>
</center>

<style type="text/css">
<!--
body {
padding: 0px;
margin: 0px;
background: url(http://www.XXXXXXXXXXXXXXX/repeat.jpg); /*the path to your image*/
background-position:center center;
background-repeat:repeat-x;
background-attachment:scroll;
}
</style>
</BODY>

First off, note that the BOLD portion of your *css is repeated. This is not necessary. Second, try adding "border:0;" to the "padding:0; margin:0;" and see if this is it. I am almost sure that you'll see a change.

creativeforces

04-04-2006, 01:42 PM

Thanks that fixe it

WebJoel

04-04-2006, 01:53 PM

There's only three things that can make something be 'one pixel off', you cited two of them, leaving just the "border:0" as the only thing left. But I am glad (relieved) that it worked... :)