Wordpress Themes - WP Forum at BFA - [SOLVED] 3.7.12 - Header image will not scale in IE8

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- New Versions, & Updating (http://forum.bytesforall.com/forumdisplay.php?f=12)

- - [SOLVED] 3.7.12 - Header image will not scale in IE8 (http://forum.bytesforall.com/showthread.php?t=20759)

thetravelchronicle

Aug 11, 2013 09:36 PM

[SOLVED] 3.7.12 - Header image will not scale in IE8

3.7.11 works fine on a different site, but this is on a new website so I may be missing some setting somewhere.

Yes, I have added this to the HTML/CSS Inserts section:

div.header-image-container img {width: 100%;}

and/or

div#imagecontainer {background-size: 100% !important;}

And yes, I have tried all the browser settings in "Style & Configure Layout"

Anyone with ideas?

juggledad

Aug 12, 2013 03:36 AM

What is the URL?

thetravelchronicle

Aug 12, 2013 08:48 AM

http://coloradoscenictour.com/

It may or may not go without saying, but I'm concerned about IE8 because my client is still using XP.
I wonder if a test of IE8 will give the same results with a different OS?

juggledad

Aug 12, 2013 11:09 AM

1) why are you using a GIF?
2) remove the space from the file name

thetravelchronicle

Aug 12, 2013 11:28 PM

The default file type for "Save for Web" in Adobe Illustrator is .gif, and I assumed they must be smarter than me.

A .jpg file with no spaces in the filename does not solve the problem.

I'm curious about finding two different names for the header image container in the fixes lmilesw came up with:

div#imagecontainer {background-size: 100% !important;} - Mar 19, 2012, 10:00 AM

div.header-image-container img {width: 100%;} - Aug 30, 2010, 02:24 PM

Is that area now possibly identified as something else?

By the way, sorry about our misunderstanding (from two years ago!! - I just checked my messages yesterday). Having just made a somewhat feeble offer, it certainly appeared to me that I had gotten a giant "Drop dead" in response.

juggledad

Aug 13, 2013 04:12 AM

Quote:

I'm curious about finding two different names for the header image container in the fixes lmilesw came up with:

div#imagecontainer {background-size: 100% !important;} - Mar 19, 2012, 10:00 AM

div.header-image-container img {width: 100%;} - Aug 30, 2010, 02:24 PM

Is that area now possibly identified as something else?

They both reference the same thing, one uses the 'ID' of the <div...>, the other references the 'CLASS' of the <div...>

You will want to replace the %image with

HTML Code:

<div id="my-image">

    <img src='http://yourdomain.com/wp-content/path to image/imagename.ext' />

</div>

using the appropriate path and file name then add to the CSS Inserts option

HTML Code:

div#my-image img {height: 100%; width: 100%;}

note: you will not be able to use the other header image options since you have 'rolled your own' header image at this point.

thetravelchronicle

Aug 13, 2013 12:32 PM

Works like a dream in all the browsers I tested except Safari, where the width just gets squeezed with no vertical scaling.

Is there any way to invoke fluid vertical resizing other than "height: 100%;"?

And...I'm still left with a dilemma on my other sites, which have rotating fade in/fade out header images. I assume that if I go to 3.7.12, I'll have to either give them up, or accept that they won't scale in IE8.

juggledad

Aug 13, 2013 02:09 PM

try using only the 'width: 100%' and leave the 'Height: 100%' out of the code

thetravelchronicle

Aug 13, 2013 06:40 PM

Yep, that fixed Safari without apparently breaking anything else.

I guess for my other sites I'll make do with 3.7.11 for as long as it works.

All times are GMT -6. The time now is 09:34 PM.