1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Wordpress layout differes between browsers.

Discussion in 'Blogging' started by James2, Dec 3, 2012.

  1. James2

    James2 Senior Member

    Joined:
    Jun 3, 2011
    Messages:
    1,133
    Likes Received:
    994
    Location:
    London, England
    After setting up a page on my wp site, I checked to see if it looked good live in Firefox and it was fine, but when I check it out in chrome the page looked messy. Unequal white space between blocks of text and images etc. Is there a way to get around this?

    Thanks in advance,

    James :)
     
  2. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,376
    Likes Received:
    1,493
    Location:
    Proudly romanian
    Normally the problems are with IE, but idk in ur case. You must rewrite the code from the start IMO.
     
  3. James2

    James2 Senior Member

    Joined:
    Jun 3, 2011
    Messages:
    1,133
    Likes Received:
    994
    Location:
    London, England
    Great lol.
     
  4. Endire

    Endire Elite Member Premium Member

    Joined:
    Mar 27, 2012
    Messages:
    1,756
    Likes Received:
    1,061
    Gender:
    Male
    James2,

    What exactly looks messy? Are you having alignment problems with certain elements? You shouldn't have to re-write all your code. It may only be a matter of tweaking a couple of things or adding some lines in your CSS file.

    If you look at it in chrome, you can right click on any element and select "inspect element". Then you can view the code that is giving you problems. You can even make changes from right inside the developer tool to see if you can fix it.

    Here is more about the tool,

    https://developers.google.com/chrome-developer-tools/docs/overview

    Hope that helps,

    Shawn
     
    • Thanks Thanks x 1
  5. Cshark

    Cshark Jr. VIP Jr. VIP

    Joined:
    Feb 25, 2011
    Messages:
    1,024
    Likes Received:
    132
    Gender:
    Male
    Occupation:
    Grinding
    Location:
    NYC
    This is what you need to know.

     
    • Thanks Thanks x 1
  6. arousso

    arousso Registered Member

    Joined:
    Jan 11, 2012
    Messages:
    55
    Likes Received:
    10
    All browsers come with their own defined css style sheet - all different - ie; margins, fonts, padding ect., that's why you get looks from different browsers.

    The way to get around this, although you will have redo some of the css, is to use a css reset like meyerwebs reset

    Alternately, if your into HTML-5, you can use normalize.css .
     
    • Thanks Thanks x 1
  7. James2

    James2 Senior Member

    Joined:
    Jun 3, 2011
    Messages:
    1,133
    Likes Received:
    994
    Location:
    London, England
    Thanks guys, great info. I am a bit of a noob, so I don't know much code. I would put the link on here and show you what I mean, but that's not allowed. basicaly on my WP page, I have a large image at the top of the page, then text, then a pricing table and so on 4 times. it looks fine in firefox, but in chrome the white space is missing in between the first image and the first block of text so that they are pushed up against each other, but the rest of the elements are spaced correctly. Also on the page editor in the WP dashboard, it all looks fine too. Good info though guys, looks like I have some more learning to do. Thank you :)
     
  8. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    Normally a design has to look almost the same in FF and Chome. If your design is messy in Chrome, then it could mean that you have used something that is not meant for chrome. When designing, try to use standard css methods, rather than anything fancy.
     
    • Thanks Thanks x 1
    Last edited: Dec 6, 2012
  9. James2

    James2 Senior Member

    Joined:
    Jun 3, 2011
    Messages:
    1,133
    Likes Received:
    994
    Location:
    London, England
    Hi g0g0I. Hi haven't done anything fancy. I haven't used any code at all. Just the WP dashboard and a few plug ins. I don't know any code if I am honest apart from maybe removing the copyright blurb from themes and adding iframes.
     
  10. arousso

    arousso Registered Member

    Joined:
    Jan 11, 2012
    Messages:
    55
    Likes Received:
    10
    James, try the plugin "WordPress Twitter Bootstrap CSS". On the settings page choose Yahoo UI reset css V3.6.0. No coding at all.
     
    • Thanks Thanks x 1
  11. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    PM me your code then. I will solve it for free for ya :p
     
    • Thanks Thanks x 1
  12. upl8t

    upl8t Regular Member

    Joined:
    Apr 9, 2008
    Messages:
    475
    Likes Received:
    84
    Location:
    New Scotland
    Eric Meyers css reset works. I add it to the top of all of my custom work. You'll need to check your css files. It might already be included.

    You also need to make sure you aren't adding the reset after your main css files or you're going to lose your formatting.
     
    • Thanks Thanks x 1
  13. upl8t

    upl8t Regular Member

    Joined:
    Apr 9, 2008
    Messages:
    475
    Likes Received:
    84
    Location:
    New Scotland
    • Thanks Thanks x 1
  14. James2

    James2 Senior Member

    Joined:
    Jun 3, 2011
    Messages:
    1,133
    Likes Received:
    994
    Location:
    London, England
    This is why I love BHW :) Thanks a bunch guys.