Posted on by Michel · 6 Comments

IE9 background shifting bug

On Tuesday, I mentioned that the brand-new IE9 browser is out; yesterday and today, I am already fighting with the first IE9-bug I encountered… :-(

The story in short: I installed IE9 mainly because I was curious to see how good is the support for some of the new CSS3 properties — rounded corners, box-shadows, text-shadow, gradients, transitions, and so on.

So, as soon as IE9 was officially released, I installed it, then restarted my Win7 machine, and lo and behold! in one of the first designs I tested in it, I found a new bug (new in the sense: a bug that I never encountered in IE8 or IE7): a strange one-pixel shift in the background image of a page, when (un)certain conditions are met!

Here’s a test page:

https://www.optimiced.com/lab/2011/ie9-background-bug/

Test conditions:

— Internet Explorer 9 (you need Windows Vista or Windows 7; Windows XP is not supported).
— The browser window must be maximized.
— I tested with the following screen resolutions: 1680×1050, 1440×900. (Not sure if bug will happen if your screen is larger or smaller.)
— Open the test page, wait for it to load.
— With the mouse, scroll down to the bottom of the page, then up to the beginning. You have a 50%/50% chance to see a one-pixel shift in some part of the background of the page, in the upper part! (At least, I see such 1px shift…)
— If you refresh the page, bug is gone. If you scroll again down-up once or twice, bug is back again!
— (Update 1) If the Menu Bar is not open in IE9, the bug is not triggered. If the Menu Bar is open, it is triggered! (Just in case: screenshot of the toolbars that are open when the bug can be reproduced: Menu bar, Status bar.)
— (Update 2) If you have AERO disabled, the bug won’t show up (for example, if you use Windows Classic or Windows 7 Basic theme). If AERO is enabled (Windows 7 theme, with AERO = “ON”), the bug is there! (Big thanks to Adam Kiss, who made some tests.)
— (Update 3) “Show tabs on a separate row” should not be enabled (and it’s not, by default). If you select “shows tabs on a separate row”, bug will disappear too (?).
— If you put more Lorem Ipsum text in the main column, bug is gone.
— If you reduce (or increase?) the height of the main column (#content) in which the Lorem Ipsum text is located, the bug no longer appears. Currently, the div#content has a min-height of 500px.
— If you minimize the window of IE9 and then back again to maximized state, the bug disappears (page is re-rendered after a minimize > restore-back-to-maximized operation).
— The 1px shift occurs only in the upper part of the background image, and quite randomly.

Now, the background image is applied to the body element:


body {
background: #8F8F8F url(../img/body-test.png) 0 0 repeat-x;
}

…and there is nothing special in the code.

The left part of this background-image is the original image, the right part is for testing purposes — the horizontal lines help see if there are any shifts in the background image position. Otherwise, that was the original.

After many tries I discovered that the format of the background image does not matter (PNG, JPG, GIF…) as well as its size.

You can scroll with a mouse or the up-down arrows on the keyboard.

Of course, it’s possible that something in my setup (Win7/IE9) is wrong and so any kind of third-party confirmation for the existence (or non-existense) of this bug would be appreciated! (Btw, I never saw such a bug in IE7/8, Firefox, Opera, Safari, Chrome. Only in IE9.)

Here’s how the test page is supposed to look:

And here how it looks after a couple of scrollings down/up:

Also please note that after scrolling down/up, and then mouse-overing the elements in the navigation, another visual strangeness happens:

So, in “ideal conditions”, the page should look like this, but after some scrolling, here’s how it looks like (or even like this).

* * *

Otherwise, testing IE9 is fun — for now I see that CSS3 transitions and text-shadows are not supported. Border-radius and box-shadow are supported, though, which is nice. I’ll be testing more.

Any help is appreciated! Did I discover a bug? If yes, what triggers it?…

Posted on by Michel

Target only IE8, IE7 and IE6 in the CSS code

It’s not a very good idea to “hack” the CSS code in such a way so that certain rules will be seen by specific browsers only — usually, one or more than one version of Internet Explorer (IE Conditional Comments are a much better option, in most of the cases).

But sometimes this is the easiest (or the only) way to deal with the situation — let’s suppose, for example, that you don’t have access to the HTML but to the CSS files only. In this case, the following 4 lines of code might be useful:


body {
color: red; /* all browsers will see this */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

As you can see, it’s easy to write rules that will be “seen” only by IE8, IE7 or IE6, or a combination of these three IE versions. And let’s hope IE9 will need no hacks! ;)

(via #)

Posted on by Michel

The smell of HTML and CSS in the morning…

A few days ago, Jeffrey Zeldman said: I love the smell of HTML in the morning.

To which I replied: @zeldman I bet it smells like a good cup of coffee! ;-)

And Jeffrey replied: @optimiced How right you are.

This inspired me to quickly create the following illustration in Fireworks:

The smell of HTML (and CSS) in the morning

(NOTE: Coffee cup is re-created from scratch in Fireworks, although it looks like this illustration. The final appearance of my little drawing was also inspired by @molif, for which I’d like to thank her!:-)

Posted on by Michel

A better, more accessible CSS way to hide outline from links

When starting a new project, I do not use global CSS resets — like Eric Meyer’s excellent CSS reset. That’s why, I rarely have problems with removed outlines from links.

As you probably know, users which do not use a mouse but navigate webpages with keyboard only, need to see outlines on links when they tab through them. This helps them visually understand which link they will activate.

A fairly new trend is to remove (suppress) this dotted outline on links to make pages look “nicer” to the eye. While design may look “nicer” and more “Web 2.0” to some, when this outline is removed, the accessibility aspect of this remains, and it is very serious.

But Roger Johansson suggested a much better approach: remove links from :active state only!

This is the article that he recommends to all Web developers:

Better CSS outline suppression

Basically, what happens:

You remove the dotted outline from links which are only clicked with the mouse, while keyboard users will see the outline normally!

How? Just use this bit of code, and that’s it:

a:active {outline:none;}

Excellent tip!

I promise to myself that if I will ever try to remove the outline from links, I will do it in this, much more accessible way! :-)

Posted on by Michel

Anonymous Pro – an interesting font for coders

If you write code (HTML, XHTML, CSS, JS, PHP, etc.), then the Anonymous Pro monospaced font may be of some interest to you. It’s intended for coders and developers/designers (the 0, of course, is crossed;-) and it includes Cyrillic characters.

Anonymous Pro font

You can download it for free from here:

www.ms-studio.com/FontSales/anonymouspro.html

But my personal preference for a monospaced font is Consolas. As far as I know, this new font by Microsoft can be downloaded for free, too; Consolas is readable and suitable for all kinds of code — in my case, I most often see XHTML and CSS code blocks in it:)

