Trouble with rollover image in div

Question

Hello there,
I am having some trouble with the following.
I want to create a rollover image 90 pxl x 90 pxl and put it inside a div 90 pxl x 90 pxl.
The div is inside other divs and makes up a kind of a table. I checked that all the div and image sizes are the same but when I place the cursor inside the div and select 'insert rollover image', my images are all squashed up and don't appear normal size. Very odd.
Here is some of my code:
CSS of div (I want to put my image inside smallBox01a)
#Header #rightColumn #smallBox01 {
    height: 90px;
    width: 270px;
#Header #rightColumn #smallBox01 #smallBox01a {
    float: left;
    height: 90px;
    width: 90px;
HTML
      <div id="smallBox01a"><a href="tobi.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tobi','','Images/TobiOver.jpg',1)"><img src="Images/TobiOff.jpg" alt="Tobi" name="tobi" width="90" height="90" border="0" id="tobi" /></a></div>
Poor old Tobi cat's face is all squashed up. Any idea what is going wrong? I don't have any padding within the div either.
Thanks!
PS I also should add that when I tried to simply add in one of the Tobi images instead of the rollover image, it appeared perfectly fine within the div. It is only the rollover that is getting vertically squashed up.

Answer 1

So, I've been playing around with your page in dreamweaver and I put a <div> container around your entire web page and then set the width to 1200px. That contained all the contents so that when you re-size the web page the contents don't colapse.
Not sure if that's what Murray or Nancy mean and am curious if their is a better way.
That would work although 1200px is too wide.  Something along the lines of 1000px would be better, since you want the page to display in a maximized browser viewport on a 1024 screen without dropping horizontal scrollbars.  I still use 960px as a maximum width....
Re the centering of the page: Good question I would like to know how to do it "properly"
In the CSS body rule I put:  margin-left: 20%;
                                            margin-right: 20%;
Again, I'm not sure if that's the correct way to center the page, and would like to know a better way.
It's not the best way to do this, which would be to use a fixed width container (as you have done) and just assign it left/right margin settings of 'auto', e.g.,
#container { width:960px; margin:0 auto; }
You can center *any* block element within its container with this method.