Table & div image css issue - html

Question

Now resolved and updated. The primary issue was a css clash.
I have made a table that displays images and the images change in the center div based on mouse enter with JQ but i cannot seem to get the image to fit the main cell.
The desired result is as each image appears in the center, it should fit into the space perfectly, but i noticed when using fixed pixel sizing there is an issue with browser compatibility and the layout varies. When i tried with percentages it again does not seem to work as intended.
I have tried using css % and fixed pixel h/w but neither work as intended.
Am i approaching the desired result in the incorrect manner?
All advice appreciated, thanks!
http://www.digitalterrorrecords.com/home/featureTable.php << example of the below code
The html
<div>
<table>
<tr>
<td>
<? // Stacked Left BEGIN ?>
<table class=''>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_1 ;?>'></img></td> <!-- Artwork 1 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_2 ;?>'></img></td> <!-- Artwork 2 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_3 ;?>'></img></td> <!-- Artwork 3 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_4 ;?>'></img></td> <!-- Artwork 4 -->
</tr>
</table>
<? // Stacked Left END ?>
</td>
<td>
<? // Main feature BEGIN ?>
<table>
<tr>
<td class='mainbox'>
<div>
<!--
<div> <? // LOAD BACKGROUND ?>
<img src='<? echo $ft_img_bg ;?>'></img>
</div>
-->
<div id='lf_1' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_1 ;?>'></img>
</div>
<div id='lf_2' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_2 ;?>'></img>
</div>
<div id='lf_3' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_3 ;?>'></img>
</div>
<div id='lf_4' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_4 ;?>'></img>
</div>
<div id='lf_5' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_5 ;?>'></img>
</div>
<div id='lf_6' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_6 ;?>'></img>
</div>
<div id='lf_7' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_7 ;?>'></img>
</div>
<div id='lf_8' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_8 ;?>'></img>
</div>
`</div>
</td>
</tr>
</table>
<? // Main feature END?>
</td>
<? // Stacked Right BEGIN ?>
<td>
<table>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_5 ;?>'></img></td> <!-- Artwork 5 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_6 ;?>'></img></td> <!-- Artwork 6 -->
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_7 ;?>'></img></td> <!-- Artwork 7 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_8 ;?>'></img></td> <!-- Artwork 8 -->
</tr>
</table>
</td><? // Stacked Right END?>
</tr>
</table>
</div>
The css
td div {
height: 100%;
}
.small_feat {
width: 200px;
height: 200px;
border: solid 2px #ffffff;
}
.large_feat {
width: 800px;
height: 800px;
}
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
position:absolute;
z-index:50;
}
.smallbox {
width: 200px;
height: 200px;
}
The JQ
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
width: 'toggle'
}, "fast", easing, callback);
};
$(function () {
function select($link) {
$('.contact').each(function(index, l) {
var $pane = $($(l).attr('href'));
if ($pane.is(':visible')) {
$pane.slideFadeToggle();
}
});
$('.contact').removeClass('selected');
$link.addClass('selected');
$($link.attr('href')).slideFadeToggle();
}
function deselect($link) {
$($link.attr('href')).slideFadeToggle(function () {
$link.removeClass('selected');
});
}
$('.contact').mouseenter(function () {
var $link = $(this);
if ($link.hasClass('selected')) {
deselect($link);
} else {
select($link);
}
return false;
});
$('.close').live('click', function () {
deselect();
return false;
});
});

Answer 1

This is probably be the last possible answer... Check this out !
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
position:relative;
z-index:50;
width:100%;
}

Answer 2

To fix your styling issue remove the absolute positioning style from the messagepop class in your CSS. When you use absolute positioning it takes the element out of the natural flow of the page and it will no longer respect the height and width constraints of the parent element.
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
z-index:50;
}

Answer 3

i have looked at your page source and you have
.large_feat
{
width: 100%;
}
.large_feat_main
{
width: 800px;
}
however, you don't have a class .large_feat_main applied anywhere.
you have the .large_feat applied so it is stretching the image 100%,
change the width to 800px or change the class.
thanks

Answer 4

Check this out. As mentioned earlier, position:absolute was the problem.
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
position:relative;
z-index:50;
width:100%;
}