Box cross browser issue

ie6 firefox browser compatability

[JaneC]

Its that age old frsutration of ie vs Firefox.

Three columns have been created in CSS but the lengths change in firefox as opposed to ie7 (no idea about ie6 yet)

One of the issues seems to be the line spacing in box3 when content is entered

Any ideas would be appreciated.
Thanks

#box2 {
float: left;
width: 165px;
margin-top: 1%;
padding: 10px 10px 0px 10px;
background-color: #ffffff;
border: 1px solid #000000;
}

#hr {
padding: 0px;
border-right: 0px;
border-left: 0px;
border-top: 0px;
border-bottom: #000000 1px solid;
margin-top: 25px;
margin-bottom: 20px;
}

#box3 {
float: left;
width: 305px;

margin-left: 1%;
margin-top: 1%;
padding: 10px;
background-color: #ffd543;
border: 1px solid #000000;
}

#box4 {
float: left;
width: 248px;
margin-left: 1%;
margin-top: 1%;
padding: 10px;
background-color: #fbe081;
border: 1px solid #000000;
}

[ebby]

what are you referring to by "length". The height? The width? Can you please explain the problem you're having a little more.

[appi2]

If your talking about the height of the boxes

IE sees it this way
1% margin
1px border
10px padding
FONTSIZE
10px padding
1px border
auto margin

Firefox sees it this way
1% margin
1px border
10px padding
NOTHING
10px padding
1px border
auto margin

add
font-size:0;
to
#box4 {}

to see what I mean.

edit missed 10px padding in FF example

[JaneC]

Thanks for the replies.

The issue is the height of the columns which is different on ie7 to firefox.

Someone mentioned it was not possible to get ie and ff looking the same but I don't see why not.

Can someone enlighten me.

Thanks

[edited by: encyclo at 2:08 am (utc) on June 16, 2008]
[edit reason] no links to personal sites please [/edit]

[ebby]

well from the code you have posted the height is not set so it would be realtive to the content within it.