Centering in Internet Explorer but not Firefox or Chrome

Page 1 of 1

5 Replies - 11407 Views - Last Post: 21 November 2010 - 02:06 AM

#1 yadsmood  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 25-April 09

Centering in Internet Explorer but not Firefox or Chrome

Posted 30 March 2010 - 11:52 AM

Hi. I am helping a friend with a website and we are having a problem with one of the images. In Internet Explorer the image is centering (which is what we want) and the image is not centering in Firefox or Chrome. You can see the website here. The image we are having problems with is the top image above About us (in the code it is 1.jpg).

Here is the index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>The End of A Dream</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>Kamesaru Dojo - Japanese Swordsmanship</title> 
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="description" content="Welcome to Kamesaru Budo, an organization dedicated to the advancement of martial arts and philosophy in the greater Sacramento area.  We are currently a certified Muso Jikiden Eishin-ryu Iaijutsu study group with the Kokusai Nippon Budo Kai / Jikishin Kai International.. "> 
<meta name="keywords" content="avalon arts, avalon, avalon arts center,Japanese swords, sword, Sword class, aikido class, jo class, Swordsmanship, Eishin ryu, Itto ryu, budo, aikido, Jojutsu, martial arts, Sacramento martial arts, Carmichael martial arts,class,learn, sacramento, Carmichael, Japanese, arts"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
    <style type="text/css"> 
        .style1
        {
            width: 109px;
        }
    </style> 
</head> 
<body> 
<table width=780 border=0 cellpadding=0 cellspacing=0 align="center" 
        style="background:url('2.jpg') no-repeat;" bgcolor="ActiveBorder" 
        frame="border"><img src="1.jpg" border=0><tr><td valign="top" class="style1"></td> 
<td colspan=2  valign="top" style="background:url('') no-repeat;" width=191> 
<!--START OF NAVIGATION--> 
<h1>About Us</h1> 
&nbsp;<a href="main.htm" target=man>Main</a><br> 
&nbsp;<a href="instructors.htm" target=man>Instructors</a><br> 
&nbsp;<a href="contact.htm" target=man>Contact</a><br> 
&nbsp;<a href="location.htm" target=man>Location</a><br> 
&nbsp;<a href="schedule.htm" target=man>Schedule</a><br> 
&nbsp;<a href="aff.htm" target=man>Affiliations</a><br> 
<h1>Japanese Swordsmanship</h1> 
&nbsp; <a href="sword.htm" target=man>About</a><br> 
&nbsp; <a href="iai.htm" target=man>Iaijutsu</a><br> 
&nbsp; <a href="ken.htm" target=man>Kenjutsu</a><br> 
&nbsp; <a href="tam.htm" target=man>Tameshigiri</a><br> 
<h1>Aikido</h1> 
&nbsp; <a href="aikido.htm" target=man>About</a><br> 
<h1>Kempo</h1> 
&nbsp; <a href="kempo.htm" target=man>About</a><br> 
<h1>Jodo</h1> 
&nbsp; <a href="jodo.htm" target=man>About</a><br> 
&nbsp; <a href="shin.htm" target=man>Shindo Muso Ryu Jojutsu</a> 
<h1>Galleries<h1> 
&nbsp; <a href="404.htm" target=man>Sword</a><br> 
&nbsp; <a href="aikidogallery.htm" target="_blank">Aikido</a><br> 
&nbsp; <a href="404.htm" target=man>Jodo</a><br> 
<!--END OF NAVIGATION // DO NOT EDIT ANYTHING BELOW--> 
</td> 
<td valign="top"> 
</td> 
<td colspan=3 width=413 valign="top" style="background:url('') no-repeat;"> 
<!--START OF CONTENT--> 
    <iframe name=man src ="main.htm" frameborder="0"
                       
        style="width: 99%; margin-right: 0px; margin-left: 0px; height: 675px;" 
        allowTransparency="true"> 
</iframe> 
 
<!--END OF CONTENT--> 
<h1>Designed by <a href="miss-satori.deviantart.com" target="_blank">Miss-Satori</a></h1> 
</td> 
<td valign="top"> 
    &nbsp;</td> 
</tr> 
<tr> 
<td class="style1"> 
<img alt="" src="images/spacer.gif" width=82 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=113 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=78 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=19 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=98 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=195 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=120 height=1></td> 
<td> 
<img alt="" src="images/spacer.gif" width=75 height=1></td> 
</tr> 
<tr> 
<td colspan=8> 
    &nbsp;</td> 
</tr> 
</table> 
<map name="image_01_Map"> 
<area shape="rect" alt="Designed by Aethereality.net" coords="2,1,10,161" href="http://aethereality.net" target="_blank"> 
</map> 
</body> 
</html>


