Works in Opera, glitches in FF and IE

[Sashi]

Okay, I'm working a new template for a PHP based image site, and I originally developed it in Opera since that was my main browser up until a few days ago. Before I begin, I guess I should give a little info on the layout's design. It's a CSS based layout, replacing tables with DIVs. This is my first time really working on something like this, and is probably the source of most of my problems with the template. You can find the main file at [url=http://www.durhamlucas.com/test/ims/index.php]http://www.durhamlucas.com/test/ims/index.php[/url] and the CSS file at [url=http://www.durhamlucas.com/test/ims/templates/goth-pink/style.css]http://www.durhamlucas.com/test/ims/templates/goth-pink/style.css[/url]

In Firefox 2.0 it has two glitches, and I'm not sure what is the exact cause of the problem. The first one is that the main content area is shoved down three pixels farther than it should be with my code. Don't know why it does it, but it's always fixable with a little CSS hacking, and as such is only a minor problem. The other problem, which is quite major, is when you hover over one of the two tab links. These are the ones over the grouping of 10 thumbnails, named [b]New[/b] and [b]Favorites[/b]. In the stylesheet I have the following code for the those two links:

[code]/* Gives the thick underline feature to the image tabs... tabs ^^; */
a:link.tab    {text-decoration: none; color: #09e5ff;}
a:visited.tab {text-decoration: none; color: #09e5ff;}
a:active.tab  {text-decoration: none; color: #09e5ff;}
a:hover.tab  {text-decoration: none; color: #09e5ff; border-bottom: 2px solid #09e5ff; padding-bottom: 5px;}[/code]

When you hover over either of those links, it butchers the layout pretty bad. I'm not sure why, but I have narrowed down the specific code that is causing the problem, or maybe is just having compatibility problems with other code or the browser itself. It's specifically the last two attributes of the [b]a:hover.tab[/b]. If I remove [i]both[/i] of those attributes, it doesn't glitch in Firefox. But of course I am then missing the effect that I want. Both of these glitches are Firefox specific.

Now onto the Internet Explorer 7. This one has three main glitches, all specific to that browser. Two are minor (although need to be fixed to keep things professional looking) and another one is major. Those two double arrow things above the second set of thumbnails aren't the same size, even though they are given their size from the same piece of code, namely:

[code].rec-arrow-left, .rec-arrow-right {
font-size: 1.5em;
margin-top: -10px;
font-weight: bold;
}[/code]

Next is that the background for the top info bar (the one that says, "Pants? No no no, that won't work. *sigh*") does not display, yet it does in the other two browsers.

Finally, the major problem is that the content background (the white one) doesn't fill in the full area. I'm not 100% sure why it does it, and I definitely don't know how to fix it and still achieve the layout I want, but I think it has to do with all the content holders (DIVs) are floated one way or the other.

When making this, to achieve the effects I needed, such as having the thumbnails centered on both the X and Y axis, and having trouble with the backgrounds not showing up for the content holder DIVs, I had to set various elements to display as tables and table cells, which to my knowledge is not the best way to go around doing things.

So basically, I'm curious if anyone can help me locate and fix these problems, or suggest ways to code it that will achieve the effect I want while cutting out the glitches. Basically if I can get it to work in Opera, Firefox, and IE like it currently does in Opera, without using tables to design the layout, then I'll be happy. Thanks in advance, and if you need any more info just ask me. Oh yeah, my document validates as XHTML 1.0 Transitional if I'm not mistaken.

P.S. Sorry about the broken image in the top left. I had to alter my various files so that they weren't pointing to files on my computer's server (which you couldn't access anyways, it's just for development purposes), and I really don't want to edit it for the web again :P