IE vs FireFox Border Display

[hustont]

I have defined an outer container called outer in a css style sheet with a border of
#outer {
border-width: 3px;
border-style: ridge;
border-color:blue;
}

In IE, the border frames the entire contents, but in Firefox, the border just creates a small box at the top of teh screen. I don't know if it is a CSS problem, or if Firefox is somehow not recognizing the <div>, </div> properly.

The html is at http://ourultimatewedding.com/index.htm.
The style sheet is http://ourultimatewedding.com/styles/style1.css

Appreciate any help or suggestions.

Also, in IE the border around the Footer does not display the top border. In Firefox, it displays the border around the entire Footer.

Is it a possible margin problem where the <div> above the footer is over top of the border?

Thanks.

[alexjewell]

Try setting #outer's width and height to auto:



#outer{
width: auto;
height: auto;
border: 3px blue ridge;}


I also looked at the site in IE, and I don't see any border issues with the footer.

[hustont]

Thanks for the tip, however that did not solve the problem in IE. It is apparently a bug in Firefox with nested <Divs>, that I solved by submitting the following:
#outer:after { content: ""; display: block; height: 0; clear: both; }