The URL is http://www.collegecolosseum.com/testmain.php

In IE it displays fine, but in firefox I get extra space around the image with the chalkboard. Can anyone tell me why?

It looks like the height of the table cell containing the image is being controlled by the combined height of the cells to the right of it.

You'll have to make the combined height of those three cells a little less. I think it's about 20px - 25px.

Generally if you develop things for Firefox first and then make fixes for IE it tends to be easier and quicker to sort out the problems just for future reference.

vangogh - what do you mean by 20 - 25? It should be 20-25px less then the height of the picture?

You probley need to remove margins from a tag containing the image but to tell you the truth I would start learning xhtml because everything on that page is wrong. (Outdated code) tables are not designed to make a layout thats what css and div tags are for.

Ian the 20-25px was just a guess as to how much you need to reduce the three cells to the right. That wasn't meant to be a total height for all three.

The space I see on top and bottom of the image looks like it's about 20+px.

I'm thinking you'd want to take most of the px out of the middle cell News: I only saw the height explicitly set on the form in the top cell so I think you'll need to add specific heights to the other two cells and then play around with those heights until you get things looking how you want.

sin0cide, while I don't necessarily agree with the way he made his point (FYI dude...people are more receptive to tableless stuff if people don't cop elitist attitudes on them like that), is on to something.

What you can do is create a 900 x 265 pixel div with the College Colosseum graphic as the background for it, then create a right float for the text portion of it.

Something like this:

div#college-colosseum-slogan {
     width:  900px;
     height:  265px;
     overflow:  hidden;
     margin: 0;
     padding: 0;
     background:  URL(your picture goes here) top left no-repeat #4f4f4f;
}
div#login-box {
     float:  right;
     width:  300px;  /* adjust as appropriate */
     padding: 10px;
}

...
...
...

<div id="college-colosseum-slogan">
<div id="login-box">
Login stuff goes here
</div>
</div>

Mastering tableless layouts is like trying to get the coffee cup out of the hand of a spastic old rabid homeless woman. It's a ***** to do, but you feel so much better when you've conquered it. (Just take it a small step at a time.)

Originally Posted by ADAM Web Design

(FYI dude...people are more receptive to tableless stuff if people don't cop elitist attitudes on them like that

I see how that might have come off as rude but I never intended it to be that way and I was busy at the time I did. so I appoligize(even if I can't spell it)

The corresponding table cells are 103, 72, and 90 (going top to bottom) which totals 265 pixels. The image to the left is 264 pixels in a 265 pixel box. Considering each side equals 265 I can't determine the problem.

Originally Posted by sin0cide

I see how that might have come off as rude but I never intended it to be that way and I was busy at the time I did. so I appoligize(even if I can't spell it)

All is well. I didn't think it was your intention (it's not really the way most people mean for things to come out); it's just one of those things that happens when people know something. I do it all the time.

Originally Posted by collegec

The corresponding table cells are 103, 72, and 90 (going top to bottom) which totals 265 pixels. The image to the left is 264 pixels in a 265 pixel box. Considering each side equals 265 I can't determine the problem.

Did you try the div suggestion yet?

Originally Posted by ADAM Web Design

Did you try the div suggestion yet?

Adam to be honest I don't know anything about CSS, div tags, floats, etc. I wouldn't even know where to begin to use that code you provided.

Ian, I'm thinking there is extra height in paddings and margins and things like that.

When I reduced the height of top cell on the right by 20px the space around the image was mostly gone. There was still a few px of space left which is why I think it's closer to 25px that needs to be removed.

Just try taking about 8 px away from the height of each of the cells and see if if the space around the image goes away. If it works then adjust the heights until you get a look you're happy with.