Posted on by Michel · 1 Comment

“Jeffrey Zeldman is now following you on Twitter”

…or how Twitter can be actually of some use;-)

{ Some drafts in my blog were hidden really deep, so… ;-) }

{ This story developed somewhere in July 2009… }

Twitter is an amazing… media? Social network? Means for ultra-fast transfer of news, wisdom, stupid things and “important” things like “I am drinking coffee now”? Something like IRC, but with an option for SMS, filtering, search, etc.?

Twitter is all of this simultaneously! :-)

Jeffrey Zeldman's hat…I am a Web designer and (partially) a geek, so it was very interesting for me to follow the discussion in two of the latest publications of Jeffrey Zeldman:

www.zeldman.com/2009/07/02/xhtml-wtf/
www.zeldman.com/2009/07/07/in-defense-of-web-developers/

…where the consequences of discontinuing the work on the XHTML 2 standard, and what will happen with XHTML 1.0, HTML 4.01, as well as with the new HTML 5, were passionately discussed.

At some point, in the Zeldman’s website, a strange bug appeared (in Firefox 3/Win): somewhere around 3/4 of the page with his last post and the numerous comments below, the content suddenly was disappearing (screenshot). Without a reason. The page itself was validating perfectly and there were no problems with the encoding or the HTML/CSS code.

