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 » Sidebars & Widgets »

[SOLVED] Widget and Header Styling (rounded corners etc) work in Firefox, but not IE9


  #1  
Old Mar 9, 2012, 10:04 AM
CatalystCooks
 
11 posts · Feb 2012
Minneapolis, MN
Send a message via Skype™ to CatalystCooks
Hi there,
I have been relying on Firefox and Firebug to do much of my work on my beta site, http://69.89.31.130/~catalyu8/ . Went to Internet Explorer and much of my formatting is not "taking"- most obvious examples are the rounded corners on my widgets and header, the shadow on my header. Here is an example of the CSS I have in the HTML/CSS Inserts Ata tab that is working in Firefox but not in IE9:

Quote:
/* Controls the Header (background) image having rounded corners and shadow */
div#imagecontainer {
border: transparent;
padding: 5px 10px 10px 10px;
box-shadow: 0 0 20px #333 !important;
-moz-box-shadow: 0 0 20px #333 !important;
-moz-border-radius:10px !important;
-khtml-border-radius: 10px !important;
-webkit-border-radius:10px !important;
border-radius: 24px !important;
}
Any ideas???? I figure some new eyes on this problem may help!
  #2  
Old Mar 9, 2012, 10:25 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
That's because some of that is CSS3. This might help at least for some of the CSS3.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Mar 9, 2012, 10:30 AM
juggledad's Avatar
juggledad
 
23,750 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
looks good, try removing the
HTML Code:
-moz-box-shadow: 0 0 20px #333 !important;
-moz-border-radius:10px !important;
-khtml-border-radius: 10px !important;
-webkit-border-radius:10px !important;
and see what happens, ie has always been pickey... I don't have a ie9 capable machine so I can't test it for you.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Mar 9, 2012, 12:38 PM
CatalystCooks
 
11 posts · Feb 2012
Minneapolis, MN
Send a message via Skype™ to CatalystCooks
Hi guys!
Larry- thanks much- the CSS3 PIE solution worked. Brilliant.

JDad- thanks to you too- just a note that apparently the statements you suggested be removed actually make that CSS3 formatting work in other browser formats, though when I removed it it still worked in Firefox (Mozilla which is the -moz statements). Not sure what webkit is but I think I'll leave them in there just to be safe (?)

Issue closed... thanks!

Bookmarks

Tags
firefox, header image border, ie9, rounded corners, widget area style

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Layout Container - Rounded corners in Firefox 3.6.13 not working. jeffm2008 Page & Category Menu Bars 3 Jan 23, 2011 08:52 PM
[SOLVED] Any way to set style for Header Image (Rounded corners) juggledad Header configuration & styling 5 Apr 10, 2009 02:53 PM


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


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