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: <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> Code (markup): How can I fix for IE? Thanks!
Please, when posting your page's code, don't show us the server-side scripting. We don't necessarilly have your preferred language on our machines, and we don't want to run your script anyway. Show us the server output. Easy way? Open the page in your browser, and select page source to copy/paste. Format your code for easy reading with human eyeballs. Your html isn't badly formatted, but the css is all on one line; that's really tough going. Put each property on its own line, indented from the selector. E.g. as you almost did with .fnbar. Do not ever use the style attribute to inline css within the html markup. Note: :hover should always precede :active. As you have it, the :active is overridden by :hover unless you tab to give the link focus, then use the keyboard to activate the link. cheers, gary