The character on the left is an .swf file (when you scroll over him, a cool effect happens). The character on the left is a .png file. Before inserting the .swf file into my project, the character stood on the line, but after, both of them were nudged up in FIREFOX. They look completely normal in “Live View” (Dreamweaver) and in Internet Explorer.
Does anyone know what the problem could be? I am willing to provide any info needed to solve this problem, just let me know what you need.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bryson Price Music</title>
<style type="text/css">
#wrapper {
text-align: left;
width: 960px;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
}
.Cartoon {
text-align: center;
}
.footer {
height: 200px;
}
body {
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}
#footer {
background-position:center;
background-repeat:no-repeat
width:100%; height :200px;
margin:0 auto;
border-top-width: 3px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #282828;
border-right-color: #282828;
border-bottom-color: #282828;
border-left-color: #282828;
background-color: #e9e6e6;
}
.cartoondiv {
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('img/youtube.png','img/name.png')">
<div id="wrapper">
<div class="Cartoon" id="cartoon">
<div class="cartoondiv">
<div class="cartoondiv">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="375" height="511" id="FlashID" accesskey="s" title="cartoondivimg">
<param name="movie" value="img/toonelec.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="img/toonelec.swf" width="375" height="511">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
</div>
<div class="bottompage" id="bottompage"></div>
</div>
<div class="footer" id="footer"><img src="img/homebryson.png" width="1024" height="118" />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="146" height="32" id="FlashID2" accesskey="s" tabindex="1" title="homebio">
<param name="movie" value="img/homebio.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="img/homebio.swf" width="146" height="32">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object><img src="img/line.png" width="18" height="41" alt="line2" />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="82" height="32" id="FlashID3" accesskey="s" tabindex="1" title="homemusic">
<param name="movie" value="img/homemusic.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="img/homemusic.swf" width="82" height="32">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<img src="img/line.png" width="18" height="41" alt="line" /><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="121" height="32" id="FlashID4" accesskey="s" tabindex="1" title="homecontact">
<param name="movie" value="img/homecontact.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="img/homecontact.swf" width="121" height="32">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
swfobject.registerObject("FlashID4");
</script>
</body>
</html>
First of all Id enable a border around your cartoondiv to see if the div is sitting on the line or not, probably also worth setting the margins and padding to zero at the same time.
the image isnt being included inside the cartoondivimg in your first picture, go back and do that border test again but look at the results in FF, see if the border surrounds the image.
If it does that IE isnt reading your code correctly and isnt putting the image inside the div. So your looking at a compatability problem and may need to add IE targeted code to your css to get around the problem, or just redesign that area to get a consistant result.
What version of IE are you using, if 8, try viewing in compatability mode see if that looks better.
Id also question why you call that div twice in your code ?
The image is a .swf image (flash file). I don’t think you can put a border around just the image…you have to make a div, then put a border around the div(what I did in the 2nd example).
And I don’t know why I had 2 divs like that. I cleaned up that mess:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bryson Price Music</title>
<style type="text/css">
#wrapper {
text-align: left;
width: 960px;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
}
.cartoon {
text-align: center;
margin: 0px;
padding: 0px;
}
.footer {
height: 200px;
}
body {
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}
#footer {
background-position:center;
background-repeat:no-repeat
width:100%; height :200px;
margin:0 auto;
border-top-width: 3px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #282828;
border-right-color: #282828;
border-bottom-color: #282828;
border-left-color: #282828;
background-color: #e9e6e6;
}
.wrapmenu {
text-align: center;
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('img/youtube.png','img/name.png','img/rollbrysongrey.png','img/rollblueone.png','img/rollbluetwo.png')">
<div id="wrapper">
<div class="cartoon" id="cartoon">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="375" height="511" id="FlashID" accesskey="s" title="cartoondivimg">
<param name="movie" value="img/toonelec.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="img/toonelec.swf" width="375" height="511">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div class="footer" id="footer"><img src="img/menustarone.png" alt="starone" width="47" height="118" id="Image1" onmouseover="MM_swapImage('Image1','','img/rollblueone.png',1)" onmouseout="MM_swapImgRestore()" /><img src="img/menubryson.png" alt="brysonmenu" width="500" height="118" id="Image3" onmouseover="MM_swapImage('Image3','','img/rollbrysongrey.png',1)" onmouseout="MM_swapImgRestore()" /><img src="img/menustartwo.png" alt="startwo" width="48" height="118" id="Image2" onmouseover="MM_swapImage('Image2','','img/rollbluetwo.png',1)" onmouseout="MM_swapImgRestore()" />
<div class="wrapmenu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="146" height="32" vspace="5" id="FlashID2" accesskey="s" tabindex="1" title="homebio">
<param name="movie" value="img/homebio.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="img/homebio.swf" type="application/x-shockwave-flash" width="146" height="32" vspace="5">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object><img src="img/line.png" alt="line2" width="18" height="41" />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="82" height="32" vspace="5" id="FlashID3" accesskey="s" tabindex="1" title="homemusic">
<param name="movie" value="img/homemusic.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="img/homemusic.swf" type="application/x-shockwave-flash" width="82" height="32" vspace="5">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<img src="img/line.png" width="18" height="41" alt="line" /><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="121" height="32" vspace="5" id="FlashID4" accesskey="s" tabindex="1" title="homecontact">
<param name="movie" value="img/homecontact.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="img/homecontact.swf" type="application/x-shockwave-flash" width="121" height="32" vspace="5">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
swfobject.registerObject("FlashID4");
</script>
</body>
</html>
Go though your style declarations, youve several there where you declare ‘0’ but have not put ‘px’ after.
if that doesnt work, id take out the lines
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
and see if that div is giving you the problem, it shouldnt be there until the flash version is old, but dont trust anyone
finally Id look at inserting a full width div with fixed height of 100px and border visible between your wrapper and footer divs.
the object of this is to see if the new div butts up to both top and bottom, if theres a gap at the top then it must be a problem in the image, if a gap is at the bottom then your footer div is pushing the two apart.
When the size is 0 it doesn’t need to have anything after it
0 = 0px = 0pt = 0% = 0em = 0in = 0cm
The only difference between all of those is that the first one is two characters shorter than most of the others. The shorter one is the best option to use in this case since none of the longer ones add any useful information and all are treated exactly the same by all browsers.