IE pre font-size problem

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

On 2006-08-06, adamstoffel (AT) gmail (DOT) com 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/examples/incrediblecss.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)

On 2006-08-06, Chris F.A. Johnson wrote:

On 2006-08-06, adamstoffel (AT) gmail (DOT) com 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/examples/incrediblecss.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 wrote:

On 2006-08-06, adamstoffel (AT) gmail (DOT) com wrote:
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/examples/incrediblecss.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

On 2006-08-06, Beauregard T. Shagnasty wrote:

Chris F.A. Johnson wrote:

On 2006-08-06, adamstoffel (AT) gmail (DOT) com wrote:
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/examples/incrediblecss.jpg>.

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

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.

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)