Things I've learned Coding CSS

CSS3 Box Previewer

2011-06-13T09:54:00.000-04:00

Preview and Create CSS3 boxes with shadows, rounded corners, gradients, text shadows, and more...

Preview and Create CSS3 boxes with shadows, rounded corners, gradients, text shadows, and more all without using a single image. It's about freaking time!!!

This site will let you edit the CSS directly on the page (without using an element inspector).

http://css3please.com/

Pretty cool...

CSS3 Gradient Backgrounds

2011-03-24T16:22:00.000-04:00

Make them here:

gradients.glrzad.com

INPUT[type=text] and SELECT: Setting widths

2011-02-21T20:00:00.000-05:00

Why won't the widths render the same for these elements?

Because the world isn't a perfect place, that's why.

If you're coding a nice clean form and you want your <select> tags and your <input type="text"> tags all to be the same width, you would think that:

input[type=text], 
select { 
     border: solid 1px #c2c1c1; 
     width: 150px; 
     padding: 2px; 
     }

...would do the trick.

But no, <select> Renders differently (and it always has, remember that old z-indexing issue in old IE browsers?). It turns out that when you set the width of a <select>, that is the width it gets.

When you set the width of the <input type="text"> (and any other element), it gets that width + any padding you set + the border width. <select>doesn't roll that way

So after you set the above styles, you then need to set a special width for :

select { 
     width: 156px; 
//needs to be input[type=text] width + [2×(border and padding)] }

A PITA, but that's like in the UXDEV world...

Multiple User Names with One Gmail Address

2009-12-18T14:01:00.003-05:00

I just recently learned, while testing the app I am working on, that is the app is using your email address for a user name, you can create multiple usernames for testing using just one gmail address.

Apparently, is doesn't matter where, (or how many), (.)'s there are in a gmail address before the @.

So if your gmail address is lastname.firstname@gmail.com, you can use the following iterations and they will all come back to your gmail account:

last.name.firstname@gmail.com
last.name.first.name@gmail.com
la.stna.me.fir.stna.me@gmail.com
l.a.stname.fi.rst.na.me@gmail.com
la.stn.ame.fi.rs.tn.am.e@gmail.com
and so on...

It is a pretty handy feature.

Introducing "The Hadron Zoo of hacks for IE"

2009-12-16T15:22:00.002-05:00

I was looking for a way to target IE7 and not IE8. I found my answer here:

The Hadron Zoo of hacks for IE

"Please note that this is not a page to find hacks for IE 8 but rather how to target IE 7 without also targeting IE 8. All hacks are valid CSS. Please use wisely."

from css-class.com

How to keep footers at the bottom of the page...

2009-12-14T15:05:00.005-05:00

From http://matthewjamestaylor.com

"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done..."

MJT has a very simple CSS method for anchoring the footer to the bottom of the page. Learn about it on his blog:

Matthew James Taylor > Design Blog > Get down! How to keep footers at the bottom of the page

UPDATE: CSS Sticky Footer

Apparently the above solution didn't work as desired.

A colleague did some further investigating and found this:

CSS Sticky Footer

A (Partially) Liquid Layout

2009-10-05T12:00:00.003-04:00

There are a lot of liquid layout templates out there, but none of them ever seem meet the requirements that I often come up against.

For example, I need a liquid layout that:

has 3 columns
the left and right column are fixed widths
the center column is liquid
the layout stops shrinking at a minimum width
it stops stretching at a maximum width (at which point it centers itself in the browser window.)

After mucking about with this I am happy to report success! The key was to get away from using percentages and absolute positioning.

Percentages work well when everything is liquid. But when it is specified that one or two column need to have a fixed width, then using percentage widths breakes down.

I struggled with this. "There has to be a way!!!"

I mucked around with nestin absolutly positioned elements inside a relativly positioned element. Nope.

Then remembering the method on how to "center" a <DIV> using margin: 0px auto;, it dawned on me. Instead of trying to define the width, define the margins instead. Worked like a charm. The key thing to remember is to set the left and right margins to be equal to the widths of the left and right columns.

The layouts are have a minimum width designed for 1024 screen resolutions. Any smaller that that and all liquidity stops and scrollbars appear. I picked 1600px as tha maximum to stretch to, because at some point you may no longer want your stuff to stretch.

3 Column Layout

Fixed - Liquid - Fixed 1024 minimum, 1600 max, right and left columns fixed width, center column liquid

2 Column Layout

Fixed - Liquid 1024 minimum, 1600 max, right and left column/region liquid

I've tested these screens on all browsers (IE7, IE8, FF 3.5, Opera 10.0, Chrome 2.0, and Safari 4.0 (for windows). I however no longer have access to IE6, so I couldn't test it on that browser.

The bonus with this method is that it is ridiculously simple.

FireFox 3 Background Image Not Rendering!

2009-04-06T10:57:00.005-04:00

So why can't I see my background image in FireFox?

I am coding away prototyping some new components for a redesign and I am coding a list of links (for the footer) that has a nice, blue triangle preceding each link. Typically how I handle this is I add padding to the left of the <a> tag and set a non-repeating background image to that tag.

So the HTML mark-up is pretty simple:



<div class="FooterDiv">
 ...
 <div class="footerColumnDiv">
  <h3>Support</h3>
  <ul>
   <li><a href="#">Security Center</a></li>
   <li><a href="#">Help/FAQs</a></li>
  </ul>
 </div>
 ...
</div>

And here is the associated CSS:



.FooterDiv ul,
.FooterDiv li {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  2px left;
}

The above works as intended in other browsers (IE7, Safari 3) but it doesn't work on FireFox 3 (on either the MAC or Windows). Hmmmm.

FireFox 3 doesn't like mixed marriages

It turns out that FireFox 3 doesn't like it when you mix property value types when setting the background-position in CSS. so you can't have 2px left when setting the position of a background image.

Either of the following did work for FireFox 3:

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat   left center;
}

