Cross Browser Headaches...

[TheJoshMan]

Well, here goes...

I'm working on a tabbed menu in which the tabs will "change colors" and "pop up" upon rollover... Small task which is seemingly easily achieved with css. NOT

I have it working just fine and dandy in IE 5+ but when it comes to FF, well... not so much.

I've tried every possible avenue of approach that I know to get this to work in both browsers. None of which have worked. I've tried everything from using two images with a class for normal and "hover", I've tried a single image with relative positioning and negative x-position on hover, I've tried the ":focus" method... I just can't seem to figure out what the problem is.

Everything works just fine when I view it in IE, it also works properly when I view it in the integrated browser in EditPlus3. (my text editor of choice)

However, in FF the images being used as the background do not even show up, the space where they should be is filled up with the overall background image used in the page. When you mouse over the images in FF they do appear, but NOWHERE near where they should be. They're far too low. Only the top portion shows up... and it's at the very bottom.

Below are two links. One is a screenshot of what I'm seeing in FF, the other is a direct link to a test page which includes the css I'm using. (rather, TRYING to use)

Screenshot Link (http://www.m-pulsedesigns.com/Problems/images/Screenie.jpg)

Test Page Link (http://www.m-pulsedesigns.com/Problems/test.html)

[rangana]

Fix your CSS Error (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.m-pulsedesigns.com%2FProblems%2Ftest.html&profile=css21&usermedium=all&warning=1&lang=en), and add the display:block.

Take this part as an example:


.Blogs, .Blogs:a, .Blogs a:link, .Blogs a:visited, .Blogs a:active{
background-image:url('images/Blogs.jpg');
display:block;
}


First highlight in red is erroneous (as depicted on validator). The second highlighted (in red) should be added since FF displays your tabbed really odd.

Hope it helps.

[TheJoshMan]

Hey thanks alot... The "display:block;" worked (sorta).

I also had another error in my css that I didn't catch.
In the long list of things in which to apply the attributes, I had the ".Home, .Blogs, .Pictures, .Add, and .Message" in there as well which are the classes which were applied to the "td" for each button. So adding "Display:block;" worked fine on the first button, but every button thereafter would be beneath the one before it.

Anyway, long story short... Your answer was correct and after a few minor tweaks I got it all working.

Thanks a million!