SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Centering Issues

    I'm creating a html page that will be used as the source of a toolbar "app". I want the text link to be centered both vertically and horizontally. The code below works fine in FireFox, but in IE the text link is not properly centered.

    FireFox:


    IE:


    Code:
    <head>
    <style type="text/css">
    A:link {background: <?=$backcolor?>; text-decoration: none; font-weight:bold; color: <?=$forecolor?>}
    A:visited {background: <?=$backcolor?>; text-decoration: none; font-weight:bold; color: <?=$forecolor?>}
    A:active {background: <?=$backcolor?>; text-decoration: none; font-weight:bold; color: <?=$forecolor?>}
    A:hover {background: <?=$backcolor?>; text-decoration: underline overline; font-weight:bold; color: <?=$forecolor?>}
    body
    {
    margin: 0;
    padding: 0;
    text-align:center;
    }
    .fnbar
    {
    font-family : Arial;
    background: <?=$backcolor?>;
    color: <?=$forecolor?>;
    font-size: 12px;
    }
    </style>
    
    <meta http-equiv="refresh" content="25">
    </head>
    
    <body
    
    <div class="fnbar" style="display: table; height: 20px; text-align:center; width:175px; #position: relative; overflow: hidden;">
        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
          <div style=" #position: relative; #top: -50%">
    		<a target="_blank" href="http://www.sanctionedmedia.com/go.php?rlink=<?=$linkran?>" title="<?=$btitle?>"><?=$addchr?> <?=$Btext?> <?=$addchr?></a>
          </div>
    	</div>
    </div>
    
    </body>
    How can I fix for IE?

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If it's a multi line element you can do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    .outer {
        position:relative;
        display:table;
        height: 250px;
        width: 300px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #CCCCCC;
        background:red;
        margin-bottom:10px;
    }
    .inner {
        width:100&#37;;
        display:table-cell;
        vertical-align:middle;
        position:relative;
    }
    .inner p {line-height:1.3;}
    .inner a {text-decoration:underline overline;}
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    .inner {top:50%;left:0;}
    .inner p{top:-50%;    position:relative;}
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>Vertical align elements of different heights</h1>
    <div class="outer">
        <div class="inner">
            <p><a href="#">THIS IS THE TEXT<br />CONTENT</a></p>
        </div>
    </div>
    </body>
    </html>
    If it was a single line that would never wrap then all you need do is set the line-height to the height of the box it sits in and it will automatically be vertically centred. The text could not be allowed to wrap though or it will break.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might also want to check out

    CSS Centering - Fun for all
    http://www.maxdesign.com.au/articles/center/

    They have some good information, especially with regards to centering things in IE.


    For what it's worth!

  4. #4
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Paul_O'B! That worked perfectly. Much appreciated.

    webgyver, thanks for the reference link.


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
  •