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? |
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....: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; } |
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 04:57 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.