-or-

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  0px 2px;
}

Maybe if I coded it right to begin with...

I though I did according to the CSS 4.01 Spec.

When I originally set the 2px left; for the position, FireFox 3 did not like the fact that I tried to put the horizontal position setting where it wants the vertical position setting, and visa-versa. It should have been (according to FireFox 3) written as: left 2px;

So the following also works:

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  left 2px;
}

All the other browsers I tested this in seemed fine with this.

Editing the Hosts Files in MAC OS X 10.5.# Part II

2009-03-03T13:17:00.004-05:00

Gas Mask 0.4: Finally! a Host File Switching Tool for the Mac

Gas Mask 0.4 is a simple hosts file manager for Mac OS X Leopard. It enables to edit hosts files and switch between them.

Yeay!

Invalid HTML Does Break Things (<DIV>'s and Lists)...

2009-01-07T14:40:00.004-05:00

Everything Looked Fine...

I was working on a project where we were creating a new Wizard for one of our web application. About 2/3's of the way through the screens looked good and everything was working well across all browsers. Then one day I get a Defect Ticket stating that the layout is completely blown out in IE6. The note in the ticket pointed out that X didn't line up with Y (amongst other things).

I looked into it. I fired up the old IE Developer Toolbar and I also looked at the site in FireFox (and FireBug). Even though it was an IE6 issue, I like to also use FireBug/FireFox in parallel in order to get a good lay of the land.

"Hmmm, IE Dev Toolbar is showing my DIV's aren't nested as they should be..."

It took a while to notice this, but, in IE6, the DIV's that contained X and Y were not nested in the Container DIV that they should be. However in FireFox (and IE7), they were. If this was due to an unclosed DIV tag, then all browsers should be screwed up. I did some probing and I found code that resembled the following:

<DL>
     <DIV id="this">
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DIV>
     <DIV id="that">
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DIV>
</DL>

Some Clever Developer...

Some clever developer wanted to conditionally SHOW or HIDE different <DT> and <DD> sets, so he wrapped them in <DIV> tags. The problem with that is, according to the HTML 4.1 specification:

Syntax <DL>...</DL>

Contents One or more DT or DD elements...

AHA! This means that a <DIV> cannot be a direct child of <DL>.

When FireFox and IE7 encountered the above code, it dealt with the bad HTML. When IE6 encountered the code, it "read" the improperly nested opening <DIV> but ignored the improperly nested closing </DIV>. The <DIV> was there, but IE6 wasn't acknowledging it because it wasn't properly nested. (It should have ignored the opening <DIV> but it is IE6 after all.)

Fixing the HTML Markup

So how do I fix this without having the developer (in Malaysia) have to rewrite their back-end code. I can clearly see what his intention is, so I modify the HTML Markup as such:

<DIV id="this">
     <DL>
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DL>
</DIV>
<DIV id="that">
     <DL>
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DL>
</DIV>

I break up the one <DL> into smaller bits and nest those inside the <DIV>'s. A little CSS tweaking and everything is working, and looking, as intended.

IE6 Multi-Class Bug

2008-11-18T15:00:00.003-05:00

Why won't my cleverly written code work?

On a recent project I wrote some JavaScript to change the class assigned to a region so I could randomly set the background image by using different CSS classes.

In my style sheet, I had very explicitly set the styles using an #ID.ClassName combination. Well it didn't work in IE6 and it took a bit of investigating to find out why the following wasn't working for only IE6:


#UpperHome.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
#UpperHome.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
#UpperHome.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
#UpperHome.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
#UpperHome.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif))
     }

