FF is Perfect - IE....Not So Much

refiking · May 23, 2009

OK. So, here's the link:

http://www.mymonthlydinnerclub.com

In FF, the header images are centered how they are supposed to be. In IE, they are hard left. What needs to change? Here's the source code:

<!-- Codes by Quackit.com -->
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
	url,'popUpWindow','height=400,width=450,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

<html>
<head>
<title>My Monthly Dinner Club</title>
<meta name="description" content="Monthly Dinner Club, join today to save today!">
<link href="main.css" rel="stylesheet" TYPE="text/css">
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}

// -->
</script>

<script language="JavaScript" src="tFader.js"></script>
<script type="text/javascript" src="oodomimagerollover.js"></script>

</head>
<body topmargin="0" bottommargin="0" bgcolor="#222222" leftmargin="5" rightmargin="5" >
<table border="0" cellpadding="0" cellspacing="0" width="850" align="center">
<tr><td>
<script language="JavaScript">

// configuration structure
var A_TPL = {
	// randomize the array each time page loads
	'random' : true,
	// number of transparency changes during the transition
	//	increase for smoother transition, reduce for less CPU usage
	'steps' : 20,
	// transition duration in seconds
	'transtime': .5,
	// slide time in seconds
	'slidetime': 5,
	// width of the slide (optional)
	'width' : 200,
	// height of the slide (optional)
	'height': 200,
	// alt text for the image (optional)
	'alt' : 'Monthly Dinner Club',
	// css class assigned to the slide <img> (optional)
	'css' : ''
};

// list of images to display

var A_ITEMS = [
'images/header/1.jpg'
, 'images/header/10.jpg' , 'images/header/8.jpg' , 'images/header/9.jpg' , 'images/header/1.jpg' , 'images/header/7.jpg' , 'images/header/2.jpg' 	];

// fader initialization	
var mySlideShow = new tFader (A_ITEMS, A_TPL);

</script>
<img src="images/logo.png" srcover="images/logo.png" width="400" height="200" alt="" border="">
<script language="JavaScript">

// configuration structure
var A_TPL = {
	// randomize the array each time page loads
	'random' : true,
	// number of transparency changes during the transition
	//	increase for smoother transition, reduce for less CPU usage
	'steps' : 20,
	// transition duration in seconds
	'transtime': .5,
	// slide time in seconds
	'slidetime': 5,
	// width of the slide (optional)
	'width' : 200,
	// height of the slide (optional)
	'height': 200,
	// alt text for the image (optional)
	'alt' : 'Monthly Dinner Club',
	// css class assigned to the slide <img> (optional)
	'css' : ''
};

// list of images to display

var A_ITEMS = [
'images/header/1.jpg'
, 'images/header/10.jpg' , 'images/header/8.jpg' , 'images/header/9.jpg' , 'images/header/1.jpg' , 'images/header/7.jpg' , 'images/header/2.jpg' 	];
// fader initialization	
var mySlideShow = new tFader (A_ITEMS, A_TPL);

</script>
</td></tr>
</table>
<!-- begin navigation -->
<table cellspacing="0" cellpadding="0" border="0" width="850" align="Center">
<td>
<a style="text-decoration:none" href="home.php" border="0" alt="Home Page"><img src="images/nav_1.png" srcover="images/nav_1_over.png" border="0"/></a>
<a style="text-decoration:none" href="about.php" border="0" alt="Learn More About Us"><img src="images/nav_2.png" srcover="images/nav_2_over.png" border="0"/></a>
<a style="text-decoration:none" href="whybecome.php" border="0" alt="Discover The Amazing Benefits Today"><img src="images/nav_3.png" srcover="images/nav_3_over.png" border="0"/></a>

<a style="text-decoration:none" href="faqs.php" border="0" alt="Check Out Our Frequently Asked Questions"><img src="images/nav_4.png" srcover="images/nav_4_over.png" border="0"/></a>
<a style="text-decoration:none" href="join.php" border="0" alt="Click Here To Join Now"><img src="images/nav_5.png" srcover="images/nav_5_over.png" border="0"/></a>
<a style="text-decoration:none" href="diners.php" border="0" alt="View Our  Area Diners"><img src="images/nav_6.png" srcover="images/nav_6_over.png" border="0"/></a>
</td>
</table>
<!-- end navigation --><br><br>    <form action="start.php" method="post" name="form1">
<table height="75" width="250" align="center" background="images/box_over.png">
	<td align="center">
        	<select name="lid" onChange="Javascript:document.form1.submit()" 	style="font-size:16px; font-weight:bolder; background-color:#000000; color:#CCCCCC;">
<option>Select Your Location</option>
<option value="1">Atlanta</option><option value="4">Boston</option><option value="5">Minneapolis</option>			</select>

	</td>
</table>
</form>
<br><br><br><br><br><br><link href="main.css" rel="stylesheet" type="text/css" />
<div style="padding-top:25px">
<table style="font-family: Bookman Old Style; ;" background="images/footer.png" height="50" width="100%" align="left" cellspacing="0" cellpadding="0"><tr valign="middle">
<td align="center"><a href="home.php" style="text-decoration: none; color:#FFFFFF;">Home</a>	</td>
    <td align="center"><a href="about.php" style="text-decoration: none; color:#FFFFFF;">About Us</a>	</td>

    <td align="center"><a href="whybecome.php" style="text-decoration: none; color:#FFFFFF;">Why Become A Member</a>	</td>
    <td align="center"><a href="faqs.php" style="text-decoration: none; color:#FFFFFF;">FAQ'S</a>	</td>
    <td align="center"><a href="join.php" style="text-decoration: none; color:#FFFFFF;">Join Now</a>	</td>
    <td align="center"><a href="diners.php" style="text-decoration: none; color:#FFFFFF;">Participating Diners</a>	</td>
    <td align="center"></td><td align="center"><font color="#000000" size="3px">Design By </font><a href="http://www.kwebservices.com" target="_blank" style="text-decoration: none; color:#000000;"><strong>K Web Services</strong></a></td></tr>

</table>
</div>
</body>
</html>

fanfavorite · May 26, 2009

Try changing: <tr align="center"><td align="left"> to just <tr><td>. I would avoid using the align attribute altogether though and use CSS text-align in place of it.

dadamssg · May 27, 2009

wrap the header in a header div and then margin: 0 auto; to center it all

Sign In

FF is Perfect - IE....Not So Much

Recommended Posts

refiking

Link to comment

Share on other sites

fanfavorite

Link to comment

Share on other sites

dadamssg

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information