Category Archives: css

Positioning and z-index in IE

Using absolute positioning to hide and show a nested list is one of the better ways to create a dropdown menu, and it can almost be done using only CSS. IE6 needs a little javascript help to respect the :hover pseudo-class. The Sons of Suckerfish will help you there.

Now you have your perfect semantic validating SEO friendly nested list in order to make the drop-down menu the client wants. The CSS is in place and the dummy you’ve thrown up works.
But when you implement it into the site the drop-down partly hides behind the content further down. Offcourse – it has an higher z-index. Easy fix. But then the juggernaut IE comes along and crashes the party.

Continue reading


IE6 magic bullets

Things that sometimes “magically” make Microsoft Internet Explorer 6 behave like expected from modern browsers.

  • position: relative
  • zoom: 1
  • height: 1%

They are all due to Microsoft’s proprietary concept of hasLayout.

Feel free to add any other magic bullets in the comments.

Free online web course

Westciv, the publishers of a number of comprehensive self paced courses for learning CSS, HTML/XHTML and standards based design are giving away a completely free (X)HTML and CSS online course. If you are serious about learning and knowing standards based web design this is a free lunch worth saying yes too. According to some of the blogs in my feedreader this course has been around for some time, but has now been updated to better reflect modern browser’s support. I haven’t done the course myself, but as I understand this course has been the foundation for many of today’s well known designers. Furthermore it’s said to be good for a learner to intermediate level.

If this is old news to you, and you think you know everything there is to know, then why don’t you join Molly in her quest for making the www a better place?

Safari CSS filter

Styling forms is always an interesting task. Just check out how the different browsers like to display the form elements. Today I was having a little problem with the input element margins in Safari, among others. I was about to ignore the 2 pixels, but decided to give Google a shot, which immediately brought up a post from the CSS hacks series by a busy coder and blogger by the name of BTreeHugger.

Allthough I have Firefox as my main browser, most Mac-users stick to the default Safari, these are the two alternative mentioned, I used the former:

html[xmlns*=""] body:last-child ... { ... }
body:last-child:not(:root:root) ... { ... }

The Z wants me

I’ve never seen a better workrelated reason to leave Norway. My dreamworkplace has a position up for grabs, but it ain’t gonna be for me. Instead of putting a list of crappy excuses, I’ll say that it’s to do with my current geographic location to these:

I. Want. This!

Now excuse me, but I have a portfolio to work on.

IE7 css filter hack

After much searching I found a css filter which targets IE7 only. I’m not going to enter the hack or not hack discussion, I’ll just say that sometimes you gotta do what you gotta do. The old star-hack filter for IE6 is fixed in IE7, but the solution wasn’t to far away. There is now the star-plus hack.

IE6 filter: * html #foo { new: value; }

IE7 filter: *+html #foo { new: value; }

But it is not straight forward. For reasons I don’t know, you can’t putthem together, say if you want the same value for all of IE. This will not work for IE7:

* html #foo, *+html #foo { new: value; }

So the whole rule must be repeated. But that is not all. For more reasons, also unknown to me, the star-plus filter will not always work. Then I must use the slightly more elaborate star-firstchild filter.

*:first-child+html #foo { new: value; }

I know sometimes this is needed, but if I have control of things myself I much prefer using conditional comments. Or not supporting out of date browsers.

Test, discussion and original post at Brothercake.

technorati tags:, , , , , , ,

Blogged with Flock

Sarcasm on the WSG

This came in on the WSG mailing list today:

> When i tiurn css off on a page i have done everything reverts to
> default (i.e. h1, h2, etc.) and lines up down the left side of the
> page. without using tables, is there a way to maintain the layout
> when css is turned off?

Hmmm…. Is there a way to make a over worked woman who constantly
get beatup up by clients ridiculours request to look radiant in the
afternoon when she woke up, without taking take a bath, have her cup
of black coffee and without putting up her makeup?

I gotta love the sarcasm.