• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

Table Tab Menu: Cross Browser Issues

In the previous lesson, we got...

View live code here

The page looks fine in Internet Explorer 6.0 and Internet Explorer 7.0 and Firefox. But if you look at the page in Safari or Opera, you will see the following problem.

These cross-browser issues crop up every once in a while. It is a good idea to check your pages each step of the way in all the major browsers. That way you know exactly when these issues come up and exactly what code you had just added to cause the issue. In our case, we had just added the top margin to the tabmenu table.

The issue is that the header div (which is the one with the blue background) is sitting too low. What could have caused it to be pushed down. We know that we were trying to push the tabmenu table down with margin-top: 71px. But it should have only affected the tabmenu table and not the div. But someone on these browser there is this side effect. It turns out that if the problem only exists if the header div does not have a border. Okay so, we will let the header div have a top border...

And now the header div is positioned correctly...

But see the double border at the top. One top border is coming from wrapper div and another is the top border from the header div that we just added. Remove the top border from the wrapper div my changing the rule to be ...

The cross browser issue with Opera and Safari is now fixed. Check the page in various browser and it consistently looks good now.

View Live Code

At the time of this writing the browser that we tend to check for is Internet Explorer 7.0, Internet Explorer 6.0, Firefox, Safari, and Opera. If you are on a PC and can not check Safari on a Mac, there are various browser screen capture services available where you feed it the URL to your page and it gives you back a screen shot of what that page looks like in a particular browser. Or vice versa, if you are on a Mac and don't have access to a PC.

A well-known paid service is BrowserCam. But there are also some free services too such as BrowserShots, iCapture, ieCapture, BrowsrCamp, and NetRenderer.

Next Lesson: