SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    text-shadow alternative for IE9

    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?

    Code:
    <!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 &raquo; Page1">Home &raquo; 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.
    Attached Images Attached Images
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    The jquery solution is broken and throws script errors. I'm guessing it doesn't work with current versions of jquery.

    I found another jquery solution: https://github.com/heygrady/textshadow, which actually seemed to work rather well. The only minor quirk is that the vertical offset is off by one pixel in IE9.

    Code:
    <!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">
    
    
    <script src="jquery.js" type="text/javascript"></script>
    
    
    <!--[if IE 9]>
    <link rel="stylesheet" href="jquery.textshadow.css">
    <script src="jquery.textshadow.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#breadcrumbs").textshadow('0px 2px 2px #0A649C');
            $("ul#branchtabs li a").textshadow('0px 0px 1px #333333');
            $("ul#branchtabs li a").hover(
                function(){
                    $(this).textshadow('0px 2px 1px #333333');
                },
                function(){
                    $(this).textshadow('0px 0px 1px #333333')
                });        
        });
    </script>
    <![endif]-->
    
    
    <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('PIE.htc');}
        </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 &raquo; Page1">Home &raquo; 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>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


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
  •