I had a simple JavaScript that would randomly assign one of the five classes to the <DIV id="UpperHome" >. It worked fine in FireFox, Ie7, and Safari. The only place it wasn't working was in IE6. IE6 would only render the default background image I had set elsewhere.

Luckily, I found that somebody else was having a very similar problem, (I wish I could remember the search tern I used in Google to find it):

Sonspring.com: IE6 Multi Class Bug

It turns out that if you have a series of #ID.Class pairings in a style sheet, and at least one of those pairing does not exist in the page that is calling the styles, then none of the #ID.Class pairings are interpreted by the IE6 browser.

I think. It's been a while.

Anyway, removing the #IDs from the style sheets and simply using "just classes" resolved my issue.

The following working in IE6 (and all others) just fine:


.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif)
     }

Reset Stylesheets

2008-11-05T14:54:00.000-05:00

Ground Zero

A friend of mine pointed me to an article that talks about using Reset Stylesheets. It is a style sheet that sets a common base line for all browsers to build on. essentially, it gets rid of all the baggage and default style rules that are thrust upon the developer by the browser.

"Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It's true -- measure your page elements in Firefox, Safari and Opera with a ruler and you'll see each renders them in their own subtly different ways."

For more information, I suggest you read the full article:

Webmonkey: Using Reset Stylesheets

Missing Cursor in Input Field in Modal Layer (FireFox)

2008-10-24T14:00:00.003-04:00

Ajax Modal Pains in Firefox! (spelling intentional)

I came across this problem at my previous employer, American Well. It was the first place I worked at where they were making heavy use of Ajax. They were big fans of the DoJo Toolkit, particularly the dijit widgets that DoJo offers. Throughout the application there are a large number of interstitial forms that were presented in Ajax Modal Panes. You know, those modal layers that aren't popups that pop new windows, but rather a new layer. Well anyway, whenever we had one of those modal layers with a form element in it (typically <input>), the cursor would not appear inside the field.

It was a small company, and whenever something was a pixel off, or didn't look quite as it should, they would come to me. Well, thanks to some Google searching I found out that there was nothing wrong with our code.

It turns out it is a well documented bug in FireFox:

