I'm trying to make a little gallery of some school works I've done in my animation class. I want to put 3 images on each line and they are all in divs because I did onion skin wrapping for a dropshadow on them. Unfortunately this makes them all just stick together in two lines across the page. But I want them specifically formatted so I tried to wrap a div of 480px wide around each set of 3. In IE this works great and it looks perfect. However in firefox it does this
I can't figure out why it is putting that one left aligned on the second line and therefore screwing up the order of the rest. Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ryan Merl's Portfolio</title>
<style type='text/css'>
* {
padding: 0px;
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
body {
background-color:#333333;
background-image: url('images/head.png');
background-repeat: repeat-x;
}
a {
color:#333333;
text-decoration: none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
div.main {
width: 800px;
background-color:#FFFFFF;
margin-top: 10px;
color: #000000;
height: 1000px;
margin-bottom: 10px;
}
img.thumb {
}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float:left;
background:url('images/shadow.gif') right bottom no-repeat;
}
.wrap2 {
background:url('images/corner_bl.gif') left bottom no-repeat;
}
.wrap3 {
padding:0 4px 4px 0;
background:url('images/corner_tr.gif' ) right top no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="doc/css/style.css" />
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript" src="glossy.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('en', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html','img', 'swf'], 'src/player');
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<body>
<center><div class='main'>
<img src='images/theantistudio.png' /><br /><br />
<img src='images/gallery.png' /><br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_particle_fire.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fire.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_firework.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_firework.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_fountain.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fountain.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_logo.flv' rel='shadowbox'><img class='thumb' src= 'thumbs/thumb_logo.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_rocket_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_rocket.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_solar_system.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_solar_system.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_space_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_space_ship.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_still_life.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_still_life.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_walkthrough.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_walkthrough.png' /></a>
</div>
</div>
</div>
</div>
</div></center>
</body>
</html>