Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Cross Browser Rendering Problems (http://forum.bytesforall.com/showthread.php?t=7290)

Stevieb May 26, 2010 08:47 AM

Cross Browser Rendering Problems
 
1 Attachment(s)
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?

juggledad May 26, 2010 11:52 AM

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.

Flynn May 26, 2010 05:46 PM

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.

Stevieb May 27, 2010 04:28 AM

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.

theadventurebite May 27, 2010 08:40 AM

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....:confused:

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;
}

theadventurebite May 27, 2010 09:23 AM

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


All times are GMT -6. The time now is 12:29 PM.

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