I was trying to come up with a text-shadow alternative for IE9 (since filters look ugly in IE9).
I have what displays as a row of “tabs”. Some tabs have one line of text, some have two.
I’m trying to use :before with content: attr(data-content), and absolute positioning. Unfortunately, vertical centering is proving to be troublesome when the number of lines of text isn’t the same.
Is there a way to vertically center the absolutely position :before element, or is there another approach that is more prudent?
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<title></title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<style type="text/css" media="screen">
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
color: black;
background-color: #f9f9f9;
}
p { margin: .2em 0 .8em 0; }
ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
ul, ol { margin-top: .2em; margin-bottom: .8em; }
</style>
<style type="text/css" media="screen">
/* start nav buttons */
#breadcrumbs {
padding: .2em .5em .2em .5em;
border-bottom:1px solid #0060af;
background: #00A0E4;
color:white;
font-weight:bold;
text-shadow: 0px 1px 1px #0A649C;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
@-moz-document url-prefix() {
#breadcrumbs { /* fix for relative position branchtab not overlapping the breadcrumb border */
position:relative;
top:1px;
margin-top:-1px;
}
}
#branchnav{
padding-bottom:.8em;
}
ul#branchtabs, ul#branchtabs li, ul#header-nav-tabs, ul#header-nav-tabs li {
padding:0;
margin:0;
}
ul#branchtabs {
display: table;
text-align: center;
margin: 0 auto;
height:77px;
}
ul#branchtabs li {
display: table;
float:left;
list-style: none outside none;
width:17%;
margin: 0 .6em 0 .6em;
}
ul#branchtabs li a {
display: table-cell;
text-align:center;
vertical-align:middle;
font-weight: bold;
font-size: 1em;
overflow:hidden;
height: 75px;
color:white;
text-shadow: 0px -1px 1px #333333;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
ul#branchtabs li a, ul#branchtabs li a:hover {
text-decoration: none !important;
}
ul#branchtabs li a:hover, ul#branchtabs li a.selected{
position:relative;
top:-1px;
padding-top:1px;
background:#00A0E4;
border-bottom:1px solid #006b6b;
border-left:1px solid #006b6b;
border-right:1px solid #006b6b;
text-shadow: 0px 1px 1px #333333;
-pie-background:#00A0E4;
}
.branchtab-orange {
/*
#dd5828 dark
#f47920 med
#fcaf17 light
*/
background-color:#f47920;
background: -moz-linear-gradient(top, #f47920 0%, #fcaf17 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f47920), color-stop(100%,#fcaf17));
background: -webkit-linear-gradient(top, #f47920 0%,#fcaf17 100%);
background: -o-linear-gradient(top, #f47920 0%,#fcaf17 100%);
background: -ms-linear-gradient(top, #f47920 0%,#fcaf17 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47920', endColorstr='#fcaf17',GradientType=0);*/
-pie-background: linear-gradient(top, #f47920 0%,#fcaf17 100%);
background: linear-gradient(top, #f47920 0%,#fcaf17 100%);
border-bottom:1px solid #dd5828;
border-left:1px solid #dd5828;
border-right:1px solid #dd5828;
}
/* end nav buttons */
#pagecontainer {
/*background:white;*/
width:978px;
margin: 0 auto;
margin-bottom: 25px;
border-radius:1px; /* fix for PIE not applying on #branchnav */
}
</style>
<!--[if lt IE 10]>
<style type="text/css" media="screen">
#pagecontainer, #breadcrumbs, ul#branchtabs li a { behavior: url('css/PIE.htc');}
</style>
<![endif]-->
<!--[if IE 9]>
<style type="text/css" media="screen">
#breadcrumbs {
position:relative;
z-index:1;
}
#breadcrumbs:before{
position:absolute;
content: attr(data-content);
color: #0A649C;
width: 100%;
top: 1px;
left: 1px;
z-index: -1;
opacity:0.5;
padding: .2em .5em .2em .5em;
}
ul#branchtabs li a {
position:relative;
z-index:10;
}
ul#branchtabs li a:after{
position:absolute;
content: attr(data-content);
color: #333333;
width: 100%;
left:0px;
z-index: -1;
opacity:0.5;
top:50%;
margin-top:0px;
}
ul#branchtabs li a.selected:after, ul#branchtabs li a:hover:after{
margin-top:-3px;
}
</style>
<![endif]-->
<!--[if lt IE 9]>
<style type="text/css" media="screen">
#breadcrumbs {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0A649C,direction=135,strength=1);
}
ul#branchtabs li a {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=45,strength=1);
}
ul#branchtabs li a:hover, ul#branchtabs li a.selected{
filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=1);
}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css" media="screen">
#breadcrumbs{
margin-bottom:1px;
}
ul#branchtabs li a:hover {
padding-top:2px;
height:74px;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css" media="screen">
ul#branchtabs li{
line-height:75px; /* for one line of text */
}
ul#branchtabs li .twolines{
line-height:37px; /* for two lines of text */
}
ul#branchtabs li a {
padding-top:1px;
display:block;
}
</style>
<![endif]-->
</head>
<body>
<div id="pagecontainer">
<div id="branchnav">
<div id="breadcrumbs" data-content="Home » Page1">Home » Page1</div>
<ul id="branchtabs" class="cachet-bold">
<li><a href="" class="branchtab-orange twolines" data-content="Extended Text Here">Extended Text Here</a></li>
<li><a href="" class="branchtab-orange" data-content="Text Here">Text Here</a></li>
<li><a href="" class="branchtab-orange twolines" data-content="Extended Text Here">Extended Text Here</a></li>
<li><a href="" class="branchtab-orange" data-content="Text Here">Text Here</a></li>
<li><a href="" class="branchtab-orange" data-content="Text Here">Text Here</a></li>
</ul>
</div>
</body>
</html>
Attached is a screenshot in firefox 14 of what it should look close to and a screenshot of how it currently looks in IE9.