Twisted in fireFox

I have a webPage at http://dot.kr/joon/010/.
The page is normally displayed in chrome and opera
But in fireFox, the footer on the bottom is not full-widely spread.
It has also similar problem in safari.
How can I fix it?

I have two more questions with the page.
(1) How can I put the “SNS” and “guide” vertically centered in footer?
(2) How can I make the underline of the link “menu” thinner without reducing the font size of the menu link on the Header in top of the browser?

Hi,

You’ve specified the footer element as display:table-row so the browser will construct an anonymous display:table parent as none exists and default to the shrinkwrap behaviour of tables. Set the footer to display:table and 100% width and it will stretch across.

I would then use 3 display:table cells across that footer so that you can vertically align the contents easily with vertical-align:middle on the table-cell elements. Just place your content in these table-cell elements and also set text-align on each cell as required (left center and right) instead of using floats.

For your menu you could use a border-bottom instead of text-decoration:underline. Or if you want more control over where the line is then use :after to draw a line under the menu. Set the menu to position:relative and then something like:


.menu:after{
content:" ";
position:absolute;
bottom:0;
right:0;
left:0;
height:1px;
background:blue;
}