Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Cross Browser Rendering Problems

Old May 26, 2010, 07:47 AM
2 posts · May 2010
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?
Attached Thumbnails
Click image for larger version

Name:	Screenshot.png
Views:	712
Size:	91.8 KB
ID:	508  
Old May 26, 2010, 10:52 AM
juggledad's Avatar
23,614 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old May 26, 2010, 04:46 PM
Flynn's Avatar
3,768 posts · Oct 2008
Munich, Germany
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.
Old May 27, 2010, 03:28 AM
2 posts · May 2010
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.
Old May 27, 2010, 07:40 AM
136 posts · May 2010
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;
Old May 27, 2010, 08:23 AM
136 posts · May 2010
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.....



Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Cross browser Vertical Menu Fix yakker Page & Category Menu Bars 0 Apr 23, 2010 09:16 AM
Browser compatiblity and site validation problems GlobalNeat Atahualpa 3 Wordpress theme 9 Mar 24, 2010 06:26 PM
Cross Browser Issues. Juslyn Atahualpa 3 Wordpress theme 1 Aug 6, 2009 12:17 PM
Resolution and onthe browser problems meK Header configuration & styling 3 Jun 15, 2009 10:34 AM

All times are GMT -6. The time now is 04:10 PM.

Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.