-
AuthorPosts
-
November 3, 2013 at 3:18 pm #183924
I find some missfunctionality in IE, specialy IE8:
1. full width image is tiled and not streached (IE8)
2. no favicon (IE8)
3. Bar is not working
… and some other less importent stuffNovember 3, 2013 at 3:19 pm #183926I would like to know if these problems are familiar; and could I resolved them
November 4, 2013 at 2:26 am #184074Hey!
Can you please give us a link to the website? Do you have the latest version of Enfold?
Regards,
IsmaelNovember 4, 2013 at 1:49 pm #184230Isamel, the link always the same: http://www.numlighting.com
I took off the bar (which does not work in any IE version!)
another bug is in Chrome: the logo has some strange white stroke on it (take a look at the yellow rectangles of the icon)
ThanksNovember 4, 2013 at 1:57 pm #184233P.S. were can I replace the font (I would like to use a new one from google web fonts)
November 5, 2013 at 3:57 pm #184807Hey!
The fullscreen issue is known but we have no fix for it. Its the best downgrade we have been able to implement without there being a complete loss in functionality for IE8 at the moment.
The favicon is set in the code, if IE8 isn’t rendering it there is nothing we could do to change that.
Can you elaborate no what you mean by the bar is not working?
The logo distortion is caused by the png file being compressed in its container. Some images, when shrunk get issues like that so you can re-size your logo to exactly 297×88 and re-upload it to try and fix the visual issue or try using a gif instead.
Cheers!
DevinNovember 5, 2013 at 5:17 pm #184861Hi Devin, thanks for replying!
1. I used your advices concerning the logo and still the same effect in chrome; You can take a look at it now, it is gif, size 297×88 and still the white stroke is seen (I even used 340px * 156px as mentioned in the template, and no good).
it is compressing the image for sure (in the library, the image is a bit bigger); how can we make the logo shown in its 100% size (and I’m not talking of the option in the theme-option since there it is ‘full-size’ already)
2. concerning the Bar in IE: no matter what IE version I use, the bar-animation (the “moving strips”) are gone without traceThanks
P.s. the bar issue is not important to me now, as much as the logo problem…November 7, 2013 at 3:48 pm #185648IE doesn’t support the css needed for the progress bar animation. That is just the downfall of users that are on IE which has sub standard support for modern css.
For the logo, it looks like with that specific image/color of image the resizing function is always going to give you issues. There is a function in js>avia.js file that is a fix for menu widths as browsers resize which you can remove and it should then keep the image from resizing when not scrolled down.
Look for:
//Resize menu if logo is overlapped by th menu items //check if user uses IE7 - if yes don't execute the function or the menu will break if(navigator.appVersion.indexOf("MSIE 7.") == -1) avia_resize_menu();
change it to:
//Resize menu if logo is overlapped by th menu items //check if user uses IE7 - if yes don't execute the function or the menu will break //if(navigator.appVersion.indexOf("MSIE 7.") == -1) //avia_resize_menu();
November 8, 2013 at 9:06 am #186045Devin, thanks for the advice
Unfortunately, I did exactly as suggested and the results stays the same – and I have clean browser cache (you can check the site, I’m not sure if you can see the js changes…)
Is there another way to fix it? (note that Firefox render it bad just like Chrome…)Good day
Eli- This reply was modified 10 years, 12 months ago by eliuserman.
November 13, 2013 at 3:48 pm #187787I’m not sure what else could be effecting it then. I’ve tagged Peter on the topic since he wrote the script to resize the header and should be able to shed some additional light on it.
November 14, 2013 at 10:26 am #188279Hey!
1) To resize the logo try this code (insert it into the quick css field):
#top .logo a img { width: 297px; }
If it doesn’t work try
#top .logo a img { width: 297px !important; }
or
#top .logo a img { max-width: 297px; }
2) The “full width image is tiled and not streached (IE8)” issue is not fixable. We use the css3 attribute “background-size” to stretch the image which is not supported by IE8 or older browsers (see “browser support” section here: http://www.w3schools.com/cssref/css3_pr_background-size.asp ). IE9/10/11 should support this css attribute though.
3) The favicon should work if you use a .ico file for the favicon. png, etc. files are not supported by IE10 or older browsers ( http://stackoverflow.com/questions/16943609/which-versions-of-ie-support-png-favicons ). If it doesn’t work try a plugin like: http://wordpress.org/plugins/all-in-one-favicon/ which allows you to set several image formats for the favicon.
Best regards,
PeterNovember 14, 2013 at 11:13 am #188292Hi Dude, thanks for the advices
I have tried your suggestion concerning #1, and:
1. the code effects the width only which makes the logo out of its proportion; Due to that I have tried the following code:
#top .logo a img {
height: 88px;
width: 297px;
}
But No effect was taken on the height…
2. I understand that your solution cannot be fit to a Fixed Header (which I use in the site) due to the resizing of the logo when scrolling down. right? If possible, I would like to keep the Fixed Header effect when resolving this Logo problem (but not a must)Please share your thoughts with me
Thanks
EliNovember 14, 2013 at 11:24 am #188297P.S.
Dear people
Concerning this issue of the damaged header-logo in chrome browser: When checking out in Chrome your (enfold) demo site, no such effect is seen; I assume that it is about the resizing, and I know there are several places to control the size of the logo.
Could you simply help me reset all the relevant parameters and indicate the right image size to create for the logo?
ThanksNovember 15, 2013 at 3:39 pm #189214For 2, the issue doesn’t have to do with a fixed header but just how the background is set for any layout.
For 1, since nothing else is working you should be able to force the logo fix by adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#header .logo img { padding: 0 !important; }
November 15, 2013 at 10:14 pm #189443Hi Devin, well done! :)
Now it works… partly…
It still has this ugly effect when scrolling down (resizing the image), but now it is much better
Thanks -
AuthorPosts
- The topic ‘IE support’ is closed to new replies.