Jump to content

Font Color And Size Inconsistent Results


Bernice
 Share

Recommended Posts

I have a css that is linked to from the header page of my site. Because the header has asp code in it I had to create a duplicate header for my non asp file location. The headers are supposed to look identical. One is stored in my root directory the order in a sub directory.So the one without asp has the reference#1. <link href="cart/stylesheets/shop.css" rel="stylesheet" type="text/css">seen herehttp://theringlord.com/StoreHelp.shtmlthe one with the asp have the reference#2. <link href="stylesheets/shop.css" rel="stylesheet" type="text/css">Other than the removal of the asp links and replacement with simply html in #1 - there are no differences with the code.#2 is seen herehttp://theringlord.com/cart/shopdisplaycategories.asp#2 behaves perfectly#1 does the following anomalies -look at the right side of the page and see the bgcolor for the area that says "Information" etc is supposed to be #cccccc - it is a different color than the color on #2. Again - there is no difference in code.- IE shows the text in #1 in the header to be larger. The text I'm referring to is the line containing "Store Info & Customer Service"The behavior of the text is consistent with the css.the css is herehttp://theringlord.com/cart/stylesheets/shop.cssAny advice or leads on the problem are appreciated.I' currently using Dreamweaver CS24. i am new to this. DW says there is only one error in the CSS and its the line -moz-box-sizing: border-box; which is listed as not compatible with all browsers

Link to comment
Share on other sites

I can't see a difference in the 2 background colours the are both showing #333333.The font problem I can't help with other than to say that the system I am viewing your site with is vista with a dpi of 125 (due to being on a 32"LCD screen 9 feet away) using IE7. All the fonts appear to be using text related css. I would recomend using px for font sizes in css as it will make it display better on more systems.

Link to comment
Share on other sites

I had made an error on my original post i meant the area that says Information has an inconsistent bgcolor.I will look into that px suggestionI currently havebody{ background-image: url(../images/header/hdrbg.jpg); background-repeat : repeat-x; background-position : top; margin : 0px 0px 0px 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;what px is small? can i still use small, medium, x-small? or would it then be a %

Link to comment
Share on other sites

Have a look at http://sureshjain.wordpress.com/2007/07/06/53/You are better having all font sizes in px, I used pt in a couple of places on a website and was amazed to see how badly it thru might layout out when I viewed it at 125dpi. Its also quite amazing at the number of websites for big companies that are unreadable due to this problem, and the amount of people using a tv to view sites is increasing.

Link to comment
Share on other sites

The W3C recommends using a relative Font-size, not a fixed (pixel) size due to usability and accessibility issues.http://www.w3.org/QA/Tips/font-sizeGoogle "Eric Meyers Reset CSS" for another opinion that says to declare text sizing in a Reset.css file that downsizes the page basic font size and then up-size where you need to. It takes more work, but is rather effective in standardising the display of Fonts across Browsers, which is important on many levels, especially for sight-challenged old folks... like me.

Link to comment
Share on other sites

jlhaslip: I had the entire css set up as recommended in the doc you linked to"even better, if a base font-size is set for the document, use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document."maybe I hadn't specified the base size correctly. How do I do this?was this the body{background-image: url(../images/header/hdrbg.jpg);background-repeat : repeat-x;background-position : top;margin : 0px 0px 0px 0px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: small;or is it font-size: 14px;Wouldn't setting a fixed base size and then relative other sizes be the same as setting them all as fixed?

Link to comment
Share on other sites

I have taken to using 14px as my default font size as this seems to be the best trade of for a fixed font size. I agrre that scalable sites ae much better for people with viewing difficulties but am yet to see a site that does this without severly losing its layout or whilst having the fonts on its graphics remain fixed.

Link to comment
Share on other sites

In addition to the Eric Meyer link, see the link referenced in this code block:

/* * 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.1em; padding: 0 5px; }	/* displayed at 10px */ h5 {font-size:1.0em; padding: 0 5px;}   /* displayed at  9px */ h6 {font-size:.9em; padding: 0 5x;}   /* 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:

See also a demo of the Meyers and Clagnut methods here: http://www.jlhaslip.trap17.com/3_col_layout/reset2.htmlCheck this link in any or all the browsers you have and notice that the font-size is consistent between them. It is the only method I have found that does that so effectively. My experience with IE, Opera, Firefox, Safari, Konquerer all keep the identical Font-size and line height. Check the page in whatever Browsers you have to confirm its value. I do not have access to the Google Chrome Browser, but since it is more complaiant than IE, I expect that it will also handle the issues fine.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...