CSS - Looks Great In Firefox, But Bad In Ie 5 (mac)

I'm pretty green with CSS (okay, ALL of html )

I used a template from Mollio.org, then modified it, problem is things just dont look right in IE.

url:
http://www.m87-blackhole.org/foo/

css file:
http://www.m87-blackhole.org/foo/css/wushuwest.css

js
http://www.m87-blackhole.org/foo/js/common.js

The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that?

Any ideas, pointers or resources?

Thanks,
Mike

I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages.


Here is one of the pages I am having trouble with in IE:

http://worldwidemediaproject.com/tvrating.php

You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera.

The strange thing is this one appears fine in IE:

http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all

but this one doesn't:

http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all

The only real difference is that the table size is larger in the pages that have display problems.

Is there some kind of IE hack that I need to apply?


Many thanks....

Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work?

Here is the url:

http://www.westcadet.com/designs/index.htm

Here is the CSS code snippet that is making this all work

Code:

/*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
	width:618px;
	height:100px;
	vertical-align:top;
}

#NavMenu {
	width:600px;
	padding-top:22px;
	
}

#NavMenu ul {
	list-style: none;
	margin-left:22px;
}

#NavMenu li {
	float: left;
	padding-left:8px;
	padding-right:8px;
}

#NavMenu li a {
	color:#FFFFFF;
	text-decoration: none;
}

#NavMenu li a:hover {
	color:#EB2A2D;
}

.NavChosen {
	background-color: #858181;
	color:#FFFFFF;
}

Check out this site (WIP)... the issue specifically is with the Screenshots table...

Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect.

Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page...

I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images.

What makes IE decide to expand the <div> tag automatically.

Here's the code pertaining just to the screenshots section.

Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks!

the CSS:
---------------------------------------------------------
.screenshots_table {
width: 100%;
border: 1px solid #000;
backgroung-color: #061840;
line-height: 15px;
}

#screenshots_table_overflow {
overflow: auto;
padding: 0px;
display: block;
}
---------------------------------------------------------

the html:
---------------------------------------------------------
/* --- START SCREENSHOTS CONTAINER --- */
// establish the number of screens in the directory
$dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/";
$screen_count = count (glob ($dir_path . "screen*.jpg"));

echo"<td colspan='5'>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
/* start screenshots details tab */
echo"<td>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
echo"<td><img border='0' width='38px' class='display_block'";
echo"src='images/tab_left.jpg'></td>";
echo"<td width='100%' background='images/tab_bg.jpg'></td>";
echo"<td><img border='0' class='display_block' width='70px'";
echo"src='images/tab_screenshots.jpg'></td>";
echo"</tr>";
echo"</table>";
echo"</td>";
/* end screenshots tab */
echo"</tr><tr>";

/* start screenshots */
echo"<td>";
echo"<div id='screenshots_table_overflow'>";
echo"<table width='100%' border='0' class='screenshots_table'";
echo" cellpadding='0' cellspacing='0'>";
echo"<tr>";

// iterate through loop and display linked screenshots as req'd
for ($i = 1; $i < $screen_count + 1; $i++) {
echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>";
echo "<a href='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox'
class='horizontal'><img border='0' class='border'
src='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/small" . $i . ".jpg' /></a>";
echo"</td>";
}

echo"</tr>";
echo"</table>";
echo"</div>";
echo"</td>";
/* end screenshots */
echo"</tr></table>";
echo"</td>";
/* --- END SCREENSHOTS CONTAINER --- */
---------------------------------------------------------

Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:

Code:

<body>
	<div id="issingle">
	<div id="container">
		<div id="sitename">
			<a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a>
		</div>
	<div id="mainmenu">
		<ul>
			<!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>-->

			<li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li>
			<li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li>

			<li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li>
		</ul>
	</div>

And here is the css pertaining to that code:
Code:

body {
	background:#fff;
	color:#303030;
	font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:850px;
}
#container {
	position: relative;
	background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
	color:#303030;
	border:1px solid #C8C8C8;
	margin:10px;
/*	padding:10px;*/
	text-align:left;
	height:598px;

}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
	position: absolute;
	right: 10px;
	top: 27px;
	margin-right: 5px;
}

#mainmenu li.page_item {
	float:left;
/*	height:35px;*/
	list-style:none;
	margin:0;
	padding:0;
}

#mainmenu a {
	border-right:1px solid #b0b0b0;
	color:#808080;
	display:block;
	margin: 0;
	padding: 1px 8px;
	text-transform:lowercase;
}

Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all.

Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info.

Thank you!!
J