** Image only OFF CENTERED in Internet Explorer **

B

bigbonthabeat

New Member
Why is my Blackberry image off-centered only in Internet explorer?

NOTCENTERED.jpg


HTML: 
<!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>
<link href="styles.css" rel="stylesheet" type="text/css" />
    <title>bryson price contact</title>
        <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
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_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_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>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

    <script type="text/javascript" src="static_files/help.js"></script>

<style type="text/css">
.black {
	height: 91px;
	width: 213px;
	text-align: center;
	padding-top: 60px;
	left: 341.5px;
	padding-left: 341px;
}
</style>
</head>
<body onload="MM_preloadImages('img/rollyoutube.png','img/rolltwitter.png','img/rollfacebook.png','img/rollgmail.png','img/blackroll.png')">
<div class="myheader"><span class="Biography">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="107" vspace="50" id="FlashID2" accesskey="s" tabindex="1" title="contactroll">
    <param name="movie" value="img/rollcontact.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/rollcontact.swf" type="application/x-shockwave-flash" width="435" height="107" vspace="50">
      <!--<![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>
</span>
</div>
<div id="wrapper">
  <div class="Biography" id="biography">
  </div>    
  <div class="belowheader" id="belowheader"><img src="img/newbelowheadcontact.png" width="390" height="123" />
  </div>
<div class="biobody" id="biobody">
  <div class="youtubetwitter"><a href="www.youtube.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','img/rollyoutube.png',1)"><img src="img/youtube.png" name="youtube" width="213" height="87" border="0" id="youtube" /></a><a href="www.twitter/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','img/rolltwitter.png',1)"><img src="img/twitter.png" name="twitter" width="213" height="87" border="0" id="twitter" /></a><a href="www.facebook.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','img/rollfacebook.png',1)"><img src="img/facebookone.png" width="221" height="87" /></a><a href="form.html" rel="gb_page_center[896, 480]"><img src="img/gmail.png" alt="gmail" width="213" height="87" id="Image2" onmouseover="MM_swapImage('Image2','','img/rollgmail.png',1)" onmouseout="MM_swapImgRestore()" /></a><script type="text/javascript">
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
    var options = {
        caption: caption,
        height: height || 500,
        width: width || 700,
        fullscreen: false,
        show_loading: false,
        callback_fn: callback_fn
    }
    var win = new GB_Window(options);
    return win.show(url);
}
    </script></div>
  <div class="black"><img src="img/black.png" alt="blackberry" width="213" height="87" id="Image1" onmouseover="MM_swapImage('Image1','','img/blackroll.png',1)" onmouseout="MM_swapImgRestore()" /></div></div>
  <div class="facebook">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID2");
</script>
</body>
</html>
 
D

DHDdirect

New Member
is this style suppose to be seperate from the linked style sheet?

Code: 
[COLOR=#800080]<style type=[COLOR=#0000ff]"text/css"[/COLOR]>[/COLOR]
.black {
    height: 91px;
    width: 213px;
    text-align: center;
    padding-top: 60px;
    left: 341.5px;
    padding-left: 341px;
}
[COLOR=#800080]</style>[/COLOR]

I would guess it has to do something with the padding-left: 341px
 
B

bigbonthabeat

New Member
DHDdirect said:
is this style suppose to be seperate from the linked style sheet?

Code: 
[COLOR=#800080]<style type=[COLOR=#0000ff]"text/css"[/COLOR]>[/COLOR]
.black {
    height: 91px;
    width: 213px;
    text-align: center;
    padding-top: 60px;
    left: 341.5px;
    padding-left: 341px;
}
[COLOR=#800080]</style>[/COLOR]

I would guess it has to do something with the padding-left: 341px
Click to expand...

thats for the blackberry symbol and I made a style for it also (it only appears on this document while most of the other styles are on a separate sheet)

I had an idea to insert a div to the right of the blackberry symbol so that it would push it into position, but that just doesn't seem right : /

any other ideas?
 
ronaldroe

ronaldroe

Super Moderator
Staff member
Try this:

Code: 
.black {
    height: 91px;
    left: 50%;
    margin-left:-107px;
    padding-top: 60px;
    position:relative;
    width: 213px;
}
 
D

DHDdirect

New Member
I'd try something completely different

Code: 
.black {
margin:2px auto 2px auto;
text-align:center;
}

keep it simple.. the text-align is what is aligning the image. the margin is what is aligning the div.. so the margin shouldn't really be needed but I through it in there to get the height you are looking for.

Hope that helps
 
Last edited:
B

bigbonthabeat

New Member
DHDdirect said:
I'd try something completely different

Code: 
.black {
margin:2px auto 2px auto;
text-align:center;
}

keep it simple.. the text-align is what is aligning the image. the margin is what is aligning the div.. so the margin shouldn't really be needed but I through it in there to get the height you are looking for.

Hope that helps
Click to expand...

thank you so much...this fixed it : )
 
You must log in or register to reply here.
Top