Website Design Forum - IE pre font-size problem

Author

IE pre font-size problem

adamstoffel@gmail.com

2006-08-05, 10:44 pm

I have the font size for pre tags defined in a CSS stylesheet. This
works in Firefox, but the text displays too large in IE as it seems to
completely be ignoring the "font-size" property. This causes the box
to be to large and screw other properties up.

the code is:

pre {
border:1px solid #56b7f4;
padding:3px;
margin-right:1px;
font-family:Courier,"Courier New","fixed width";
font-size:11px;
background-color:#0062a0;
}

so you can see it, the page is at
http://www.incrediblecss.com/csstutorial/intro.php

Thanks,
Adam

Chris F.A. Johnson

2006-08-06, 6:46 am

On 2006-08-06, adamstoffel@XXXXXXXXXX wrote:
> I have the font size for pre tags defined in a CSS stylesheet. This
> works in Firefox, but the text displays too large in IE as it seems to
> completely be ignoring the "font-size" property. This causes the box
> to be to large and screw other properties up.
>
> the code is:
>
> pre {
> border:1px solid #56b7f4;
> padding:3px;
> margin-right:1px;
> font-family:Courier,"Courier New","fixed width";
> font-size:11px;
> background-color:#0062a0;
> }
>
> so you can see it, the page is at
> http://www.incrediblecss.com/csstutorial/intro.php

You have more problems than that. Take a look at how it appears in
my browser:
<http://cfaj.freeshell.org/web/examp...crediblecss.jpg>.

I would suggest that you learn more about CSS before trying to
teach others how to use it.

Get rid of the fixed widths in pixels, get rid of font-sizes in
pixels, and most of your problems will disappear.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Beauregard T. Shagnasty

2006-08-06, 6:46 am

Chris F.A. Johnson wrote:

> On 2006-08-06, adamstoffel@XXXXXXXXXX wrote:
>
> You have more problems than that. Take a look at how it appears in my
> browser: <http://cfaj.freeshell.org/web/examp...crediblecss.jpg>.

How did you get to see .. um .. words? Here's what I see:
http://k75s.home.att.net/show/incrediblecss.jpg

> I would suggest that you learn more about CSS before trying to teach
> others how to use it.

Second the motion. <g>

> Get rid of the fixed widths in pixels, get rid of font-sizes in
> pixels, and most of your problems will disappear.

...and that font Helv.

--
-bts
-Warning: I brake for lawn deer

Chris F.A. Johnson

2006-08-06, 6:46 am

On 2006-08-06, Chris F.A. Johnson wrote:
> On 2006-08-06, adamstoffel@XXXXXXXXXX wrote:
>
> You have more problems than that. Take a look at how it appears in
> my browser:
> <http://cfaj.freeshell.org/web/examp...crediblecss.jpg>.
>
> I would suggest that you learn more about CSS before trying to
> teach others how to use it.
>
> Get rid of the fixed widths in pixels, get rid of font-sizes in
> pixels, and most of your problems will disappear.

I'm afraid I was a little hasty in my recommendation. The site is
laid out with tables instead of CSS, so it will require major
surgery to fix it.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson

2006-08-06, 6:46 am

On 2006-08-06, Beauregard T. Shagnasty wrote:
> Chris F.A. Johnson wrote:
>
>
> How did you get to see .. um .. words?

Just my bad luck, I guess. It appears that all the background
colours are GIFs, and foreground and background are set to the
same colour. They have done some trickery to prevent people
downloading the GIFs themselves.

I wonder whether there is any intention of providing a real page?
Some of links are redirected to a commercial webhosting site.

> Here's what I see:
> http://k75s.home.att.net/show/incrediblecss.jpg

You'd think that, before putting a link to the CSS validator on the
page, they would have taken heed of at least some of the 75
warnings it provided:

* Line : 11 (Level : 1) You have no background-color with your color : a:visited
* Line : 11 (Level : 1) You have no background-color with your color : a:visited
* Line : 17 (Level : 1) You have no background-color with your color : a:hover
* Line : 17 (Level : 1) Same colors for color and background-color in two contexts #sadrzaj and a:hover
* Line : 17 (Level : 1) Same colors for color and background-color in two contexts body and a:hover
* Line : 17 (Level : 1) Same colors for color and background-color in two contexts #desna_kolona and a:hover
* Line : 29 (Level : 1) Same colors for color and background-color in two contexts #sadrzaj and .content_title
* Line : 29 (Level : 1) Same colors for color and background-color in two contexts #desna_kolona and .content_title
* Line : 29 (Level : 1) Same colors for color and background-color in two contexts body and .content_title
.......
* Line : 233 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 233 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : td.cursor
* Line : 237 (Level : 1) Same colors for color and background-color in two contexts body and td.testcursor
* Line : 237 (Level : 1) Same colors for color and background-color in two contexts #sadrzaj and td.testcursor
* Line : 237 (Level : 1) Same colors for color and background-color in two contexts #desna_kolona and td.testcursor
* Line : 237 (Level : 1) You have no background-color with your color : td.testcursor

>
> Second the motion. <g>
>
>
> ..and that font Helv.

Just a typo; should have been "Hell". ;)

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)