CSS - Trouble Displaying Images In Ff, Works Great In Safari

Please look at the menu on this page,

http://www.dougswansonre.com/

In IE7 it looks perfect, in FF it looks terrible???

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 --- */
---------------------------------------------------------

Here's the CSS excerpt:

div#uhgWrapper
{
width: 320px;
height: 268px;
}
div#uhgWrapper[footerIncluded="false"]
{
height: 310px;
}
body[orient="landscape"] div#uhgWrapper
{
width: 50px;
height: 50px;
}
body[orient="landscape"] div#uhgWrapper[footerIncluded="false"]
{
height: 50px;
}


this works great for Safari on the desktop but, the last two elements aren't recognized on Safari on the iPhone.

Any suggestions?

TIA

I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css
Code:

<!--[if IE]>QU
            <link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"      
            type="text/css">       
 <![endif]-->

Here is the menu system:

Code:

menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
         '<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
         '<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
         '<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
         '<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
         '<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
         '<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
         '</li></ul></li></ul></div>';

(It rests inside of a javascript function)

and here is the CSS:
Code:

/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0;   font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;} 
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul, 
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Any help with this is greatly appreciated. Thanks.

I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong.

I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari.

Here is the link:
http://gregsgoods.com/seestore.php

In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it.

Here is the CSS code:
Code:

html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {
color: #005B9C;
}

a:hover {
color: #0B2444
}

img {
border: 0;
}

body {
	background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
	color: #ccc;
	font: normal 62.5% Tahoma,sans-serif;
}

p,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
	color: #005B9C;
	margin: 0 0 7px 0;
}

h2 {
	font: normal 1.3em Tahoma,sans-serif;
	margin-bottom: 1px;
	color: #005B9C;
	margin: 0;
}


.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

.container {
	position: absolute;
	left:50px; 
	top:188px;
	background-color: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 8px 8px;
	width: 780px;
}


.top {
	padding: 8px 8px 0;
}


.header {
	position: absolute;
	left:50px; 
	top:10px;
	background-color: #fff;
	font-size: 1.2em;
	height: 173px;
	margin: 0 auto;
	padding: 8px 8px 5px;
	width: 780px;
}
.header .left, .header .right {
	background-color: #000033;
	color: #fff;
	color: #FFF;
	height: 163px;	

}
.header .left {
	background: transparent url(/img/Top.jpg) top left repeat-x;
	border: 1px solid #7795BD;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 163px;
	width: 777px;
	text-align: left;	
	
}

.header .right div {
	padding-left: 16px;
	padding-top: 16px;
	font: normal 1.6em "Trebuchet MS",sans-serif;
}




.navigation {	
	background: #D9E1E5 url(/img/nav.jpg);
	border: 1px solid #7795BD;
	height: 23px;
}
.navigation a {
	background: transparent url(/img/nav.jpg) left top repeat-x;
	border-right: 1px solid #7795BD;
	color: #fff;
	display: block;
	float: left;
	font-size: 12px;
	font-family: Arial;
	font-weight: bold;
	line-height: 23px;
	text-decoration: none;
	padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom; 
color: #f1f1f1;
}


.main {
	border-top: 8px solid #FFF;
	background: url(/img/bgmain.jpg) repeat-y;
}


.sidenav {
        float: left;
	margin: 5px;
	width: 195px;
}
.sidenav h2 {
	color: #333300;
	font-size: 1em;
	font-weight: bold;
	line-height: 30px;
	margin: 5;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
	font-size: 1.1em;
	color: #333300;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background-color: #ebebeb;
	color: #654;	
}

/* content */
.content {
        float: right;
	margin: 5px;
	padding: 0 16px;
	width: 536px;
}
.content {
	color: #666;
	font-size: 1.0em;
	margin-bottom: 6px;
}


.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}



.footer {
	background: url(/img/bluefooter.jpg) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	line-height: 39px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}