Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] IE & Chrome issues with background and logo/header


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 11, 2012, 04:40 PM
tsheridan
 
92 posts · Mar 2011
[SOLVED] IE & Chrome issues with background and logo/header

I used the following code that I found in a post in the Gold Forum to display 2 background images and all is good on all browsers except IE:

background: url(/wp-content/images/header-bg.jpg) left top repeat-x, #e3cdb5 url(/wp-content/images/wood-bg.jpg) top left repeat;

I use this same code on my own site and it works fine in all browsers, so I'm not sure why the IE problem here. I've actually never had compatibility issues with Atahualpa before!

I have a logo and rotating header images on this same site, and everything displays fine in all browsers except for chrome. Again, I can't figure out what I've done, and I've searched the forums with no luck in either case.

The URL is www.blackberrymorganhorses.com, WP 3.3.1, Atahualpa 3.7.3.

Thank you, I feel like I owe you guys a 12-pack or something, so I'll head over and ante-up. You guys are always so much help!
  #2  
Old Apr 11, 2012, 05:28 PM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what version of IE?
did you set the doctype (ato->Style & configure LAYOUT->IE Document Type)?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 11, 2012, 05:35 PM
tsheridan
 
92 posts · Mar 2011
IE 7 and 8 (don't have 9 yet), and no, I've never set any doctype other than what the default is.
  #4  
Old Apr 11, 2012, 06:47 PM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try this, change the body to
HTML Code:
body {
	text-align: center;  /* centering the page container, 
							text-align will be reset to left 
							inside the container */
	margin: 0;
	padding: 0;
	font-family: tahoma, arial, sans-serif;
font-size: 0.8em;
color: #000000;
background: url(http://www.blackberrymorganhorses.com/wp-content/images/header-bg.jpg) left top repeat-x	}
and add this to the CSS Inserts
HTML Code:
html {
background:  url(http://www.blackberrymorganhorses.com/wp-content/images/wood-bg.jpg) top left repeat;	}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Apr 12, 2012, 08:47 AM
tsheridan
 
92 posts · Mar 2011
Thanks Juggledad, but unfortunately this did not work for the background images. It fixed the header issue problem in chrome however. When I added the second background image to the inserts section, it actually broke the menu options I had in that section also. IE is now displaying the first background image fine however, but not the look I was going for.
I was mistaken in my first post, in that this double background image method did not work on my own site in IE. So is this method just not going to be compatible with IE then, or do you think there's a hack for this?
  #6  
Old Apr 12, 2012, 08:56 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Look ing at the source of the page I see for the body CSS
HTML Code:
body {
	text-align: center;  /* centering the page container, 
							text-align will be reset to left 
							inside the container */
	margin: 0;
	padding: 0;
	text-align: center;  /* centering the page container, 
							text-align will be reset to left 
							inside the container */
	margin: 0;
	padding: 0;
	font-family: tahoma, arial, sans-serif;
font-size: 0.8em;
color: #000000;
font-family: tahoma, arial, sans-serif;
background: url(http://www.blackberrymorganhorses.com/wp-content/images/header-bg.jpg) #E2D1B7 left top repeat-x;	}
besides teh duplicate lines, get rid of the '#E2D1B7'
second, I don't see teh
HTML Code:
html {
background:  url(http://www.blackberrymorganhorses.com/wp-content/images/wood-bg.jpg) top left repeat;	}
anywhere in the CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Background and banner are aligned in Firefox, slightly off in Chrome and IE... ameliecafe Atahualpa 3 Wordpress theme 3 Jun 5, 2011 02:33 PM
[SOLVED] Weird whitespace between header image and logo area background inkdork Header configuration & styling 3 Mar 24, 2011 09:20 PM
Logo Issues Cali Header configuration & styling 6 Mar 16, 2009 04:59 AM


All times are GMT -6. The time now is 12:23 AM.


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