Bug 167801 - Cursor (caret) sometimes fails to appear in input text fields (shown/painted in wrong widget)

Great! I'm not crazy. I found the solution that worked for me at the bottom of page one of this message board:

Ext JS Forums: Infamous Firefox cursor bug - Info and possible workarounds

I tried the simplest fix which was to wrap the <input> elements in a <div> and apply the following styles to that <div>:

{
  overflow:auto
  }

I may have also set { position: fixed; }. I can't remember.

Phantom Text in IE6

2008-10-23T10:00:00.008-04:00

Wierd Ass Defect...

Recently I was passed along a defect that the UX team assigned to the project simply could not resolve. My manager figured it needed a "fresh pair of eyes". So I took a look at it.

"ext" text appears when optional note is checked... (IE6)

Ok. That looks bizarre. My initial thought was that it was probably a classic "unclosed tag" or something simple like that. So I popped open the page on my IE6 test machine and fired up IE Developer Toolbar and started poking around.

I tried and tried and I could not select/inspect the mysterious "ext". It was as if it did not exist in the DOM at all. It turns out it was because it didn't. It was an IE6 Rendering error.

When in doubt, Google it...

I forget the exact terms I searched with, but it was not easy to find anything that would clue me into what was going on. Finally, I think after the 3rd or 4th try I came upon a forum message on about page 3 of my search results that talked about my issue. It also referred to a page on PositionIsEverything.net. I had found my problem:

Explorer 6 Duplicate Characters Bug

"Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. "

http://www.positioniseverything.net/explorer/dup-characters.html

I solved the defect above by simply adding a class to the last div tag that was being floated and applying the following styles to it:

div.newClassName {
     float: none;
     clear: both;
     }

For some reason the original UX developers decided to apply {float: left;} to all the DIVs inside this component. I think I would have coded/styled then a little differently.

This issue came up again in a French Channel of the application on another component.

I am now the "go to" guy for crazy things like this...

Targeting IE7 and IE6 Seperately From the Same Style Sheet

2008-10-22T06:00:00.001-04:00

"If I fix it for IE7, it's broken in IE6! And visa-versa!"

Some people out there recommend using conditional comments [http://www.positioniseverything.net/articles/cc-plus.html]. However, I have found a way to target IE6 and IE7 from within the CSS Stylesheet by taking advantage of one of IE6's weaknesses.

Note! Correct `DOCTYPE` Needed!

In order for the following method to work, the DOCTYPE needs to be set to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

What IE6 can't do (and how to take advantage of that!)

IE6 in the stricter DOCTYPE modes, does not support compound CSS selectors. By that I mean IE6 has trouble when you assign more than one CSS class inside a class attribute of a tag.

After you set your DOCTYPE in your page, add a <STYLE> tag that contains the following:

div.classOne.classTwo { 
 background-color: pink; /* Non IE Browsers*/
 /background-color: aqua ; /* IE7 */
 }
div.classTwo{
 /background-color: yellow; /* IE6 */
 }

Then in the BODY of your document, add the following and test it across different browsers:

<div class="classTwo  classOne ">
 <p>In all non IE browsers, this background would be PINK.</p>
 <p>In IE7, this background would be AQUA.</p>
 <p>In IE6, this background color would be YELLOW.</p>
</div>

In all non IE browsers, this background would be PINK.
In IE7, this background would be AQUA.
In IE6, this background color would be YELLOW.

I'm not sure why it works exactly, but IE6 and IE7 will each pick up different styles set in the style sheet.

Microsoft Filters and ClearType

2008-10-21T09:30:00.002-04:00

I originally posted this in another blog in April of 2007. It now has a new home in this blog.

ClearType not Working?

Recently at work, I was asked "How come the ClearType isn't rendering on the page you coded?" I wasn't sure why. I didn't care much either as I personally don't like how ClearType renders. (I think it makes text blurry and more difficult to read, especially on smaller fonts...)

So after some research (Googling) I found out why from the IEBlog, this post in particular: Notes on the interaction of ClearType with DXTransforms in IE7.

It states:

To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform. We will render the text in those elements as aliased text, in order to increase readability.

Oh, ok. Hmmm, since I personally do not like ClearType, all I have to do in order to disable it form my personal web site, Martinator.com, is to apply a DXTransform filter to the BODY tag that essentially does nothing :-)

