f1vlad.com

by Vladislav Kulchitski

*

css

♫ Hello strange Marillion, it's been a while since I made the heads of this old music hdd spin. 5 hours 22 min ago

This site has moved from YUI grids to Blueprint

This site has now moved from YUI grids to Blueprint.

The only reason to bother was mainly work-related, for practice. I don't really have anything bad to say about YUI grids, in fact I've grown to like it a lot. Equally, nothing bad to say about Blueprint, yet. Easy to understand and quite flexible.

There are some proprietary pages such as subaru/sparow, travel, rss madness and others that will stay YUI for now.

Show images in print mode with media="print" attribute

First, I was going to write an entire blog post about how to force images in browser in print mode, but decided to be brief. So print mode, that is when you click CTRL+P or APPLE+P and enter preview mode, then proceed with sending the document to a printer. Many may already know that most newer browsers, when in print mode, do use .css file with media="print" attribute like this: <link rel="stylesheet" rev="stylesheet" href="file.css" media="print">

Cool little hack, an author of which is unknown [to me] allows you to achieve this in the following manner: 

.cssClass {
        display: list-item !important;
        list-style-position: inside !important;
        letter-spacing: -1000em !important;
	text-indent:0 !important;
	list-style-image: url(/images/someimage.gif) !important;
}

You may need to mask/hide text that will pop up on top of this picture, but that is an easy part. This is a good starting point. An example of how I am using it on slashdot.org, for forcing logo and topic icons into print version, could be seen directly from a.fsdn.com/sd/print.css.

Don't want to satisfy IE8? Don't have to

Today I found out that if you don't want to do any sort of modifications to adjust your site for IE8, you don't have to do that. It isn't ideal situation of course, but there definitely could be circumstances where this could be necessary; for instance, web developer got fired.

The following tag will make this happen:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

It will display standards DOCTYPEs in IE7 Standards mode and quirks DOCTYPEs in Quirks mode.

More info about this is available on MSDN website.

Do not forget display:table-cell

The last <table>-based website that I did was tomswebplaces.com, which I believe was in 2003. A lot has changed since, both on the web and the way I write HTML. But today I remembered <table> usage once again; that is, using <table> for layout and design, rather than tabular data.

The task at hand: to align text vertically in a div. At first quite trivial — div inside div, first position:relative, second position:absolute — until it comes to text wrapping. When text wraps to the next line, there's more white space above the box than below. I could not believe that there isn't a native solution for this. Few google queries revealed long forgotten display:table-cell, combined with vertical-align:middle achieves desired behavior. It works perfectly on all standard compliant browsers; however, IE6 and IE7 that do not support display:table-cell.

Below is the way I solved IE6/IE7 problem via adding extra wrapper <span /> around the block that is to be vertically aligned. This wrapper is used to imitate vertical alignment in these two non-compliant browsers, while proper layout is display in all, dare I say, normal browsers; it isn't perfect, but it works.

<html>
	<head>
		<style>
		div {
		border:3px dotted #ccc;
		height:140px;
		width:50%;
		display:table-cell;
		vertical-align:middle;
		}
		</style>
 
		<!--[if IE 7]>
			<style>
				span {margin-top:-1%;}
			</style>
		<![endif]-->
		<!--[if lt IE 7]>
			<style>
				span {margin-top:0;}
			</style>
		<![endif]-->
 
		<!--[if IE]>
			<!--[if !(IE 8)]>
				<style>
				div {
					position:relative;
				}
				span {
					height:140px;
					top:40px;
					display:inline;
					position:absolute;
					padding-top:3%;
				}
				</style>
			<![endif]-->
		<![endif]-->
	</head>
 
	<body>
 
	<div>
		<span>
			Long text that we want to vertically align in the middle in a div. Another sentense.
		<span>
	</div>
 
	</body>
</html>

In a couple of weeks, you will see how I utilized this method in production environment on slashdot user pages.

04/01/2009 update: finally I am able to reveal where I used this method: http://slashdot.org/~f1vlad/achievements, all achievements boxes are utilizing this.

Brainwashing ie6 to use min-width

This code snippet will force your ie6 clients to understand min-width, pretty cool hack.

element.style{
_width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 660 ? "660px" : "auto");
}

Note that I prepend '_' before 'width', that ensures that only ie6 will bother to try to interpret that command, other normal browsers will ignore that.

position:relative

If you have to hack your CSS for IE6, no doubt you faced with a lot of frustrations. One of the annoying things is when you set some element on the website and it all seems to be okay and finally problem solved. But as soon as you resize the browser, some elements jump to other seemingly random places.  But I wasn't smiling when trying to get this to work.

iThemer

I decided to write this remark after I overcame one challenge during one of my work tasks. This may seem trivial to some. It wasn't for me. Could be useful to someone else out there.

With my previous projects I had full access to css, html, js, etc. At my new job I have access only to css. At my new job I don't have access and cannot modify html structure. I can request html structure modification, but it will not be so quick.

*+html (StarHtmlHack)

Today I found a cool css hack called StarHtmlHack. Interesting problem. Pretty much for normal browsers I needed to add left: 0pt and for Internet Explorer 5--6, I had to add right:0pt. Yes I know, problem seems weird, but for consistent look of the div on my page in this case, that has to be the definition in the style sheet.

First solution was to include separate .css via <!--[if ie]>foobar<![endif]-->.

Syndicate content