IE8

[CottrellJamie]

Hi

I have purchased the html theme and have just been checking the supplied files in ie8 and come across a few issues.

Firstly it appears that the menu does not collapse when the window is resized. The nav just wraps and goes over the slider.

Also, the Nivo and flex slider captions do not scale well at all. They just partly disappear off the top of the slider when the window is resized.

Also on ‘home-page-3.html’ the top services boxes lose all of their margins and lot untidy.

Lastly, the names for the input fields disappear on the contact form.

I hope you can help with these issues. Especially with the flexslider as I am hoping to use that one on my site.

Thank you very much in advance.

[livemesh]

Thanks for bring these to my notice. Pls give me couple of days to look into these. Have tested the enigmatic theme with IE8 and it seemed to perform ok. Will check for these issues again.

[CottrellJamie]

That’s great. Thank you very much. It is a really great, well put together theme overall, so if these can be sorted I will be very happy.

[CottrellJamie]

Sorry to add to the list but I have noticed another problem with the navigation menu. If you scroll, so the menu changes to the sticky menu, it does not change to the dropdown menu when you resize the window. This is in all browsers.

Thank you

[livemesh]

That sounds strange. Checked now and things look normal everywhere. Do you notice this happening in demo site too? Can you send me a screenshot of what you mean when you say “sticky menu does not change to the dropdown menu when you resize the window”. Thanks

[CottrellJamie]

Hi

Thank you for your quick reply.

I have placed some screen grabs in a dropbox folder on the link below.

https://www.dropbox.com/sh/0zddjl5n7b4q3pl/fMXBwPIP9e

screen1.jpg (home page example but happens on all pages):
This shows the error with the responsive header in all browsers. If you have the window open full size and the scroll down so the sticky header replaces the usual one. Then if you make the window smaller, the menu does not collapse in the same way as it does with the normal header.

screen2.jpg (https://www.livemeshthemes.com/html/enigmatic/home-page-3.html) & screen3.jpg (https://www.livemeshthemes.com/html/enigmatic/portfolio1.html):
These show the issue with the images in Internet Explorer 8. It looks like they are breaking out of their divs?

screen4.jpg (https://www.livemeshthemes.com/html/enigmatic/home-page-3.html):
This shows the issue with the flexslider in Internet Explorer 8. As you resize the window the caption goes strange and disappears off of the slider container.

I hope these help you to find out what is happening.

Thank you very much.

Jamie

[livemesh]

Can you insert the following code into css/ie8.css and see if some of these issues resolve. My mistake – I have this incorporated into the theme for quite sometime now but it slipped from the HTML version.

/* Do not allow IE to respond to browser resizes */
#sticky-menu-area, #mobile-menu .inner, #header-area, #custom-before-content-area, #before-content-area, #bottom-area,
#footer, #main { min-width: 1140px; }
body.fluid-width-page .segment-content, body.fluid-width-page .breadcrumbs {
    min-width: 1140px;
    }

This is essential for IE8 since IE8 does not support media queries and we should not be decreasing the content width with resize of browser window.

For the navigation issue you mention, I am still not able to understand the problem. Here is the screenshot that I was able to get from the site with the dropdown working fine on resizing and it is restored back to original function on increasing the browser size without issues.

http://d.pr/i/z9RW

I want to mention that sticky menu will disappear when you resize the browser to a certain width (767px viewport) and start to scroll up or down. On small sized tablets and smartphones, you will not see the sticky menu due to space constraints. I appreciate you taking the pain to report these issues with the screenshots but the navigation menu issue is still not clear to me 🙁

[CottrellJamie]

Hi.

Thank you for this. This explains the sticky menu issue and it should be fine for me to use.

I have added the css as described but it appears to have made things a bit worse. The whole site now appears wider than the window so to see it you need to horizontal scroll. Please see the new screen shot (screen5.jpg) in the dropbox folder. I have uploaded all the orginal files to my server now too (http://www.jcottrell.co.uk/enigmatic/index.html).

Thank you for your help with this. Hopefully we can get there soon. If it is easier to deal with via email please let me know?

Thank you

[CottrellJamie]

Hi

I have just checked the site on browserstack screenshots and it looks fine. On my pc laptop though the issue on the screenshot happens. to view the site without scrolling it has to be viewed at 75%. I may try and get hold of another laptop to test on as well to make sure nothing wierd is going on there.

The issue with the flexslider and the portfolio page images are still there though.

Thank you

[CottrellJamie]

Hi. Me again. I have just tested on another laptop and the same issue is occurring. the slider fits into the window but most other elements, including the header are too wide for the screen and force horizontal scrolling.

[livemesh]

Hi – did check your site with IE8 and I notice couple of issues you mention on lower resolution monitors when the browser width is decreased. When the browser window size is increased, things look ok.

As far as horizontal scrolling is concerned, I would not worry about it if the page is rendered fine since it happens only when the browser is resized below 1140px and IE8 market share is pretty low these days. Again, we cannot make the template responsive on IE8. Will get these fixed by early next week (should be couple of minor CSS that you need to input into ie8.css file).

You can always email me through my ThemeForest profile page http://themeforest.net/user/livemesh (bottom right box). Thank you for working with me on these and I appreciate all your time.

[livemesh]

I am releasing an update right now for the IE8 issues. Following changes were made to IE8.css file in addition to the one posted in an earlier post above. No need to have the above change I sent earlier –

#container { min-width: 1180px;} /* New change */

#content .contact-form LABEL { 
    display: block !important;
}

Regarding the portfolio image overflowing to the sidebar, this is a tricky IE8 issue which can be fixed like below –

.single-portfolio .entry-content img, .single-post .entry-content img {
    max-width: 100%; height: auto; width: auto;
}

but I am not going to make this part of the update since max-width: 100% can cause trouble in certain places where images can disappear or become shrunk in IE8. I leave it upto individual sites to tweak their code to suit their requirements. If you do not want to apply this CSS change, you always have a choice making sure the images are equal to or less than the max size of its container which will prevent the overflow. Thanks.

[CottrellJamie]

Thank you very much for taking the time to do this for me. I tried the new css and it was still forcing horizontal scroll. I have just adjusted the min-width as below and it works fine for me now…

/* Do not allow IE to respond to browser resizes */
#sticky-menu-area, #mobile-menu .inner, #header-area, #custom-before-content-area, #before-content-area, #bottom-area,

#footer, #main { min-width: 920px; }
body.fluid-width-page .segment-content, body.fluid-width-page .breadcrumbs {
min-width: 920px;
}

#container { min-width: 960px;} /* New change */

#content .contact-form LABEL {
display: block !important;
}

I will just ensure my images are the actual size for the container or declare height and width in the ie8.css.

Thank you very much for this. Your support is very good.

[livemesh]

You should do fine with the size you set for the content. Thanks for working with us on this!

[Author]

Posts