body {
     filter:progid:DXImageTransform.Microsoft.Gradient
            (GradientType=0, 
             StartColorStr='#00FFFFFF',
             EndColorStr='#00FFFFFF'); 
     }

Now my site is ClearType free and the smaller fonts no longer render as "blurry."

Editing the Hosts Files in MAC OS X 10.5.5

2008-10-18T19:00:00.001-04:00

Point Browsers on a MAC to a DEV Machine

All my work is done on a Windows box using MS Visial Studio 2008. It is easy enough to adjust the hosts files on a Windows box to see your work (C:\WINDOWS\system32\drivers\etc\hosts). So I can set up dev1.martinator.com in IIS and edit this hosts file so that dev1.martinator.com will point to the IP address on my machine (where my local web server resides).

Easy-Peasy as my daughter would say.

However, if I wanted to test my local build on a MAC, it is a another story. Apple makes things on a MAC easy, but only the things they want to make easy for you. The MAC I use at work is running OSX 10.5 (Leopard I believe). It took me about a half a day or so to find a clue on the Internet as to how to change the hosts file for a MAC running OSX 10.5. I finally found out how in a message on an obscure message board that I probably couldn't find again. Here it is:

Open up Terminal
sudo vi /etc/hosts
put in your password
press "a"
paste/enter in your addresses, i.e.:
```
101.505.39.99    dev1.martinator.com 
```
press Escape
press Shift+: (Hold down Shift and press the “:” button)
enter "wq" and hit Return.

For older MAC's, look here: Mac OS X: How to Add Hosts to Local Hosts File

My Work Environment

2008-10-16T13:00:00.001-04:00

Machines

At my desk I've got two PC's and one Mac.

As for browsers, on my main Development PC I have:

Internet Explorer 7
FireFox 2.0
Sarafi 3.0 for Windows
Opera 9.x
Google Chrome

On my second PC I have:

Internet Explorer 6
Firefox 3.0

On the MAC (OS X 10.5.5), I have

Safari 3.1
FireFox 2.0

Plug-in for Browsers to help debug code:

FireBug (FireFox)
IE Developer Toolbar (IE)

Tools

MS Visual Studio 2008
Homesite 5.0 (it come in handy once in a while)
Photoshop CS2
Calipers
ColorPic
SnagIt 8
WinMerge
CSS and HTML specs

Why?

2008-10-16T12:41:00.000-04:00

I decided to start this blog in order to share the bizarre quirk, trick, and obstacles I've come across when trying to write cross browser compliant HTML and CSS (They do go hand in hand after-all). Mostly I will post solutions to problems here that I have found on the web by hammering away with a Google Search what my exact problem is. 99% of the time, somebody else has an answer.

Browser Neutral

I do not favor (religiously) one browser over another. I am a Web Interface Developer. I have to make sure my stuff works on all browsers (not in beta). Most of the trouble comes when making a site look the same in FireFox and IE. There there is the added bonus of IE7 and IE6 having their differences (BTW, I've found a non-hack, non conditional comment, method of targeting styles for IE7 and IE6 in the same style sheet, more on the later.) Firefox also has it's share of bugs, some of which only really good QA personal can pick up on.

I have worked on many of Fidelity Investments web sites/apps, both internal and external. I have done some very interesting stuff at American Well (when their stuff hits the market, it should be game changing), and currently I work at Monster on the Hiring/Employer site.

At each step of the way I've thought "what else is there left to learn?"

Answer: lots!