Wordpress Themes - WP Forum at BFA

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 10: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 04:36 AM

What is the URL?

thetravelchronicle Aug 12, 2013 09: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 12:09 PM

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

thetravelchronicle Aug 13, 2013 12:28 AM

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 05: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 01: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 03:09 PM

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

thetravelchronicle Aug 13, 2013 07: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 06:21 AM.

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