[SOLVED] Firefox Bug

[TheFilmGod]

Hi, I found a firefox bug. I was looking on google if anyone has yet found it. And I still can't find documentation for it. What happends is I have a three column css. Done by floating each element to the left. This works in firefox fine. But when a parent to those three columns, container, has a border attached. That border is not rendered in firefox. It is rendered just at the top. Then the rest of the content is overlapped by the floats. Now, IE WORKS!! 

 

But mozilla firefox doesn't?  ???

 

Here is the html snippet

<div id="interact"><div id="interactbuttons">

<div id="interactfriend">friend</div>
<div id="interactnominate">nominate</div>
<div id="interactshame">shame</div>

</div></div>

 

FULL CSS:

#interact {
width: 388px;
border: 1px solid #0000FF;
position: relative;
margin-top: 10px;
}
#interactbuttons {
width: 380px;
margin: 0 auto;
}
#interactfriend {
width: 120px;
float: left;
}
#interactnominate {
width: 120px;
float: left;
}
#interactshame {
width: 120px;
float: left;
}

 

Here is a link. This page has some extra content, but I don't want to clog up the above codes...

wwpknights.com/profiles/bug

[TheFilmGod]

okay. So the solution is to use absolute positioning from the parent's edges. And then you have to have to define the height of the parent. This isn't a too bad, but I would have rather let FireFox show its awesome powers then see IE stand up and defeat it crazy style... 

 

Please tell me if there is another way to do three columns. And if you have heard about this bug! Greatly appreciated! Thanks!

[AndyB]

Please tell me if there is another way to do three columns.

Zillions of other ways. many of which don't use absolute position.

http://css-discuss.incutio.com/?page=ThreeColumnLayouts lists many, many, many of them.

 

Also, well worth a read is http://www.alistapart.com/articles/holygrail