PDA

View Full Version : Center sliced image in IE


Eliteoomph
12-28-2010, 04:31 AM
Hey guys...
I am having problems centering a sliced header image in IE...
works fine in firefox and chrome
http://www.bigcitymarketing.net/headertest.html

and here is the code
<html>
<head>
<title>headertest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (header.psd - Slices: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:965px;
height:200px;
margin: 0px auto;
}


#header-01 {
position:absolute;
left:0px;
top:0px;
width:298px;
height:200px;
}

#header-02 {
position:absolute;
left:298px;
top:0px;
width:667px;
height:28px;
}

#header-03 {
position:absolute;
left:298px;
top:28px;
width:199px;
height:39px;
}

#header-04 {
position:absolute;
left:497px;
top:28px;
width:197px;
height:39px;
}

#header-05 {
position:absolute;
left:694px;
top:28px;
width:240px;
height:39px;
}

#header-06 {
position:absolute;
left:934px;
top:28px;
width:31px;
height:146px;
}

#header-07 {
position:absolute;
left:298px;
top:67px;
width:226px;
height:48px;
}

#header-08 {
position:absolute;
left:524px;
top:67px;
width:410px;
height:48px;
}

#header-09 {
position:absolute;
left:298px;
top:115px;
width:372px;
height:59px;
}

#header-10 {
position:absolute;
left:670px;
top:115px;
width:264px;
height:59px;
}

#header-11 {
position:absolute;
left:298px;
top:174px;
width:667px;
height:26px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<div class="header">
<body style="background-color:#A50E0E; width: 965px; height: 200px; position:absolute;top:50%;left:50%; margin-top: -370px;margin-left: -473px;" onLoad="MM_preloadImages('images/images/header2_10.jpg','images/images/header2_09.jpg','images/images/header2_08.jpg','images/images/header2_07.jpg','images/images/header2_05.jpg','images/images/header2_04.jpg','images/images/header2_03.jpg')">
<script type="text/javascript">
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><!-- Save for Web Slices (header.psd - Slices: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11) -->
<div id="Table_01">
<div id="header-01">
<img src="images/images/header_01.jpg" alt="" width="298" height="200" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="15,12,270,195" href="http://www.bigcitymarketing.net/Home.html" alt="Home">
</map>
</div>
<div id="header-02">
<img src="images/images/header_02.jpg" width="667" height="28" alt="">
</div>
<div id="header-03">
<a href="http://www.bigcitymarketing.net/webdesign.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('webrollover','','images/images/header2_03.jpg',1)"><img src="images/images/header_03.jpg" name="webrollover" width="199" height="39" border="0"></a> </div>
<div id="header-04">
<a href="http://www.bigcitymarketing.net/socialmedia.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('socialrollover','','images/images/header2_04.jpg',1)"><img src="images/images/header_04.jpg" name="socialrollover" width="197" height="39" border="0"></a> </div>
<div id="header-05">
<a href="http://www.bigcitymarketing.net/businesscards.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cardsrollover','','images/images/header2_05.jpg',1)"><img src="images/images/header_05.jpg" name="cardsrollover" width="240" height="39" border="0"></a> </div>
<div id="header-06">
<img src="images/images/header_06.jpg" width="31" height="146" alt="">
</div>
<div id="header-07">
<a href="http://www.bigcitymarketing.net/marketing.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('marketingrollover','','images/images/header2_07.jpg',1)"><img src="images/images/header_07.jpg" name="marketingrollover" width="226" height="48" border="0"></a> </div>
<div id="header-08">
<a href="http://www.bigcitymarketing.net/products.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('productsrollover','','images/images/header2_08.jpg',1)"><img src="images/images/header_08.jpg" name="productsrollover" width="410" height="48" border="0"></a> </div>
<div id="header-09">
<a href="http://www.bigcitymarketing.net/ccprocessing.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('processingrollover','','images/images/header2_09.jpg',1)"><img src="images/images/header_09.jpg" name="processingrollover" width="372" height="59" border="0"></a> </div>
<div id="header-10">
<a href="http://www.bigcitymarketing.net/graphicdesign.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('graphicrollover','','images/images/header2_10.jpg',1)"><img src="images/images/header_10.jpg" name="graphicrollover" width="264" height="59" border="0"></a> </div>
<div id="header-11">
<img src="images/images/header_11.jpg" width="667" height="26" alt="">
</div>
</div>

<!-- End Save for Web Slices -->
</body>
</html>


I have tried multiple things but they either don't work or they mess up the image in firefox but work in IE...

Eliteoomph
12-28-2010, 08:11 AM
Finally figured it out for anyone else who has this problem...
Add a body tag
body {
text-align:center;
}

Change #Table_01 from this

position:absolute; to this
position:relative;

and add
text-align: left;

edbr
12-29-2010, 01:46 AM
position absolute burny fingers! use with caution

Eliteoomph
12-29-2010, 01:48 AM
lol whats that?

edbr
12-29-2010, 03:11 AM
if there hot dont touch is what it means :) having said that they definitely have a use for positioning elements but within relative prsitioned parents ( usually (divs)

Eliteoomph
12-29-2010, 04:43 AM
gotcha 8) thanks man!

Eliteoomph
01-02-2011, 05:54 AM
just noticed another problem that I believe originated from when I added the sliced header image.
Problem only seems to happen in Firefox
Basically what is happening is My site views properly in Full screen mode in Firefox but when I hits F11 it cuts off half of my header... or if I am in fullscreen mode and I move my cursor to the top of the page where my the toolbar drops down it cuts about 5% of the header off.
So for some reason if the web page isn't being pushed down in firefox...
Any ideas?