Browser viewing problems… Safari, IE, and Firefox

  • How can I fix my CSS so that it displays correctly in all browsers… It’s mainly font size and placement issues of the h3 header. How can I fix these.

    So far the glitches I see are: (BTW I’m on a MAC)
    Safari: h3 headers – the text is smaller and the placement is wrong, the document image doesn’t show up to the left of the h3 post title; The space above the menu is too much. I can deal with the menu space, but the h3 headers are important.

    IE: Post information text is reduced (see size on Safari to see correct size) ie: the date, time, poster, comments. Also the h3 header is is lower than it should be.. it should be centered vertically in the image. The h3 header text size is correct in this version.

    Firefox: Displays perfect with three exceptions… the h3 text is too large, the post info text displays too small, and there is a question mark at the bottom of each post…

    You can see my CSS sheet here:

    https://jigsaw.w3.org/css-validator/validator?uri=www.motopassionmag.com%2Fwhereisjenny%2Fwp-content%2Fthemes%2FWhereIsJenny%2Fstyle.css&usermedium=all

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter jenny37

    (@jenny37)

    I forgot the link to my website is https://www.whereisjenny.com

    I don’t know if you are working on something or not, but the link above is totally blank. Nothing. The source code gives a frame (icky) to motopassionmag.com but that turns up nothing as well.

    But here is what I can give you based on what you posted.

    1. Make sure that you use generic fonts in your fonts list as the validator recommended. There is a good basic information article on fonts on the WordPress Codex that might help you determine which font and how to use them to help with some of this.

    2. Set a basefont in the body CSS style as an em (you did) and then refer to everything else as a percentage rather than em of the base font. This tends to get a more consistent look across browsers, but not always. Depends upon the font and the computer and browser.

    3. Each of the browser’s you’ve listed have issues with their interpretation of space. MSIE is worse, but all play with space a little so sometimes exact pixel widths and positions (hate it) hold things in place when position is critical to your design.

    4. Because browsers see things differently, some of it you can deal with through hacks, and others you just have to live with and let it go.

    5. I did see that you had set your basefont (fron the validator link above) to be 0.7 em. That’s REALLY small for the average viewer. Honestly, 0.9 or 1em is better, but this is up to you. I personally like setting it at 1em so I have a better feel for size when using percentage.

    Other than directly viewing your site, there’s not much more I can offer. Fonts are tricky, and spacing can be a bear. I’ve found that if you design in Firefox, it tends to work across most browsers, if that helps, and their web developer tools are awesome.

    Also, if you are using frames, I recommend you do everything you can to NOT do that.

    Thread Starter jenny37

    (@jenny37)

    Sorry here is a link to the actual CSS style sheet:

    https://www.motopassionmag.com/whereisjenny/wp-content/themes/WhereIsJenny/style.css

    Thanks for the advice, I’m going to change the base font and then use percentages and see if that works better.

    I’m still a little unsure about the positioning… and why even the colors are showing up wrong in my h4 (used in the pages as subheadings) Shows up black in one browers and brown in another and the sizes still vary. Very annoying! Why can’t all browers use the same stuff!

    Thread Starter jenny37

    (@jenny37)

    Okay. So I did the percentage thing… and it worked out well… fixed the majority of my problems… I’m a designer so I’m really picky about font sizes but I guess I’ll have to live with the subtle differences. Sigh.

    However, I still have an issue with Safari displaying my post titles wrong… you can see it here. it doesn’t put it in the image and it doesn’t make the font the right size. AHHHH.

    https://www.motopassionmag.com/troubleshooting.jpg

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Browser viewing problems… Safari, IE, and Firefox’ is closed to new replies.