Hi Guys,

Firstly, what a great theme, so easy to use and configure; great work! I am contemplating making a change to the theme on a full time basis, just now I'm at the testing and checking my plugins are compatible on the localhost dev environment here at home.

The only problem I have, is the cross browser rendering. Everything is great in Firefox, however Chrome, Safari and IE don't seem to be working out as well. Chrome and Safari to a lesser extent, and IE is the worst off.

See below screenshot. Any advice?

Welcome to the wonderful world of cross browser support!

IE is the worst browser, even IE8 laggs way behind the other borwsers for CSS Support. Do a google search with the css property you are using to see what browsers support it.

The round corners and shadows are created with CSS. To make them work in the other browsers you'd have to use Javascript (or images), i.e. http://www.dillerdesign.com/experiment/DD_roundies/ for round corners in IE.

Using a lot of Javascript for (many) round corners and (many) shadows can slow down the rendering process in the visitor's browser. Using images isn't flexible.

Thanks guys.

Looks like I have a long day in front of Google ahead of me! CSS has never been something I have gotten to familiar with, looks like it's about time I did!

I was hoping for a quick simple fix, however as with most of these things it's usually not the case!

Appreciate your time guys, cheers.

This is exactly what mine is doing! But on top of it in Firefox and Chrome when I try to adjust the spacing within the tabs to wider....nothing happens. But IE picks it up and it looks terrible...

I picked this theme because it said it was cross browser compatible and I am about the rip my hair out from fighting with these browser issues.....please help. I am beyond frustrated with this....

My site is www.theadventurebite.com

Here is my CSS for the tabs issue:

td#header {
padding-bottom: 15px;
}
/* removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */
td#middle {
padding: 0;
}
div.searchbox-form {
margin: 5px 0 15px 5px;
}
div#menu1 ul.rMenu {
background: transparent;
border: none;
}
div#imagecontainer {
border-top: solid 5px #333;
border-bottom: solid 5px #333;
}
div.widget ul li {
padding: 1px 5px 1px 12px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/round-gray.gif') no-repeat 0 7px;
}
/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 6px; }
ul.rMenu-hor { padding-left: 5px; }
ul.rMenu-ver li { margin-top: 0xp; }
}
ul.rMenu a:link,
ul.rMenu a:active,
ul.rMenu a:visited,
ul.rMenu a:hover {
padding: 0px 90px !important; /* 4px top/bottom, 20px left/right padding */

}

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
}
/* round corners for page menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

I have changed this over to the rounded edges theme and tweeked it a little to make it look okay for now....so the site wont show the problem anymore. But still would be interested in any insights into this.....

Dani