Here is the style.css:
body,div,td
{
	font-size:14px;
	color:#FFFFFF;
	font-family:garamond; 
	line-height:15px;
	letter-spacing:1px;
	cursor: default;
}

body
{
	background:#34404e;
	margin:0;
	
}


A:link,A:visited,A:active,b
{
	text-decoration:none;
	color:#83a0ff;
	letter-spacing:2px;
	word-spacing:2px; 
}

a:hover
{
	text-decoration:none;
	color:#83a0ff;
}

h1
{
	font-weight:bold;
	letter-spacing:2px;
	border-bottom:1px solid #000000;
	padding-left:3px;
	padding-bottom:3px;
	font-size:11pt;
	color:#C8D5A4;
}


Any help you can give would be greatly appreciated.
~yadsmood

Is This A Good Question/Topic? 0
  • +

Replies To: Centering in Internet Explorer but not Firefox or Chrome

#2 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Centering in Internet Explorer but not Firefox or Chrome

Posted 30 March 2010 - 11:57 AM

Try putting the image inside of the <td> tags. Maybe that will work.
Was This Post Helpful? 0
  • +
  • -

#3 SeiferMaster  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 27
  • Joined: 28-October 09

Re: Centering in Internet Explorer but not Firefox or Chrome

Posted 30 March 2010 - 08:45 PM

Put your top image in a div and align it center. Should fix it.
Was This Post Helpful? 0
  • +
  • -

#4 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Centering in Internet Explorer but not Firefox or Chrome

Posted 31 March 2010 - 02:07 PM

After looking at it for a bit, I realized all you need to do is apply some inline style to your image thats off-center.
style="display: block; margin: 0 auto;"


What this does is margin: 0 auto applies a 0 margin to the top and bottom of the img and a value of auto to the left and right (Which will center the image). Margin values of auto only apply to block level elements, so we declare this image a block level element by using display: block.

Check out the tutorials on CSS at http://www.w3schools...css/default.asp. They will help you a lot with your websites.

You should also try to fade out of tabled layouts and into table-less layouts.
Was This Post Helpful? 0
  • +
  • -

#5 Guest_MONJUHost*


Reputation:

Re: Centering in Internet Explorer but not Firefox or Chrome

Posted 19 November 2010 - 11:46 PM

Yadsmood,

I had very much the same issues - image centered correctly in IE8 etc., BUT not in FireFox nor Chrome or any of the Netscape/Gecko derived browsers. I went nuts trying to resolve it. But I did.

This is a late post I am replying to [ when I looked at the timeline ] however I see your site is still not fixed in Firefox when I clicked on your URL - and since I practise KI-AI-KI-DO and love my swords I felt the urge to help and not pass on this request for guidance.

One Buda helping another Buda - positive karma!

So, here goes and here's what worked for me in centering my image in FireFox, Chrome etc., and pls note it worked FINE in IE8 before this code was implemented, just as in your scenario...and still worked in IE8, IE7, IE6, IE5 afterwards as well - miracle!

The "Mac Backslash Hack" is in there. The normal function of this hack is to get IE5/Mac to ignore any CSS rules contained within the hack’s boundaries. This hack works by escaping an end-comment marker using a backslash before the asterisk: \*/. You can change he background colour OR remove the hack if you don't need it.

Try this in your index page, the main thing is 'wraptocenter' and as the previous reply to your post noted 'display: block; margin: 0 auto;'

Hope this helps and if it doesn't fix it immediately I am certain whats contained here is all you need to get a workaround fix by trial and error - what is below worked for me though straightaway ( although it took me many hours to get it right ).

Here is a link I used which set me in the right direction > http://www.brunildo....img_center.html

Good Luck !!
</head>
<style type="text/css">
$(document).ready(function(){
height = $(’#wrap’).height();
$(’#right_side’).css(”height”,height);
});
body {
    background: blue; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */
    /* commented backslash hack for IE5-Mac \*/
    background: white;
    /* end hack */	
}
.wraptocenter {
    display: block; margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 50%;
}
</style><![endif]-->

<div class="wraptocenter"><span></span><img src="1.jpg">

This post has been edited by macosxnerd101: 21 November 2010 - 09:06 AM
Reason for edit:: Please use code tags

Was This Post Helpful? 0

#6 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Centering in Internet Explorer but not Firefox or Chrome

Posted 21 November 2010 - 02:06 AM

yadsmood you don't need javascript to centre images.

#header{
width:whatever the size is;
height:whatever the size is;
margin:0px auto;
}

<div id="header"><img src="yourimage.jpg"></div>


Now your image should be centred in all browsers (except IE6 and 5.5)

Also don't use tables for the layout of your site - tables are for displaying data.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1