Archive for the Category 'css'

Still hiring developers at Ultra16

originally posted here http://www.krop.com/jobs/48c5y/

Client-side developer (mid-level or wizard)

Lemme break it down for you

  • Love what you do, we do and that’s why we’re here.
  • Be great at what you do, we try our best to be great, so it’s fair to ask it of those we work with.
  • Never claim you know it all, unless I’ve bought a book with your name on it.

We’re not just looking for a specific skill-set, it’s all about your smarts, personality, and what you can bring to the table.

So let us know if you can answer a few of the following, or have any other interesting stuff notched on your belt:

  • Do you know all the basic standards compliant, unobtrusive, semantic and accessible stuff?
  • Can you tell us what browser likes *:first-child+html ?
  • Know $()? can you .bind()?
  • Are you friends with designers? Did you used to be one?
  • Have you worked on the agency side before? If not, tell us why.
  • Solid knowledge of AS 2.0+ a plus
  • LAMP, .NET, or Rails. a plus

We are Ultra16, we have a big green wall, an office in NoHO, AirTunes, andoften hang out at the office just because we want to. We also have beenaround since the 90’s and work with clients who you’ve probably heardof.

To apply just hit us up at humanresources@ultra16.com with your resume, some links to your work, a code sample if you feellike it, and a paragraph or two about yourself (don’t be afraid to showyour personality)

IE7 Quirks

Max over at OpenLaszlo was writing about some browser/quirk detection that he put together for v4.0. He listed in his post a number of quirks for IE7, some of which I was aware of, and some I wasn’t.

  • Can’t set opacity on any div that contains <input type="text"/> or <textarea/> without getting nasty visual artifacts in the text field.
  • Must use the AlphaImageLoader if we want opacity to apply to a div and all its children.
  • AlphaimageLoader must have its src property set to the URL of an image to prevent a red x/missing image icon from appearing
  • AlphaimageLoader does not send onload/error events - instead we have to use the img tag mentioned above
  • IE 7 still has memory leaks for apps loaded in iframes
  • Empty divs with style.backgroundColor set appear ~10px tall unless they contain an img (for less than 2px tall) or have style.fontSize = '0px' applied.
  • IE does not support ' when setting a div’s innerHTML property
  • IE does not send onclick/onmouse* events for divs without a blank image attached

One of my favorite IE7 quirks has to do with z-index being overrided by the order in which the element appears in the DOM. If a div has a z-index of any positive number and it’s followed by a div with a z-index of anything less, and they are positioned in an overlapping manor, the div that comes second in the DOM appears in front of the div with the higher z-index value.

What are some of your "favorite" IE7 bugs / quirks? I’d like to put together a comprehensive list.

Progressive Enhancement, Accessibility, Semantics and Flash

This next monday On Monday October 2 I will be giving a presentation to the lovely folks at ULTRA16 on Progressive Enhancement, Accessibility, Semantics and also how to make it happen with Flash. After monday, the presentation will be available here for anyone who may have interest.

IE7 css list element hack

There's been alot of talk lately about what's going to happen to current implementations of IE related CSS hacks when IE7 gets pushed to the mainstream. The past couple of years have been pretty stable with knowledgeable folks only having to employ a few basic tricks to keep things happy. Being a veteran of the version 4 browser wars, I've been pretty grateful about current CSS and DOM implementations to say the least.

Here's what happened to me

So I'm pretty good at writing clean W3C compliant CSS, I've been using CSS since about 1999 sometimes for good, sometimes for evil. With this new look and feel of my site I was running into an issue that I had never thought about before. How different browsers handle list item indentation.

As you can see over on the right (if you can't see over on the right because you subscribe via RSS, let me say thank you! I'm currently up to 20 subscribers or somthing woot!) anyway, as you can see over on the right, the nav elements for other posts, tags and whatever the hell i have over there are list elements, they sit in a div that floats right is 200px wide and everything is nice and happy and not going anywhere (unless of course you disable CSS). These list elements also have a little image that is being used as a bullet, it's set with css, and needs about (well exactly) 16px to display well, not be hidden, yadda yadda.

It's never just one thing right?

Of course it's not ever just one thing, at least for me it always seems like it's either two issues, bugs, what-have-you... or it's just straight up raining cats dogs and the kitchen sink and my hairline creeps a bit farther from my eyebrows. Well this time, I was only dealing with the two thing rule... however, I only knew what one of the things was. For some reason IE 6 wasn't displaying my little background image for each list element, not only that, it was actually displaying everything but the first few characters of each and every link. That's because Firefox likes to indent it's list items a bit and I had the margin-left property set to -2.5em, so in IE, it was REALLY making it -2.5em and pushing things over to the left and getting clipped.

