WordPress.org

Ready to get started?Download WordPress

Forums

Preference Lite
[resolved] Website CSS layout issue (37 posts)

  1. peter79130
    Member
    Posted 10 months ago #

    I use Preference Lite as my theme.
    ThemesVersion 1.6.7

    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?

  2. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    Hi Peter.... do you have a link that I can take a look at this? Thanks

  3. peter79130
    Member
    Posted 10 months ago #

  4. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  5. peter79130
    Member
    Posted 10 months ago #

    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.

  6. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  7. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  8. peter79130
    Member
    Posted 10 months ago #

    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.

  9. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  10. peter79130
    Member
    Posted 10 months ago #

    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?

  11. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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?

  12. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  13. peter79130
    Member
    Posted 10 months ago #

    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

  14. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  15. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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.

  16. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    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:

    #content

    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.

    #prtfl_content

    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.

  17. peter79130
    Member
    Posted 10 months ago #

    Well...I just sent them an email yesterday. They do think it's the problem with my theme. And they probably not responsible for this kind of issue. haha I don't think they will fix my problem.....although I appreciated all your efforts because I saw your message on the plugin FAQ page. Thanks for asking this question for me. I might look for other similar plugins later and test it.

  18. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    My Pro version of Preference does have styling for a portfolio, although I'm not sure what information you need in your portfolio items, but it's an option for you. Another would be to create your own manual based portfolio which I can guide you with. Portfolios normally don't change much so a manual portfolio might work if you don't need a big one.

  19. peter79130
    Member
    Posted 10 months ago #

    I'm probably going to use blog and jquery lightbox plugin to treat each category as a new post. That's something I might going to use, but do you have any different idea?

  20. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    That's one way, or you can use my inline columns and then setup a page (instead of posts), one for the layout of portfolio items, and then each one would have their own page with full details of whatever you are showcasing, including adding an in-page slider, lightbox, etc.

    Example inline columns:
    http://demo.styledthemes.com/preference/inline-columns/

    With inline columns, you could do something like this page on my Pro demo:
    http://demo.styledthemes.com/preference/our-team/

  21. peter79130
    Member
    Posted 10 months ago #

    Nice template! I just got a quick css question. When I change the footer color, it applies to the main background too. I'm not sure what did I do it wrong.

  22. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    Footer colour for what specifically and how did you change it?

  23. peter79130
    Member
    Posted 10 months ago #

    I changed it through the theme>customize>Colors>Footer Background and them the main background color on the page change the the same color too.

  24. peter79130
    Member
    Posted 10 months ago #

    I think I know what happened. All of my content is in the footer area instead of main content so that's why when I change the footer it applies to everything on the background. I'm not sure how did that happen.

  25. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    There's definitely something breaking your layout. I just changed the footer background on my local test site and it was fine, but for your site, the layout is broken from something. It could be a number of things:

    1. a plugin html layout
    2. user's own page or post content using html with a missing tag
    3. something missed in the theme code

    So the trick here is to find out what. Usually this is done by process of elimination starting with disabling all plugins, check the site, see if it looks as it should. Then one by one turning on a plugin and checking the site front-end each time. Your about page is a good testing page. If the the site is still showing a broken layout with all plugins disabled (and browser cache cleared), then the next step is to know if you have any html you added to content and double check that. If none exists, then it's the theme code.

  26. peter79130
    Member
    Posted 10 months ago #

    Hey! I just got it to work. Thanks again. It's the portfolio plugin again. I think I might need to spend a little bit time to rebuild my portfolio page again.

  27. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    Ah found it!!!! Not your fault again... I swear I need a vacation.
    I just made a new update to Preference Lite so contact me once again from my site and I will send you the updated version. I was missing an ending curly bracket on a set of css styled in the <head> area. This means I just fixed the functions.php file.

  28. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    really? lol...That's great you were able to find that out; I guess the process of elimination worked. Although I still found a missing bracket on my css, so there's an update version available for you. I will upload this new version of 1.6.8 to WordPress later today for everyone else.

  29. peter79130
    Member
    Posted 10 months ago #

    I honestly don't like debugging. It's pain in the neck job ever.... But that's how to make things perfect in the programming world.

    by the way if I use http://validator.w3.org/ to validate my website. How do I fix the missing close bracket?

  30. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    contact me and I will send you the updated version that fixes the missing bracket and will update yours to 1.6.8. When I upload this to the review team here, it'll take a couple days so contact is the fastest way.

Reply »

You must log in to post.

About this Theme

About this Topic