WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] My Site/Blog looks different on Windows (14 posts)

  1. guppydas
    Member
    Posted 4 years ago #

    I know that any website will look slightly different on different browsers. So I have at least 4 of them installed to test the look and feel.

    I am using Constructor/orange theme. I customised it a little bit, especially the fonts and paragraph spacing.

    All the work, the layout, the images, text ... looks great when I check that on my Notebook running Ubuntu 9.10 (Linux for those who don't know). I use Firefox, Chrome, Opera most of the time to test the site.

    When I asked my friends to take a look and comment, they all came back with one common suggestion, to change the font. Finally I tried to look at the site on Windows. It LOOKS totally different, as far as text is concerned. The fonts are thinner and the same as I had set. They are not even the alternative, substitute fonts. I tried, IE7, Firefox and Chrome on Windows, they all show the same text problem.

    Any suggestion? I like the theme and looks great on my Linux. Wish it would look the same or near same on Windows.

  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    Any suggestion?

    not without a link to your site.

  3. guppydas
    Member
    Posted 4 years ago #

    Ouc! So silly of me. My Site. While I am writing, wish to make a note that I want to use Trebuchet MS font. The theme I am using has that option. However no matter what fonts and alternative fonts sets I use, on Windows it looks horrible. While searching for solution I found a site that helps me preview it without having to bother those who use Windows. The useful site is Browser Shots Thank you for looking into this. It is highly appreciated.

  4. Andrei Olsen
    Member
    Posted 4 years ago #

    As far as I can see you did not define any font family in your style.css except for heading. So naturally browsers will use their default settings and those can be quite different on different systems.

    Add this to your CSS file

    body {
        font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
    }

    and override font-family for places (sidebar, footer, etc.) on your site where you want a different font.

  5. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    the display in IE7 is only slightly worse than in firefox 3.5.8.

    at the moment, there is no reference to 'trebuchet ms' font on your site.
    if this is an option in your theme, set this option, and if you can, increase the font size.

    otherwise, the display seems to be caused by extreme small fonts of a 'times new roman' kind - difficult to read.

    also, i am not familiar with the 'construtor' theme options.

    btw: changes to the style of your theme may not be immedeately visible in your browser; you may need to press the 'reload' button, or press CTRL and F5 at the same time to refresh the browser cache.

  6. guppydas
    Member
    Posted 4 years ago #

    Thanks. I will follow both the instructions. Add that code in styles.css and refresh browser. Fingers crossed, hope it works.

  7. guppydas
    Member
    Posted 4 years ago #

    Set everything the way I was happy with. Added the above mentioned code by nebulus. Saved the file. Got Browser Snapshot preview. Nope it still does not work. I am confused as to why it looks well on Linux and not windows. It does not look like Browser problem. How can an operating system affect the looks of webpage.

  8. Andrei Olsen
    Member
    Posted 4 years ago #

    Site uses Trebuchet MS and looks fine as far as I can see. I would have increased the font-size though if I were you.

  9. guppydas
    Member
    Posted 4 years ago #

    Really!! Now thats a bit of good news. I will increase the point font-size, once I know how to. I am ZERO in coding.

  10. guppydas
    Member
    Posted 4 years ago #

    Now the font size in style.css is set 160%. Looks have improved. Still no where near what it looks like on Linux.

  11. Andrei Olsen
    Member
    Posted 4 years ago #

    Didn't improve a bit, still the same size. Changing this value won't help you, because CSS in /cache/style1.css overrides it anyway.

    You could use something like font-size: 70% !important; (70% of 16px, which is usually a default value, resulting in 11px) in style.css, but it will work in every browser except IE7 and bellow.

  12. guppydas
    Member
    Posted 4 years ago #

    I tried the latest suggestion. Don't know if it has made any difference or not. I am just tired with it and giving it up. Thank you nebulus for all your help and advise. Maybe if I am able to upload the images showing the difference, it could help. For now, its time to work on something else.

  13. guppydas
    Member
    Posted 4 years ago #

    I have uploaded three screenshots here. Just to help see the difference I am talking about. However, as mentioned on that page, after making change of font-size 70%:!important in style.css, the looks on Firefox on Linux on notebook has changed a bit. I have removed it for the time being.

    So back to basics of formatting text that looks good on all the machines.

  14. guppydas
    Member
    Posted 4 years ago #

    Thanks nebulus, it was indeed a problem of fonts. I played around with it a bit. Looks almost same across the platforms.

Topic Closed

This topic has been closed to new replies.

About this Topic