Layout issues with IE8 (which is my clients broswer) Website front page 2nd widget at the bottom has moved up next to header throwing bottom widget 3 & 4 out.
Css on the footer is all wrong (its perfect in mobile, mozilla, safari & chrome) Also the div line in the about us & contact us pages is in the middle of the page at full width & only goes back into place when the browser is narrowed.
Please any help with the additional IE8 coding would be appreciated.
Unfortunately, Preference Lite (or my Pro version) are not fully supportive with ie8 at this time. I have started updating my other themes for ie8, but Preference has not been done yet. As to when I will be able to get that done, it’s hard to say because of my extremely tight schedule. I would like to try and do it by the end of this month, but the likelihood of that is very small. More likely in January.
The problem is that ie8 does not support the newer styling and design methods of themes and websites that now use HTM5, CSS3, and even media queries (used for responsive sites and other things).
As a side note, I know some people are using ie8 and others have no choice because they are on Windows XP. Anything above ie8 is not compatible on XP (which is odd), but a lot of developers and other sources are dropping ie8 support…even Google made the announcement they are no longer supporting it. I even found out the commenting system Disqus does not display comments now with ie8 for major sites.
An interesting quote from an article:
It’s no longer about the cost of change, now it’s about the cost of not changing.
At the end of 2014, I won’t be coding for ie8 anymore with new themes. Something to consider too ie8 Countdown
Is there any css coding can you possibly supply me to help rectify these few issues or at least make it look a bit better? It would be greatly appreciated as I love this theme for wordpress.
I cannot promise anything but if you could please provide a link to your site I will take a quick look. I will use my IE 11 in ie8 mode to see what happens. If it’s an easy fix, I can probably do something for the time being.
http://www.westendtablecraft.com.au/wp-admin/ you are a star!! I’d really appreciate it. Also for my learning & future reference if it is an easy fix would you be able to let me know what it is? Shout if you need passwords etc & I’ll email them through. Thank you!
Thanks for the link…to get started, did you make any modifications to the theme files? Also, did you make a custom menu or using a default menu?
Quick update… what I did was uninstalled my IE 11 and reverted back to the original ie8 browser. Switching an IE 9, 10, or 11 version to simulate ie8 is not perfect. So now that I did this and viewed your site, I think I can do some kind of an update. It means I will need to rebuild the menu though, so I will do this first thing tomorrow as it’s 10pm here right now where I am.
That is absolutely fantastic! Thank you. I used a default menu as this was supposed to be a basic brochure site 🙂 I am 6 hours behind you as its 4pm here. Thanks again!
Actually, you’re almost a day ahead… It’s 1130pm Thursday for me right now. Will follow up tomorrow.
I found some things, but with your content and coding which I appears to be most of the cause of your issues in ie8. I realized that I actually did make Preference Lite almost 100% compatible in ie8.
First thing I found:
In your child theme style.css, you have this:
Problem is that first part needs the ID part like this:
Plus….you need a closing curly bracket for it as well, even though there is no style attributes there.
Second thing is with your front page image boxes (in the widgets), which I will post just the content from the text widget only.
<p><a href="http://www.westendtablecraft.com.au/benches"><img src="http://www.westendtablecraft.com.au/wp-content/themes/preference-lite-child/images/bench-set.jpg" width="265" height="180" alt="Quality wooden bench sets" class="imageborder" style="display: block; margin-left: auto; margin-right: auto;"</p><p>Quality wooden picnic table and bench designs designed to suit any outdoor area!</p>
Your <img> tag has no closing: />
Third thing is…you made some modifications for the main menu which are causing some minor layout issues in mobile view. Also make sure that you make a custom menu and not the default “page” menu WP does; a custom menu is what the theme is styled for.
The fourth thing is… did you copy your content from another source? I noticed a ton of inline styling throughout your page content. This could have some influence on how the pages and site looks. If you did copy from another source, copying also copies inline styling of elements such as this one line from a page:
<p style="margin: 0px 0px 1.25rem; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(40, 40, 40); font-family: 'PT Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 21px; background-color: rgb(248, 248, 248);">
….way too much css in your content code.
Now for my end… ie8 is ignoring a script that is supposed to help ie8 understand HTML 5 elements, but it’s ignoring them. So I have to figure this one out as the same script works for my other themes.
I will be uploading this update for Preference Lite today, but you can contact me from my website Contact Me to get a new copy right away.
That is fantastic thank you! I am pretty much self taught & as a marketer not so much a web designer my attention to finer detail comes back to bite me some times. I had run the code through W3Schools so obviously deleted the wrong tag..
The block quotes were taken from an Australian wood site so I will ensure that is done differently in future. The copied styling, would that affect how the blockquote is viewed on mobile?
I have sent a message via you website & I really appreciate you taking the time for this! I have other sites & themes using drupal & your response regarding your theme is fantastic!
You’re very welcome… regarding copied styling…if you are happy with how things look after, then you can leave them in. Cleaning out the inline styles looks like it would be a big job, but again, if after the update I sent you works, then you should be ok.
Looks exactly how I wanted it to across the five main browsers – thank you!!
- The topic ‘[Resolved] IE8’ is closed to new replies.