Jeffrey noticed the problem, too, and was trying to solve it for quite a long time. The assumption that a problematic pingback with UTF-16 encoding was the culprit, was not confirmed.

I tried to investigate, too, out of curiosity, without any positive results, though.

Finally, I assumed that there’s a CSS bug in the rendering engine of Firefox/Win which (maybe) can be fixed with some new CSS rule. One of the readers of Zeldman’s blog mentioned that he tried to check something with Firebug, so I quickly made a test page + CSS file with the rule which (supposedly) was fixing this issue; then I tested in Firefox 3.0.11/WinXP. The problem was gone! :-)

Only one line fixed the problem for Firefox:

div#wrapper {
overflow: visible;
}

Then I’ve spent some more time to test in detail if the change did not affect any other popular browser (Opera 9.6, Safari 4, Chrome 2, IE7, IE6) and finally, I wrote to Zeldman, proposing him the fix for Firefox.

Zeldman replied:

@optimiced Will try as soon as I’m back on my feet. Thanks wise one.

Soon after that, Zeldman implemented the fix, and the design was fixed! :-)

Unfortunately, the fix introduced a new bug — the background of the page was “flashing” for a second or two on each page load because overflow: visible caused the background of the element #wrapper to load with a little delay (before: overflow: auto).

Well, after some more thought invested, I and another reader suggested two additional simple CSS solutions, which at a later stage proved to play very well together and fixed the “flashing problem” in all browsers — Firefox and Safari included! :-)

Last (but not least), I would like to say that Jeffrey Zeldman is a cool dude! After the whole story with the CSS bugs in Firefox and the red background flash was over, Jeffrey thanked me personally and added me to his Twitter list, and then promised to send me the new (third) edition of his popular book about Web Standards, as a present! (I think that somewhere in the CSS on zeldman.com there are some more acknowledgments hidden;-)

It’s always nice to communicate with such people, even if with messages only 140 characters long! ;-)

So, I am pleased to say, too: “Jeffrey, thank you!” :-)

* * *

Ah, and finally, why did I start this blog post with the question, what exactly is Twitter?

Because, after using Twitter for at least a few years, I can say that Twitter allows quick, precise communication in a new way. Comments in blogs, feedback forms, emails, allow us to communicate, too, but Twitter is something different. Something, which I cannot define precisely, but something, which fulfills its purpose and is also fun!

This is why you can (still) find me on Twitter (but you won’t probably find me on Facebook)… and, you can find me on my personal blog, of course! ;-p

Posted on by Michel · 9 Comments

XHTML 1.0 vs. HTML 4.01 (or HTML 5)?

If you are a professional Web designer and create HTML/CSS code by hand for living, then you might be interested in the fact that Dave Shea switched from XHTML 1.0 to HTML 4.01.

It’s a fact that:

1) Lately, the HTML 5 standard gains up in speed.

2) XHTML 2.0 probably will never become a successor to XHTML 1.0. In fact, XHTML 2.0 probably will never exist at all.

3) Quite a few prominent Web designers and CSS/HTML coders are abandoning XHTML 1.0 and go back to HTML 4.01 (some of them even experiment very seriously with HTML 5).

What HTML standard for documents do you prefer? And am I the only one who (still) prefers XHTML 1.0 over HTML 4.01? :-)

It followed the interesting discussion at mezzoblue — I managed to read almost all of the comments there!

But, sometimes, it is not very clear to me as to where & why are going the Web Standards, guided by W3C.

After HTML 3.2, HTML 4.01 came, then the XHTML 1.0 standard was adopted, and now HTML 5 is developed? There’s almost no logic behind the versioning; plus, we have first the HTML language (which, in turn, derived from SGML), then W3C decided that it would be a great idea to combine XML + HTML (and so, XHTML 1.0 was ‘born’), and finally, they turn back to the idea of ‘pure’ HTML, and in the new standard (HTML 5), the ‘X’ is missing…

Read more