CSS displays properly in IE but not Firefox

Yet another CSS question

[pkropp]

I am attempting to replace tables on my website and ran into a disply problem that I am trying to get fixed.

Through trial and error and a lot of reading I have figured out most of my issues, however a box is killing me. The idea is to have a box with 6 sections. (Please excuse the table terminology.) In need the left column to be 75% and 3 rows high and the right column to be 25% and 3 rows high. I would prefer to have the box a set width. Currently I have only been able to accomplish this with the following CSS. It shows perfectly in IE 6 but not good in Firefox. What am I doing wrong if anything?

<code>

CSS>

#orderbox {
float:left;
height: 75px;
width: 75%;
padding: 3px;
background-color: #00CC99;
border: 2px solid #FF0000;
}
#orderboxprice {
float:right;
height: 75px;
padding: 3px;
text-align:center;
padding-top: 22px;
background-color: #00CC99;
border: 2px solid #FF0000;
width: 25%;
}

HTML>

<div id="orderbox">
<p> Stuff Here </p>
</div>

<div id="orderboxprice">
<p> Price Here</p>
</div>

<br>

<div id="orderbox">
<p> Stuff Here </p>
</div>

<div id="orderboxprice">
<p> Price Here</p>
</div>

<br>

<div id="orderbox">
<p> Stuff Here </p>
</div>

<div id="orderboxprice">
<p> Price Here</p>
</div>

</code>

The boxes overlap in Firefox butfit perfectly in IE.

Is there an easier way wher I can have absolute widths?

Paul

[Blackbird42]

Well, if you're not aware, the width: declaration defines the width of the content inside the box. Looking at this:

#orderbox {
float:left;
height: 75px;
width: 75%;
padding: 3px;
background-color: #00CC99;
border: 2px solid #FF0000;
}

That's actually going to give you 25% + 2px border-left + 2px border-right + 3px padding-left + 3px padding-right. An unfortunate complexity of the W3C Box Model. That means you're going to have 10 extra pixels for both boxes, on top of the 75% and 25%, which adds up to more than 100%.

You could probably fix it if you nest an extra div inside the original div; you'd have the first div at a set width, and define the padding and border on the second div, and inside that would be the content. But that's an HTML hack.

You could also look into box-sizing: border-box and -moz-box-sizing: border-box to make 75% actually include the padding and border, which works in IE5mac, Mozilla, and a few other browsers. IE5/win already does it like that, even though it's not supposed to. This was fixed in IE6, so it follows the W3C's box model, but by adding an XML declaration at the beginning of your page, IE swaps to the original box model, which calculates it like IE5. (That's an HTML hack too, though...)

Secondly, you can only have one unique ID per page, and you have id="orderbox" and id="orderboxprice" declared multiple times. You should use classes instead.

[pkropp]

Thank you for the info. I did not know that about the boxes. I will look up the other command you talked about and get that into my header. I also will change these to classes.

This is my attempt to clear up a horrible use of nested tables when I was just starting out.

Is there anyway to declare these as a fixed width?

Paul

[createErrorMsg]

Is there anyway to declare these as a fixed width?

Yes, and I recommend it. Fixed widths are far easier to work with (IMO) and make box model calculations far easier. What's more, they make box model calculations reliable (50% plus 20px padding and 25% plus 20px padding may equal less than 100% with the browser fully expanded at 800X600 resolution, but what happens when you go to 600X400 res or resize the browser?).

For fixed width, use pixels (px) to specify widths, and, as described above, be sure to add up all horizontal px measurements (border, margin, padding, width) to get the calculated width of each box.

Once you've got it working in FF (the compliant browser), THEN go back and tweak it to work in IE (the non-compliant browser). It's always a good idea to develop for the browser that gets things right then make changes/hacks/tweaks for the one that gets it wrong.

Look up information on the Tantek Hack or the Star Hack (preferrable) to see how to trick IE into line.

[pkropp]

Ok I have made the changes reocommended. Here is the update of this section of css:

#orderbox {
width: 400px;
padding: 3px;
left:170 px;
}

.productdesc {
float:left;
height: 75px;
width: 300px;
padding: 3px;
background-color: #00CC99;
border: 2px solid #FF0000;
}

.productprice {
float:right;
height:55px;
padding: 3px;
padding-top: 20px;
background-color: #00CC99;
border: 2px solid #FF0000;
width: 75px;
}

* html .productprice {
height: 75px;
h\eight: 55px;
}

<html>

<div id="orderbox">

<p class="productdesc">
Product description. </p>
<form class="productprice" ...>
Form data here.
</form>

<p class="productdesc">
Product description. </p>
<form class="productprice" ...>
Form data here.
</form>

</div>

</html>

Now the problem in FF is that the product price box is shifted up 5 pixels. Any ideas of why?

[createErrorMsg]

left:170 px;

This property may be ignored with the space between the number and the 'px'. Ie probably fixes it for you, but good browsers won't.

* html .productprice {
height: 75px;
h\eight: 55px;
}

You use the star hack here to feed IE a different height. Box model problems are related to box widths, not heights. Is there another reason you've done this?

The 5px upward shift could be any number of things, most likely it's a default padding or margin difference on the form elements contained in that box. Try explicitly setting paddings and margins for the elements in .productprice and see if it helps.

[pkropp]

I used the IE star hack because IE 6 was adding the top padding to the height of the box. When I setup the hack it appears the same height.

I will try setting my other setting explicitly.

Paul