Cross Browser Compatible for Wordpress

by Jays80
21 replies
Warriors,

How to create/modify a Wordpress site to function properly in all major browsers?

Any such script/suggestion, a non technical person can follow?

Thanks,
#browser #compatible #cross #wordpress
  • Profile picture of the author TheRichJerksNet
    This depends upon many different factors such as the theme you are running, the way the stylesheet is setup, and etc ...

    There is no website 100% perfect in all major browsers but you can do some tweaks and etc to make it look good in all browsers. The worst browser is IE because it has major problems with just simple html and simple css. IE will always view sites differently because it is not mozilla based.

    James
    {{ DiscussionBoard.errors[793691].message }}
    • Profile picture of the author Jays80
      My site not looking good at IE, what to change? where to change?
      {{ DiscussionBoard.errors[793704].message }}
  • Profile picture of the author Stefan Vee
    A wordpress site's "looks" and "feels" depends on the theme.
    Unfortunately, many themes are amateuristic copies of copies of copies of copies ... which explains why so many are buggy.
    Much harm can be done with a plugin-overload as well.
    Pick a professional theme (excellent freebies BTW at woo themes for example) and install it. Deactivate plugins you don't really need.
    You should be fine.
    {{ DiscussionBoard.errors[794059].message }}
    • Profile picture of the author Jays80
      still looking for solution.
      {{ DiscussionBoard.errors[794077].message }}
  • Profile picture of the author charlesburke
    Amfire, I think the point was made that you might want to try some differnt themes. Just do some surfing of the theme directories, download a few that fit your needs, upload them to your website, enable each one in turn, and check each one in IE to see if the problem goes away.

    If you're permanently married to your current theme, you won't find the help you need in the forum. You'll need a programer to dig deeper than we can here.

    Cheers from warm and smiling Thailand,
    Charles
    Signature
    MisterEbook.com
    Special offer for all Warrior authors... MisterEbook.com/warriorsonly.html
    {{ DiscussionBoard.errors[794101].message }}
    • Profile picture of the author Jays80
      Sounds good. will change it and see how it goes.


      Originally Posted by charlesburke View Post

      Amfire, I think the point was made that you might want to try some differnt themes. Just do some surfing of the theme directories, download a few that fit your needs, upload them to your website, enable each one in turn, and check each one in IE to see if the problem goes away.

      If you're permanently married to your current theme, you won't find the help you need in the forum. You'll need a programer to dig deeper than we can here.

      Cheers from warm and smiling Thailand,
      Charles
      {{ DiscussionBoard.errors[794119].message }}
  • Profile picture of the author bgmacaw
    Originally Posted by Amfire View Post

    How to create/modify a Wordpress site to function properly in all major browsers?
    What do you consider 'all major browsers'?

    It isn't too difficult to get a site design to work right if your idea of a major browser is FireFox 3.0 and IE 7/8. Throw IE6 and some other older browsers into the mix and things get more complicated. I've found that about 80% of the browser specific display problems are caused by incorrectly closed tags which is an easy fix once you find it.

    Other than that, it's up to the theme you use. WordPress is a PHP engine and the public face of it is almost entirely up to the theme you select.

    Originally Posted by Amfire View Post

    Any such script/suggestion, a non technical person can follow?
    Other than using a theme that's been done right from the start, no, it will require some knowledge of HTML, CSS and PHP to make the necessary modifications.
    {{ DiscussionBoard.errors[794164].message }}
    • Profile picture of the author houdy
      Originally Posted by bgmacaw View Post

      I've found that about 80% of the browser specific display problems are caused by incorrectly closed tags which is an easy fix once you find it.
      These tags may not only be in the theme but in a post, a common mistake is caused by copying from another website or a program like MS Word and pasting it into the visual editor when making a WordPress post. The formatting from this can cause big time display issues especially on IE.

      Another issue I often see is a missing closing </ div> tag somewhere on one of the themes files.
      {{ DiscussionBoard.errors[794189].message }}
      • Profile picture of the author deskmonkey
        The best advice I can give you for making your website cross-browser compatible would be to make sure you are using completely valid HTML/XHTML and CSS. Different browsers interpret codes differently, so using standard code makes it easier for your site to be cross-browser compatible. I would suggest running your website through W3C's Markup Validation Service to make sure that your HTML/XHTML uses only standard code. Also, you can have your CSS validated at their companion CSS validator.

        Now, I'm not saying that if your code is 100% valid, then it will automatically look the same on all browsers. Even standard code is sometimes interpreted differently, but the differences are not that great and at least you are guaranteed that your site will look similar in differing browsers.
        {{ DiscussionBoard.errors[794300].message }}
        • Profile picture of the author Jays80
          W3C's Markup Validation Service says 18 errors.

          "some of them are
          end tag for element "p" which is not open
          Error Line 99, Column 12: end tag for "p" omitted, but OMITTAG NO was specified
          end tag for element "p" which is not open"

          which file are we talking about here?


          CSS Validator says 4 errors

          one of them is Value Error : font-family Generic family names are keywords, and therefore must not be quoted. : "Times New Roman","serif"

          is it a good idea to change theme?
          what are good practices for WP-table plugin?




          Originally Posted by deskmonkey View Post

          The best advice I can give you for making your website cross-browser compatible would be to make sure you are using completely valid HTML/XHTML and CSS. Different browsers interpret codes differently, so using standard code makes it easier for your site to be cross-browser compatible. I would suggest running your website through W3C's Markup Validation Service to make sure that your HTML/XHTML uses only standard code. Also, you can have your CSS validated at their companion CSS validator.

          Now, I'm not saying that if your code is 100% valid, then it will automatically look the same on all browsers. Even standard code is sometimes interpreted differently, but the differences are not that great and at least you are guaranteed that your site will look similar in differing browsers.
          {{ DiscussionBoard.errors[794334].message }}
      • Profile picture of the author Jays80
        Hi,

        So i am to copy the content on notepad and repost it right?

        missing closing </ div> tag somewhere on one of the themes files

        what is solution for it.

        Originally Posted by houdy View Post

        These tags may not only be in the theme but in a post, a common mistake is caused by copying from another website or a program like MS Word and pasting it into the visual editor when making a WordPress post. The formatting from this can cause big time display issues especially on IE.

        Another issue I often see is a missing closing </ div> tag somewhere on one of the themes files.
        {{ DiscussionBoard.errors[794318].message }}
        • Profile picture of the author deskmonkey
          Actually, you can just type in the URL to your site and the validator will check your site for you. It removes any possible errors like you accidentally missing something when you copy/paste your source code into their forum, thus fudging the result.

          Anyway, regarding the missing </div> issue, since I don't know what your website is, I can't take a look at the source code myself to see where the problem is. If the only problem is a missing </div>, though, then you just have to go through the code to see where it's missing. When you go through the code, keep in mind that every opening tag has a corresponding closing tag, so find which opening <div> doesn't have a closing </div> tag. HTML tags can be nested, so make sure that when you're adding a closing </div> you're adding it in the right place. The same principle applies with every HTML tag -- ie. a <p> tag must have a proper closing </p> tag, etc.
          {{ DiscussionBoard.errors[794347].message }}
    • Profile picture of the author Jays80
      FireFox and IE all versions, safari,

      Originally Posted by bgmacaw View Post

      What do you consider 'all major browsers'?
      {{ DiscussionBoard.errors[794339].message }}
  • Profile picture of the author Quentin
    You can usually tell if a theme is compatible and work in most browsers as it will have a separate css file for IE and general.

    If they do then you can be pretty sure it will be pretty well compatible with most browsers.

    Q
    {{ DiscussionBoard.errors[794559].message }}
    • Profile picture of the author Jays80
      thanks. uploaded another theme, now sidebar is covering the home page.


      How to decrease length of sidebar?


      Originally Posted by Quentin View Post

      You can usually tell if a theme is compatible and work in most browsers as it will have a separate css file for IE and general.

      If they do then you can be pretty sure it will be pretty well compatible with most browsers.

      Q
      {{ DiscussionBoard.errors[794849].message }}
  • Profile picture of the author TheRichJerksNet
    Amfire,
    The best theme to use is Download Flexibility Theme for WordPress - has many options and can be customized easier than editing the css.. Also the owner is a member here and you can get support easy for the theme from the owner..

    James
    {{ DiscussionBoard.errors[795428].message }}
    • Profile picture of the author Jays80
      James,

      Thanks, will check it out.

      Originally Posted by TheRichJerksNet View Post

      Amfire,
      The best theme to use is Download Flexibility Theme for WordPress - has many options and can be customized easier than editing the css.. Also the owner is a member here and you can get support easy for the theme from the owner..

      James
      {{ DiscussionBoard.errors[796754].message }}
  • Profile picture of the author tomcam
    Interestingly, cross browser compatibility is the responsible of the theme author, not WordPress. Your mileage will vary depending on the theme used. I create sites on both Mac & Windows, using FireFox, IE, and Chrome. I have had good luck with the following themes. They're all free, all available at WordPress.org:

    Gear
    TypographyWP
    Fall Season
    Atahualpa

    Atahualpa is also most easily changed from the WordPress dashboard, as opposed to having to muck around in PHP files.
    {{ DiscussionBoard.errors[796272].message }}
    • Profile picture of the author Jays80
      What rights normally we have on these free themes? Are we allowed to remove/modify footer?


      Originally Posted by tomcam View Post

      I have had good luck with the following themes. They're all free, all available at WordPress.org:

      Gear
      TypographyWP
      Fall Season
      Atahualpa

      Atahualpa is also most easily changed from the WordPress dashboard, as opposed to having to muck around in PHP files.
      {{ DiscussionBoard.errors[796759].message }}
      • Profile picture of the author bgmacaw
        Originally Posted by Amfire View Post

        What rights normally we have on these free themes? Are we allowed to remove/modify footer?
        It would depend on how the author licensed it but many people do remove them or make the links nofollow. Many of these themes are under the GPL license just like WordPress so modifying them is OK, however, it is a nice thing to do to leave the footer link in to give the author credit for their work.
        {{ DiscussionBoard.errors[797389].message }}
        • Profile picture of the author Jays80
          Ok. thanks.



          Originally Posted by bgmacaw View Post

          It would depend on how the author licensed it but many people do remove them or make the links nofollow. Many of these themes are under the GPL license just like WordPress so modifying them is OK, however, it is a nice thing to do to leave the footer link in to give the author credit for their work.
          {{ DiscussionBoard.errors[797475].message }}

Trending Topics