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).
Pretty cool...
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...
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:
It is a pretty handy feature.
I was looking for a way to target IE7 and not IE8. I found my answer here:
"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
"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
Apparently the above solution didn't work as desired.
A colleague did some further investigating and found this:
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:
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.
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.
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.
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;
}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.
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!
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.
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 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.)
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.
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):
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)
}
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:
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:
Great! I'm not crazy. I found the solution that worked for me at the bottom of page one of this message board:
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.
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.
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.
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...
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.
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">
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>
I'm not sure why it works exactly, but IE6 and IE7 will each pick up different styles set in the style sheet.
I originally posted this in another blog in April of 2007. It now has a new home in this blog.
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."
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:
sudo vi /etc/hosts
101.505.39.99 dev1.martinator.com
For older MAC's, look here: Mac OS X: How to Add Hosts to Local Hosts File
At my desk I've got two PC's and one Mac.
As for browsers, on my main Development PC I have:
On my second PC I have:
On the MAC (OS X 10.5.5), I have
Plug-in for Browsers to help debug code:
Tools
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.
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!