One way of being able to exclude a property in CSS from being set in IE is to use the child selector method. Here's a exerpt from an article over at positioniseverything.net that explains it nicely.

The Child Selector
This selector uses a ">" symbol as a "combinator" that is placed between two parts of a CSS selector, and indicates that the target of the rule is the element on the right side of the ">" combinator, but only when that element is a direct child of the element to the left of the combinator. Thus, the selector table>td can never target any element, because TD's are never direct children of tables, only of TR's. On the other hand, the selector tr>td would select every TD on the page, since all TD's are direct children of TR's.
...
IEwin just ignores the entire rule because it cannot recognize that child combinator. Now that support is coming, IE7 will be able to view such hacked CSS. But since that browser will still have quite a few failings, letting it get a look at those hacks could be less than desirable, to say the least.

Not that big of a deal. Sofar there isn't any need for any conditional statements, or any of that jazz. I just simply moved my setting of the margin-left property down to a second style that will appear to redefine the style in Firefox and Opera and just be ignored by IE

CSS:
  1. #sidenav li, #casestudies li, #download li {
  2.         display: block;
  3.         width: 179px;
  4.         padding-left: 3px;
  5.         /*margin-left:-2.5em;*/
  6.         }
  7.  
  8. /* IE6 left margin fix */
  9. #sidenav>li, #casestudies>li, #download>li {
  10.         margin-left:-2.5em;
  11.         }
  12. /* end IE6 left margin fix */
  13.  
  14. #sidenav li a, #casestudies li a {
  15.     display: block;
  16.     width: 176px;
  17.     background: url(../images/li_small.gif) no-repeat 0.2em 0.4em;
  18.     padding-left: 1.1em;
  19.     }
  20.    
  21. #sidenav li a:hover, #casestudies li a:hover {
  22.     color: #a5965a !important;
  23.     width: 176px;
  24.     background: #f8faff url(../images/li_smallhover.gif) no-repeat 0.2em 0.4em;
  25.     padding-left: 1.1em;
  26.     border-right: 3px solid #a5965a;
  27.     }

Ok, looks good, everything's peachy. I'm seeing the list elements in the same place now in Firefox, Opera and also IE6. At this point I had remembered reading somthing about the Child Selector being supported in IE7, so now I had to see for myself what was going on and then decide what I was going to do about it.

It's true, IE7 doesn't ignore the Child Selector and went ahead and rendered the style, this time, it's not clipped, and way off to the left.

The first thing that I thought to do is try to make sure that I set the margin-left property for everyone BUT IE. I couldn't seem to find anthing out there that would to specifically exclude IE, only ways to directly express IE. I wasn't interested in having to do the inline VBscript method (that doesn't appear to work within linked CSS files anyway, tell me if I'm wrong)

HTML:
  1. <style type="text/css" media="screen">
  2.     ...some default css....
  3. </style>
  4. <!--[if IE]>
  5.     <style type="text/css" media="screen">
  6.         ...some IE only CSS...
  7.     </style>
  8. <![endif]-->

Additionally I didn't want to require a second file that's just for IE because when it comes down to it, it's Firefox and Opera that aren't displaying how I'd like and not IE, hence the need to set the property in the first place.

Ok so it's looking like this more of a Firefox / Opera hack

It all comes down to the lowest common denominator, the List Element itself. The chain of events sofar are this

  1. the core attributes are set
  2. the margin-left attribute is set for everything but IE6
  3. now we need to reset margin-left for IE7 only

This is where I had to use that client-side VBScript, it's quite simple. since each and every List Element on my site I indend to operate in the same way, I didn't have to do any more than this.

HTML:
  1. <style type="text/css" media="screen">
  2.     @import "includes/naterkane.css";
  3. </style>
  4. <!--[if IE 7]>
  5.     <style type="text/css" media="screen">
  6.         li { margin-left: 0 !important; }
  7.     </style>
  8. <![endif]-->


Nater Kane naterkane personal http://www.naterkane.com LinkedIn Profile Web Technologist personal nater@naterkane.com 1978-09-12 voice 845.234.6698 | fax 707.922.0593
964 Flushing Ave. Brooklyn, NY 11206