Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Cross Browser Rendering Problems


  #1  
Old May 26, 2010, 07:47 AM
Stevieb
 
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:	1077
Size:	91.8 KB
ID:	508  
  #2  
Old May 26, 2010, 10:52 AM
juggledad's Avatar
juggledad
 
23,765 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
  #3  
Old May 26, 2010, 04:46 PM
Flynn's Avatar
Flynn
 
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.
  #4  
Old May 27, 2010, 03:28 AM
Stevieb
 
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.
  #5  
Old May 27, 2010, 07:40 AM
theadventurebite
 
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;
}
  #6  
Old May 27, 2010, 08:23 AM
theadventurebite
 
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.....

Dani

Bookmarks

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 10:04 AM.


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