Yesterday I blogged about how we are working on improving the user interface of Project Showroom. I got an email with a blog article from software engineer John Schmier about how the cascading style sheet (CSS) was styled to support the tool tip for the items in the scene. John's motivation for writing this article was the lack of a good example or documentation on the web for how to achieve something that seems so commonplace and simple. He wanted to help others who are CSS or web developers find solutions. This solution (like all other examples that get you 80% of the way) involves the CSS IE Hack of using a non-alphanumeric character before the property name (in his example John uses the # symbol).
While working on the latest release of Project Showroom, we wanted an aesthetically pleasing display of a product's name within a given scene when the mouse is moved over the thumbnail for the item. To achieve the desired effect, we wanted to display the contents in a "tool tip looking" display.
Project Showroom is a zero client install application, what this means is Project Showroom is a 100% JavaScript, HTML, CSS application. Developers who have worked in this environment all have dealt with browser specific issues regarding JavaScript and CSS alignment. Project Showroom is no different, and while CSS has a property for vertical-align, it doesn't work like valign does within HTML tables. Standard solutions will allow text alignment to be centered or justified, but the vertical alignment will either be at the top or bottom of the designated DIV tag. My researching of tips from multiple web resources did not solve the issue for Internet Explorer 7. There were still issues related to the text vertical alignment being top justified.
Due to IE7 CSS alignment issues, we needed to have both IE and Firefox style the CSS separately, but we would like to avoid having to detect the browser and apply different CSS files. To avoid separate CSS files, if you add a non-alphanumeric character immediately before a property name, the property will be applied in IE and not in other browsers.
Sample Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical middle alignment example</title>
<style type="text/css">
/*
* position the three sample div tags
*/
#oneLine { top:100px; left:50px; }
#twoLines { top:200px; left:50px; }
#threeLines { top:300px; left:50px; }
/*
* position the middle container to the left
* if middle container is positioned in the center
* the inner container will be pushed to the right.
*/
.outer {
position:absolute;
background: #FFF;
width: 200px;
height: 48px;
font: 300 12px Arial, Serif, Sans-Serif ;
border:solid 1px #000;
text-align:left;
display:table;
}
/*
* position and top need to be applied to IE only
* set the vertical-align to the middle for FireFox
* set to top to 50% for the inner container
*/
.middle {
#position: absolute; /* IE only */
#top: 50%; /* IE only */
display:table-cell;
vertical-align: middle; /* IE ignores */
width:200px;
text-align:center;
}
/*
* set the top to -50% to force IE to calculate the
* text to the middle.
*/
.inner {
#position: relative; /* IE only */
#top:-50%; /* IE only */
padding:0px 5px 0px 5px;
}
</style>
</head>
<body bgcolor="#e1e1e1">
<div id="oneLine" class="outer">
<div class="middle">
<div class="inner">
Single line horizontal center.
</div>
</div>
</div>
<div id="twoLines" class="outer">
<div class="middle">
<div class="inner">
Two lines that will wrap to display
vertical middle alignment.
</div>
</div>
</div>
<div id="threeLines" class="outer">
<div class="middle">
<div class="inner">
Three lines that will wrap to display vertical middle
alignment and horizontal center.
</div>
</div>
</div>
</body>
</html>
The solution implemented for Project Showroom has been tested to work with Fire Fox 2.x, Firefox 3.x, Microsoft Internet Explorer 6.x and 7.x and Google Chrome Beta.
Thanks John.
Subscribe
Facebook
Twitter
LinkedIn
Instagram