[Resolved] Website CSS layout issue
I use Preference Lite as my theme.
I have questions about the css layout IE8 and IE9.
The top menu display as a block instead of a line in IE8 and IE9. The right sidebar seems cover the entire page instead of staying on the right side. However, IE10 works fine for me.
How do I fix it?
Hi Peter…. do you have a link that I can take a look at this? Thanks
Thanks for the link…. I tried your site in my ie10, then in ie9 mode, then ie8 mode. Part of the problem is with Microsoft and how they create their browsers to be proprietary, especially with their browser mode and “Document Mode” settings; these should not even exist in the browser or any browser really.
However, with that being said, how does this help you…
I believe the Bootstrap framework is not cooperating with ie8 in ie8 document mode. However, when on your page (site), do F12, then at the bottom, click on the “Document Mode” and set that to “Standards” which is what it should be at. The others are backward alternatives. Try that and let me know how it looks then.
The menu issue has been solved. Thanks.
However, the page sidebar doesn’t line up on the right side as the screen scale up. It stay in the middle instead.
One down one to go….lol. Ok, I noticed something about your site and the bottom area which does not look like the demo site or my test site I setup locally on my computer with this version. It almost looks like something is being broken as in something without a closing or opening tag. Did you make any modifications to core files? Your footer area should have a 20px padding in the bottom, but your site shows the page itself is in the footer container.
I believe I found the problem…I’m missing a closing div tag, so this one is my goof up. Contact me from my site “contact” page and I will send you an update to test out and see if it solves your layout. If it does, then I will upload the update to Preference to WordPress here as a bug fix.
Alright! I just sent you an email through your site.
Yes, I did some changes with the css style sheet, but I did not touched the footer setting.
I might have other questions besides these two.
Thanks for your quick response.
You’re very welcome and for any new questions, simply start a new thread once we finish up with this topic. I just got your email, but have to head out the door for 2 hours, but will send you the update to test to get started.
Thanks for your previous instruction. Now I’m using your child theme.
Over the weekend, I just found out there’s another problem with my portfolio page.
Go to my page and click “read more”. You will notice the sidebar title underline is across beyond its boundary. It happens on the newest Chrome and Firefox. Do you have any idea how to fix it?
Strange… but I will check this out locally and see what’s up. If you don’t hear from me by the end of today, contact me. I’m assuming you are using a 1 column layout? Also, it appears you are using a standard category and posts for your portfolio? The Pro version does have a styled portfolio setup. But what are you using or how did you setup this portfolio on the Lite version?
Quick follow up… I just realized you are using a plugin for your portfolio. You might want to check with the developer of this plugin and let them know what is happening because when I look at your blog section of your site, the page layout is fine, but for this plugin layout, something is breaking the layout.
Yes. I did use plugin on that page. I thought the plugin does not affect the layout of the page. Ok. I will check with plugin author. Thanks
Sometimes there might be something in a plugin’s own css or structure that can do some things like a css conflict. It could also be a combination of both plugin and theme.
What is the plugin you are using and I will install it on my test site and see if I can figure it out while you contact the developer of it. I did notice too that it has a couple css naming parameters that might conflict with a theme, but will try this out.
Actually, I have to check something in my theme as something is still not quite right. I will follow up later today. I also installed the plugin you got for the portfolio and will try it.
Here’s an update. It’s the plugin you are using that is breaking the layout. Once I disabled the plugin, the layout structure was fine, then I activated once again, sure enough it broke the page structure. Now the really hard part is to figure out what is in the plugin that is causing it to break.
There is one thing that is conflicting with css such as:
This exists in the theme plus this plugin, so one is causing layout issues. The plugin one should be renamed with a prefix, but this has to be done by the developer. Many themes use #content in their css layout.
There might be a problem also with the fact this theme is based on the Bootstrap framework which is a responsive grid. So the plugin’s templates may also be causing the problem with the layout…which I think is the real problem.
In the end, I don’t think this plugin and this theme are 100% compatible without doing some recoding for this plugin’s portfolio template because of how they were created. Unfortunately this plugin adds two portfolio files to the main theme’s folder among the other theme files and it loads the header and footer and sidebar as well (this is part of the conflict) for its layout. Now if it was just the content part only, then it might be ok.
- The topic ‘[Resolved] Website CSS layout issue’ is closed to new replies.