Jump to content

The same in all browsers ?


Recommended Posts

I'm in the process of slight changes to coding to get my site looking the same in all browsers and it's working well so far on Firefox,Opera and IE7 .

There is one slight , but aggravating problem, font sizes ! Opera shows smaller than IE and Firefox shows larger than IE for the same font size it doesn't matter whether I use ' size:2;' or 'size:12pt:'

Is there a work around ?


2nd question, are there other browsers I should cater for ?

Link to comment
Share on other sites

Usually, I would suggest sizing fonts in ems (ideal, because the end user can resize the font size using their browser if necessary) or pixels (less idea, because IE won't resize fonts). I wouldn't suggest using pt or numbers for size, as you are doing at the moment


I would suggest focusing on Firefox, IE6, IE7, and Safari. Don't ignore the others, but don't stress too much if things aren't pixel perfect. Just make sure that things are readable, easily understandable, and any important functionality (contact forms, etc.) work correctly.


One thing that has definitely helped me in the past is to start with a reset stylesheet, which "resets" certain CSS properties to help standardize how the site looks across multiple browsers. Here is what I personally use:


Link to comment
Share on other sites

For font-sizing, I found the following works perfectly across Browsers.


* as per http://clagnut.com/blog/348/ and http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

body {font-size:62.5%}

// suggested sizes of fonts

#navigation {font-size:1em; }              /* displayed at 10px */
#content {font-size: 1.2em; }              /* displayed at 12px */
#sidebar1 {font-size: .9em; }              /* displayed at 9px */
#sidebar2 {font-size: .9em; }              /* displayed at 9px */
#sidebar3 {font-size:  1em; }              /* displayed at 10px */
#footer {font-size:  0.8em; }              /* displayed at  8px */

h1 {font-size: 2.5em; padding: 0 5px; }    /* displayed at 20px */
h2 {font-size: 1.5em; padding: 0 5px; }    /* displayed at 15px */
h3 {font-size:1.25em; padding: 0 5px; }    /* displayed at 13px */
h4 {font-size:1.15em; padding: 0 5px; }    /* displayed at 10px */
h5 {font-size:1.10em; padding: 0 5px; }    /* displayed at  9px */
h6 {font-size:1.05em; padding: 0 5px; }    /* displayed at  8px */

input, select, th, td {font-size:1em}      /* displayed at 10px */

// use this formula for calculating em sizing in child elements
// child pixels / parent pixels = child ems
// example:

ol li, li p, td p, blockquote p {font-size:1em}

And I use a modified Meyers reset as well for the other html. This Clagnut code standardizes IE, Firefox, Opera and Konquerer.

Link to comment
Share on other sites

To better explain:


1 em is the same as 100%, you can use either. The important thing to understand is that different users will choose different font sizes in their browsers to fit their needs, we all have different eyesight, so you should not choose the font size, the user should. They may also choose a font that works better for them, so Verdana font is larger than Arial font.


So ideally you suggest the general size using em or %. These base the size on the chosen font and font size the browser uses.


1em / 100% is the default size that the user has chosen for the browser and the chosen font (users can override your font choice).


.8em / 80% of the default font size and choice (smaller)


1.2em / 120% of the default font choice and size (larger).


So 1.2em / 120% for headers. .8em / 80% for say Copyrights.


This way you are saying what should default , larger or be smaller based on what the USER NEEDS to be able to use your site.


Websites will never look exactly the same between browsers as even the standards compliant ones are written by people who may understand the standards differently. They need to look good, but a difference is margin or text size should not be a show stopper. If they were all exactly the same... we would be back to having only one.

Link to comment
Share on other sites

  • 2 weeks later...

Well that it done my site is near compatable as I can get it with the following browsers, IE, Opera, (which I like ) Mozilla Firefox, (which I don't ) Safari and Konquerer ( which works better under Linux than it does under Windows )


I've taken LSWs points and changed some of the fonts to make it easier to read.


A few interesting points have come up with using different browsers and operating systems.


Originally W3C would only validate my stylesheet as 2.0 but since using a modified Meyers and Clagnut code in my css it now validates as 2.1 although the basic code ie the embedding of "Monotype Corsiva CE" font remains unchanged..


All the browsers I played with only one did not display embedded fonts ! So Firefox may be the the only "compliant" browser it's also the only one of shall I say the main browsers that is out of step. :(


Thanks again for all your help.


PS. I've given these forum a credit on my site.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...