SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,382
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    .menu:after{
    content:" ";
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    height:1px;
    background:blue;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •