Text box width not consistent

[Grump]

A left floating text box that text wraps around the top, right and bottom is not rendering at the same size in all browsers (IE and Firefox are my main test platforms). The page was going pretty well, thanks to some help I have already received, but I hit a snag on this. Please take a look at the test page below.

TEST PAGE

The relevant style code follows:

.textboxleft 
{
	background: #3E5C92;
	font: normal 0.8em/140% arial, helvetica, sans-serif;
	margin: 10px;
	width: 160px;
	border: 1px solid #E4E7F5;
	float: left;
	overflow: hidden;
	padding: 0.5em;
}
.textboxleft p
{
	color: #000000;
}
ul li
{
	color: #E0E0F6;
	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}

Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

If there is something I can alter in the CSS to make the box 160px wide (or whatever I decide on) in all browsers, please let me know. I am very new at this and have only gotten this far with the help of people like you.

Thank you,

Grump
PS: you will also notice another thread concerning the bulleted list problem you see. It bumps into the text box and doesn't look good. Please excuse any redundancy, but these are 2 different problems, I think.

[Ricoool]

this looks like the "old" box model problem, http://www.positioniseverything.net/...box-model.html

[Grump]

That was interesting and I even applied the hack, but I knew that wasn't the problem. It's not IE that is not rendering the code correctly, it's Firefox. The box is s'posed to be 160px wide, have a 10px margin, a border only 1px and the padding is 0.5em. The font style is arial, although I have changed it to see of that helps (it's at tahoma now on my working copy).

I checked the size of the text box on both browsers, from inside border to inside border, and it is about 170px (using Moplanet PixelRuler 3) on both browsers. This could only mean the text spacing or the text size appears differently on each browser -- bigger on FF.

The box had to be increased to 170px wide in order to render the bulleted list with no line breaks between items. This is too wide for what I want. IE renders the text and box just fine, FF does not. There is also a horizontal line, styled in css, that is s'posed to be 1px high, 85% wide, centered and white, which is exactly how IE renders it, but FF has it as a gray groove that looks more than 1px and off center.

I am trying to write compliant code. More specifically, I am trying to use compliant code -- a lot of the code has been "borrowed" from tutorials and my forum software (vB). Maybe it's the padding, maybe the margin, or maybe it's the font style, I don't know. I hope someone can help.

Thank you,

Grump

[Ricoool]

I still think it is the box model, not on the box but on the text that wraps around it, about the HR, I dont think that you can give it a color/style in mozilla based browsers.