Rendering differences of a relatively positioned element across browsers

Question

I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.

A page where both issues are visible: http://www.totemtravel.com/blog

Issues:

1. The white flag with the logo on it at the top of every page jumps several inches to the right to cover the area code of the first phone number.
2. The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.

I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.

I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.

Answer 1

1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.

2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/ . The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.

3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML