I started out with some old code I found which used floats and widths on each li. However after the list I needed to do a clear so the border would go around the entire list. This clear caused problems since it cleared my other floated divs (for page layout).

Here’s the HTML I wanted to use:

<div class=”summary_container”>
<ul class=”two_column_ul”>
<li>Overview</li>
<li><a title=”Training & Education” href=”">Training & Education</a></li>
<li><a title=”Staff” href=”">Staff</a></li>
<li><a title=”Collaborators” href=”">Collaborators</a></li>
<li><a title=”Research Areas” href=”">Research Areas</a></li>
<li><a title=”Scientific Articles” href=”">Scientific Articles</a></li>
<li><a title=”Scientific Resources” href=”">Scientific Resources</a></li>
<li><a title=”Image Library” href=”">Image Library</a></li>
</ul>
<!– this is where the clear would go if necessary <div class=”clear”></div> –>
</div>

SOLUTION
After attempts at floating and clearing the float, I eventually gave up. I tried to do an inline-block on the li, which worked great in FireFox but IE choked.

The CSS I finally used was the following:

div.summary_container {
border: 1px solid #DEE6F3;
padding: 5px 5px 15px;
}

div.summary_container ul.two_column_ul {
margin: 0 0 0 20px;
padding: 0;
list-style: none;
}

div.summary_container ul.two_column_ul li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 6px 0 0 14px;
width: 220px;
}

I hope this can help someone else.

In my case, it was a banner that has an image that is using an (ew) image map for links.

There is a strange gap at the bottom between the two divs. Only in IE, of course.

There isn’t anything in my CSS that would cause this, of course.

SOLUTION
Since IE has a problem… well, let’s face it, it has many problems… It thinks there is to be text in that space. Or whatever.

To get rid of the gap add font-size: 0; to the div which contains the image. The gap is closed.

I need to remember this fix.

Anyway, I noticed that I couldn’t read any of my new feeds. If I had a feed that had more than one new posting, I was unable to scroll down to see them. I had tried everything with the new Google Reader. What’s more is that when I tried the new “Sort” feature from the dropdown, it would freeze and not do anything. Here is a screen shots:

SOLUTION
After a few weeks and tweets about this issue I was running out of ideas and patience. It had never occured to me that it might be my browser. I’m still running FF 3.6 since I have a bunch of add-ons that still aren’t supported by the new FF 292834.

Switching to Chrome, I get a nice little custom scroll bar on the right and all my feeds are able to be read again. And I can even sort!

SPECIAL COMMENT
WTF, Google? Really? You didn’t test the new Google Reader in FF 3.6 which is still used by 8% of the population. And no warning or anything either that I may be using an out of date browser that can’t support your new flashy Reader. So now I’m going to have to view my feeds in Chrome. Does your IE7 crowd (3.5% of the population) get the same respect?

Come on, man!

Anyway, so I was setting up this website with different content types, one being a news article. I wanted to put a field where they could choose a date easily so I installed the Date module. I created some SQL in a block to get the latest news articles and sort by date (since I loathe Views). Everything was working well. About a month later the client wants me to put another news article on their site. I originally had hoped that would be something they’d be doing themselves but whatever.

So I go to add it and the date field does not appear on the news article on add and it wasn’t on edit either.

I’m baffled for a few minutes and click around. I then checked the modules to see if any configuration was wrong. It turns out, Date was inactivated for some reason.

I activated it which I would image would solve the problem but it did not. The date was still not showing up on content types.

I was tempted to make another date and replace that date instead since I wanted to get this done.  Well to make the short story long, my SQL I came up with after I created another date field didn’t work and I couldn’t remember the credentials for the DB. I was left to actually solve the problem… Gasp!

SOLUTION
I went back and forth with trying to edit the date. That was my first instict. However that kept not working. I then noticed a screen after the initial save screen (when editing a date). It contained just a select menu that was required. I noticed the value “Please Select” or something like it. So I chose the “Pop-up calendar”. Wow that worked!

Here’s what the screen looks like in edit mode:
I hope this can try to help someone else out. I was googling everything and anything with the Date module.

Here’s what happens:
My HTML code:

<div class=”node_content”>
<div class=”inside_content”>
content…
</div></div>
<div class=”node_content_end”></div>

My CSS for .inside_content:

.node_content .inside_content {
background-image: url(“images/node_content_border_inside.png”);
background-repeat: repeat-y;
padding: 0px 15px;
}

SOLUTION
After a google search and a shot in the dark, it turns out, IE7 needs to know a background-color for some strange reason.

Adding a background-color: #FFFFFF; to the .inside_content class did the trick. The image (border) displays fine in IE7.

The issue I had was with a .NET application. On a search page they’re using a asp:GridView control which gets the results. One of the results is put into a check box (an asp:CheckBox). 508 says there should be a label tag or a title attribute associated with any input form field (even disabled ones):

<asp:GridView ID=”GridView1″ OnSorting=”GridView_Sorting” AutoGenerateColumns=”False” runat=”server” CellPadding=”4″ GridLines=”None” AllowSorting=”True”>
<Columns>
<asp:TemplateField HeaderText=”Attending”>
<ItemTemplate>
<asp:CheckBox ID=”Attending” Checked=’<%# GetCheckValue(Container.DataItem) %>’ Enabled=’<%# GetCheckEnable(Container.DataItem) %>’ runat=”Server” />
</ItemTemplate>
…
</asp:TemplateField>
…
</Columns>
</asp:GridView>

The problem is we need to make sure the check box has either a label or a title associated with it.

In .NET you’re allowed to add a ToolTip (title attribute) to asp check boxes. However it added it to a <span> which it generates outside the actual <input type=”checkbox”> code.

FIX
After a little while googling around I wasn’t able to find anything that would let me either get the ID (which it generates) so I can put a label next to it or actually have the title IN the check box.

A shot in the dark made it work. I had to add an attribute Text to the asp:CheckBox . This generates a label next to the check box in the client side code.

Since the application I’m working on doesn’t need to display anything next to it, I put the text in a .hide class which hides it.

Text=”<span class=’hide’>Attending</span>”

Some cons are that its label is the same everywhere. I’m sure some mad .NET developer can whip up something that can change it.

Here’s the screen shot of what’s happening:

Bare in mind this only happens in Internet Explorer 9. All the rest of the browsers I test (including the likes of IE6 and IE7) all rendered it fine. Chrome, Safari, Opera, and Firefox were all good.

I understood the issue of why it was happening, but confused as to how to fix it.

It’s been a common issue with floating divs that the two columns are not equal height. There are a few tricks to do it, none of which I have implemented with much success.

The code is like this:

<div class=”entry”>
…
<div class=”list_container”>
<div class=”left_list_container”>
…
</div>
<div class=”right_list_container”>
…
</div>
</div>
</div> <!– entry end –>
<table><tr><td>….</td><td>…</td></tr></table>

With the CSS being:

div.entry { width: 720px; }
div.list_container { width: 100%; }
div.left_list_container { float: left; width: 300px; }

div.right_list_container { margin-left: 300px; max-width: 300px; }

Like I said before, I understand why it was doing it, I just wasn’t sure how to fix it.

Since this is an IE9 only bug, it was kinda hard finding a solution. I started primitively googling for IE9 bugs (which there aren’t many that are found yet).

I tried modifying the list_container class with no success. I added extra padding to the bottom, extra margin but nothing.

I tried to add a <div class=”clear”></div> in the middle of the entry div and table but that pushed the table past the bigger floating div, which isn’t want I wanted.

FIX
By adding an overflow: hidden to the div.entry class, it fixed the problem.  The table doesn’t run into the floated div now.

I needed a customized menu for a role (reg_user). This role had limited, basic access to do things. They needed to add news articles (a news content type I created) as well as edit them and edit pages. Rather them clicking Create content –> News, I just wanted a link on the left navigation, as well as a few other customizable links.

I could have edit the navigation menu through Administrator –> Site building –> Menus –> Navigation, etc etc. However, that would also change for the administrator as well as the role I wanted it to be customized for.

Well, long story short, after a while of research, it seemed the only option was to create another menu.

I did create another menu.

Then I ran into another problem. How to display the menu (Reg User Menu) to the reg_user and NOT the administrator, and the Navigation menu to the administrator and NOT the reg_user. It seemed easy enough to do via the specific roles, however, that doesn’t have the option for an administrator.

I also had another issue, the menu was to not be displayed on node/1 (the home page).

FIX
To accomplish all of this:

Reg User Menu – It’s a block when you create a new menu. I gave access to the reg_user. It doesn’t show up for administrators.

Navigation menu – No options were chosen for Show block for specific roles. Instead I did the following in the ‘Navigation’ block:

The code being:

<?php

$r = false;

if (user_access(‘administer’)) { $r = true; }
if (($_GET["q"] == “node/1″) || ($_GET["q"] == “node/1/edit”)) { $r = false; }

return $r;

?>

The if statement with user_access tests if it’s an administrator, if so, display the block. The $_GET["q"] if statement tests if they’re on the home page, if so, don’t display the block.

I really wish Drupal had easier ways to do this. Like I said before, it’d be a lot easier if they only had an Administrator option for the Show block for specific roles.

Currently, I’m dealing with a module issue that needs Clean URLs (which is disabled on our Windows system).

I hope someone can get help from this not well written post…

At first I thought this was an IE issue. It wouldn’t work in IE8, so I only imagined it wouldn’t work in IE6 and IE7.

After a few searches, I found nothing. However, since I have so many windows open, I tested it again but it turns out I was in FireFox and it wasn’t working…

Dah, long story short, the menu wasn’t working in any browser except when it was on its proper page or one of its child pages.

FIX
Really simple and stupid and most people wouldn’t even think of it… at least us non Drupal experts.

By going to Administrator then Site Building then Menus then Primary Links, you see a list of all your links and their children. Click on the checkbox under the Expanded column of your drop down. That makes sure it can be expanded or is expandable in other pages.

I’ve fixed the issue on another MOSS site but when I went to fix it on another, the same hack didn’t work. I did the same things as I did before. I basically started over on the CSS print style sheet and display: none ‘d everything that shouldn’t be displayed. I also gave everything (*) the values of overflow: visible !important and position: absolute and float: none . None of that worked.

Here’s the rough HTML code:

<div id="ncs">
 <div class="ncs_content">
  <div class="ncs_stage">
   <div class="ncs_stage_top">
    <div class="ncs_stage_content">content...</div>
   </div>
  </div>
 </div>
 <div class="ncs_footer">turned off content</div>
 <div class="ncs_footer_printed_date">print date that needs to be displayed</div>
</div>

My CSS before:

#ncs { border: none; width: 100%; height: 100%; float: none; background: none; }

.ncs_content { background: none; border: none; float: none; }

/* this fixes the FF bug */
.ncs_stage_content {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 90%;
    font-size: 14px;
    padding: 20px 0px;
    margin: 10px 0px;
    font-size: 120%;
    clear: both;
    display: block;
}

.ncs_footer { clear: both; height: 100%; position: relative; }

.ncs_footer_printed_date {
    float: left;
    display: block;
    width: 950px;
    position: relative;
    bottom: 0;
    left: 0;
    clear: both;
    height: 120%;
    vertical-align: bottom;
}

The problem with this was it was displaying the ncs_footer_printed_date at the top. I couldn’t for the life of me figure out how to get it to be at the bottom of the content.

I even went so far as to post it on stackoverflow.com . No one could figure it out.

I struggled DAYS with it. This was one of the hardest things I’ve ever had to do. I tried explaining to my boss that I didn’t think it was possible. He said to keep playing with it. So I did but how I get I play with it off and on.

FIX
I had to modify my CSS for everything to be encapsulated in #ncs. Then I had to play around with different styles so that the bottom would be displayed the same as the content. Here’s my finished CSS:

#ncs {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 99%;
    font-size: 12px;
    padding: 20px 0px;
    margin: 10px 0px;
    clear: both;
}

.ncs_content { background: none; border: none; float: none; }

.ncs_stage_content, .ncs_stage { margin: 0; padding: 0; float: none; clear: both; font-size: 12px; }

.ncs_footer { display: none; }

.ncs_footer_printed_date { margin: 0px; padding: 0px; width: 750px; font-size: 12px; display: block; }

SPECIAL COMMENT
To my lovely FireFox: Screw you. You’ve known about this bug for EIGHT YEARS and you still haven’t fixed it. It’s a bug with YOUR SOFTWARE. Every other browser (even the more standards compliant ones) can print pages without issues. I find it incredibly ridiculous that you haven’t addressed this issue.

I understand about standards compliance. Microsoft doesn’t make any of their web software (let alone any website they create) W3C XHTML 1.0 compliant like it’s supposed to be. They just don’t care.

But you, you’re supposed to be better than that. You’re supposed to be the best. You’re the top browser. And to have known about this bug for eight years and not get around to fixing it is just shameful.

It’s like saying everyone else’s kid in the marching band is off step except mine. They’re all stupid, apparently.

But it’s no reason to not fix a serious problem. A lot of websites can’t print.

You’re wasting people’s time and you’re making it hard on us web developers. I understand you want to go with standards but at the cost of sanity… especially when most of us can’t edit code that we didn’t make (SHAREPOINT).

I expect better from you, FireFox. I was thinking about switching to another browser because of this idiocracy. But, quite frankly, I love FireBug too much and it’s only available in FireFox.

Please fix this printing issue in your next release. I hear good things from FF 4.0. Hopefully one of them will be an end to this madness. Good night and good luck.

I’m sure I discovered and solved these before, but I keep having to find the answer again, so I thought I’d blog about it to remind myself and maybe help someone else out, too.

This blog entry is composed of two IE6 problems that I’ve found the answers to. Since we as developers still have to support IE6 for that few 7.2% that refuse to upgrade, there’s a lot of fixes (and/or hacks) out there to get the job done. I prefer the fixes. As a rule, I don’t use hacks, I just play around with it till it works.

ISSUE #1
In IE6, sometimes it puts extra padding or margin at the bottom of images and div tags like so:

Notice the extra space between the banner and the menu? Yeah, that’s only in IE6.

As I’ve said, I’ve found the solution to this before, but to avoid needlessly googling again, here it is.

My CSS for the entire banner before:

#main_banner {
width: 100%;
margin: 0px;
padding: 0px;
height: 74px;
max-height: 74px;
vertical-align:  middle;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

FIX #1
Since IE6 has an overflow issue, the correct fix for it is to hide the overflow like so:

overflow: hidden;

This solution also solves the other problem I had when I wanted the divs to move and not drop down when the window gets smaller.

ISSUE #2
I needed an orange bar under a header image to kind of separate the page out. Kind of like a horizontal rule. I probably could have used a hr, but decided to use a div tag. It was to span the entire length and be 8 pixels tall.

<div id=”orange_separator”></div>

My CSS was the following:

#orange_separator {
height: 8px;
background-color: #F77B25;
}

FIX #2
This code works in ALL browsers EXCEPT IE6.

IE6, I guess, expects there to be text inside the div tag, but there isn’t. It uses the font-sizes from other stuff, so we need to specify to it that there is no font or text.

I added the following to my #orange_separator CSS:

line-height: 0px;
font-size: 0px;

IE now thinks that the text inside has a font-size of 0 and since there is no text, the height of the div is 8 pixels.

FIX
I read on a blog to edit the theme_menu_item_link function located in includes/menu.inc . I then added my <img tag to the Description. Well, that didn’t work. I investigated it further and looked at the code and instead put it in the Menu Link Title. That didn’t work either. I even tried the PHP function html_entity_decode, but that didn’t work either. It was still escaping the characters.

Anyway, after googling and reading up on how to do it, I tried to edit the template.php file with no luck. I read some other blogs and tried to edit some other files but it still kept escaping the code. I didn’t want to mess with the other files Drupal had put there.

I finally formed my own solution. I decided to edit the files Dupal put in. I looked for the l() function which is the function that actually forms links.

I added the following to the function l() in the file includes/common.inc on line 1598, right after the default options are declared in the $options array:

if (strpos($text, ‘<img’) === 0) {
$options['html'] = TRUE;
}

Yes, I know it’s unsafe but that’s the only way I could get it to NOT escape. I can now add HTML img script to the Menu Link Title and it display an image.

SPECIAL COMMENT
I’ll make this brief. I don’t know why Drupal didn’t think about images in link lists before. You think that would be obvious. The more and more I learn about Drupal, the more and more I realize how LESS flexible it is than I thought. I will say at least they have a community that can help, which is something that Microsoft seems to lack.

Come on, Drupal, think common sense.

FIX
I actually found this on a forum of someone else having the same problems. They didn’t exactly show you the correct path of where you change it but I remember the screen before and I was able to get back to it.

If you go to Administrator then Site Building then Modules, it is the PHP filter. You need to check it for PHP code to be in your Input formats.

Yay. Now I’m on my way!

ISSUE #1
It was requested of me to figure out how to prepopulate the email address in SharePoint login prompts. When you login to SharePoint, if you want to do anything like open a document, you are prompted for your AD (Active Directory) credentials again and again. Needless to say, this is unnecessary and annoying.

FIX #1
After many hours of googling “prepopulate email address in SharePoint”, I actually found the fix in the SharePoint book. It’s called Enabling Automatic Login. The steps are as followed:

On the CLIENT’S computer (aka not the server… aka everyone who uses SharePoint… their actual computer) in IE (make sure it’s Internet Explorer since SharePoint really only works with IE), go to:

Tools –> Internet Options –> click on the Security tab –> select Local Internet –> then click Sites –> Advanced

Under Advanced, the URL of this website should be in the first form field. Click Add. Then Close, then Ok and Ok again.

That should fix the prompting annoyance.

ISSUE #2
When in SharePoint, you click anything (and I mean ANYTHING), there is an annoying beep. It’s like on every link, on every page, everywhere. I don’t have speakers but I have headphones hooked into my computer. Needless to say, I heard the beep with my headphones off, it was that loud. It’s annoying.

FIX #2
This fix is for the client’s computer as well… not the server… not an actual setting in SharePoint (at least none that I could find). So… on the clients computer go to:

Control Panel –> Sounds and Audio Devices –> click on the Sounds tab –> under Program Events scroll down to Windows Explorer –> Information Bar –> under Sounds select (None).

It was driving me crazy!

SPECIAL COMMENT
If the simple fact that you MUST use IE with SharePoint wasn’t enough, there aren’t settings in Central Administration nor on the server that solve minor annoyances like this. Microsoft should have thought about these things before they released this hunk of garbage that is SharePoint. I sincerely hope others realize that Microsoft is just a thug corporation who thinks it owns the world.

They don’t comply with standards, they don’t debug, and they don’t test their products.  We are do their tests for them!

About a year ago I ran into a Microsoft error… Emails were not sending which had both .txt and .vcs files attached to them. (In case you don’t know .vcs files are for Outlook calendars.) No errors, just the emails weren’t sending. What was also weird is that some emails actually WERE getting through… and they all did before. It worked before but all of a sudden stopped working. No server changes, no MS Exchange changes.

I ended up calling Microsoft. They sent me a test program which emailed me a .txt and .vcs file. It wouldn’t work. It turns out the problem was on their end.

In the end, the dude wouldn’t stop bugging me on getting me to help him fix it. I was like “isn’t it your problem now”? They did refund me the ticket since it was their fault.

I think it’s a little ridiculous that these problems are easily fixed on the CLIENT’S side. There should be settings in Central Admin or on the actual site that take care of simple things like this so I don’t need to send out an email or post on how to fix it. The fact that every computer you use that has SharePoint, you must configure IE so those little prompts and sounds don’t drive you up the wall is unbelievable.

We don’t want to be prompted on every link or hear that annoying “blimp” every click. Use some common sense, Microsoft. Good night and good luck.

// for loop in PHP here

<label>Data:</label><br />
<textarea name="data[]" id="data[]" rows="5" cols="40"><?= $data[$x]; ?></textarea> <a href="javascript:popUpWindow('popupsearch.php?frm=input_form&amp;fld=data[]&amp;select_multi=yes', 700, 300);">Lookup Data</a>

// end for loop

This is generated using PHP (a for loop). Basically, the user decides how much data they want and they type it in, or they can look up data. When they click Lookup Data, a window pops up with a search feature for them to search for data. They can choose multiple items to insert into the form. When they do, it closes the popup and inserts the data into the form.

Sounds simple, right?

WORK AROUND
The problem was with the array. My guess is XHTML doesn’t use arrays of id’s (yet). The syntax above is what I tried (and failed) to put before. The work around is:

<label>Data:</label><br />
<textarea name="data[]" id="data_<?= $x; ?>" rows="5" cols="40"><?= $data[$x]; ?></textarea> <a href="javascript:popUpWindow('popupsearch.php?frm=input_form&amp;fld=data_<?= $x; ?>&amp;select_multi=yes', 700, 300);">Lookup Data</a>

The id is no longer in an array. The name is what is actually used later in PHP to get the value(s), so there’s no rewrite of code on the backend side.

I read an article (or I heard) that in HTML 5 when it becomes a standard, they will be combining the id and name elements of inputs. That’s the only problem I can forsee with this code not being able to be used later. I’d have to modify this code and rewrite the backend to recognize each textarea as its own entity instead of an array.

The data without single or double quotes displayed fine in the alert box, but the other data didn’t.

In a nut shell, I needed:

<a onclick="javascript: alert('$data');">?</a>

The trick was escaping $data to display the proper PHP first, then JavaScript.

The $data string I kept testing was:

Has the ability to quote the Godfather series on command. Must be able to complete a quote or a scene by the slightest dialogue.

“Go to the mattresses!”

FIX
As I said, I tried just about everything trying to get $data to display single and double quotes in the alert box. I started simple by replacing the ‘ with /’ and “ with /”, to no avail. I also tried using the htmlspecialchars function, but that didn’t work either.

Furthermore, I tried to replace the double quotes with single quotes and escape the string. It still didn’t work.

When I finally got close to solving the problem, I realized it wasn’t necessarily escaping the quotes, it was also escaping the line breaks. Since PHP and JavaScript have the same line break escape (\n), it was a little tricky.

I finally got a script off the internet to escape the string and put the special characters into their HTML entities. It didn’t work, but I built on that same idea.

My script is now:

$data = preg_replace("/\r?\n/", "\\n", htmlspecialchars(str_replace("'", "\'", $data)));

echo "<a onclick=\"javascript:alert('$data');\">?</a>\n";

Works like a charm.

Here’s my xHTML code:

     <fieldset>
      <legend class="change_form">Personal Information</legend>

      <label>Name:</label>
      <label class="left"><?= $emp_info["emp_title"] . " " . $emp_info["emp_fname"] . " " . $emp_info["emp_mname"] . " " . $emp_info["emp_lname"]; ?></label><br />

      <label>SSN:</label>
      <label class="left">XXX-XX-<?= $emp_info["emp_ssn"]; ?></label><br />

      <label>Employee ID:</label>
      <label class="left"><?= $emp_id; ?></label><br />

      <label>Relationship Status:</label>

      <label class="left"><?= $emp_info["emp_relationship_status"]; ?></label>
     </fieldset>

My CSS for the fieldsets are:

fieldset {
	width:				100%;
	border:				solid 0 #FFFFFF; /* Opera doesn't get border:none or border:0 on fieldsets */
}

fieldset label {
	color:				#FFFFFF;
	text-align:			right;
	font-weight:			bold;
	display:			block;
	width:				250px;
	float:				left;
	padding:			2px;
	margin:				0;
	margin-top:			0.4em;
}

fieldset label.left {
	font-weight:			normal;
	text-align:			left;
	float:				left;
	width:				380px;
	margin-left:			0.3em;
}

FIX
I fixed this issue by increasing the width in the fieldset label.left class:

	width:				450px;

A shot in the dark but it worked and it does make sense. Now the lines properly break when they’re supposed to and the form looks better than if I had to add a bunch of line breaks (my previous solution to this problem).

It works fine in Firefox and all the other browsers, just not IE. And the other strange part is, it doesn’t do it every box. I have multiple boxes that it doesn’t do it in. Nothing changed with the syntax or anything.

My stylesheet is as follows:

.even {
	background-color:		#ADFF2F;
	color:				#000000;
	border:				1px solid #000000;
	padding:			4px;
}

.odd {
	background-color:		#5A8A03;
	color:				#FFFFFF;
	border:				1px solid #000000;
	padding:			4px;
}

FIX
It didn’t take much digging to find a post where someone has come across this same issue with IE. Adding the following to the .even and .odd classes fix the problem:

	zoom:				1;

The text now shows up with the correct color. However, the forum I was on did say that the zoom isn’t proper CSS syntax. I always make sure my stylesheet and code are compliant. I think it’s a sacrifice I have to make in order for it to function with the worst browser ever.

FIX
After googling things like “web navigation icon”, “web toolbar icon”, “browser website icon”, I finally came across what it’s really called, a “Favicon”. Read all about them at wikipedia.

I created a small image (32×32 px) using Flash. I then uploaded it to my websites (longlivethemonkey.com, Quotes, and Jeepers) and added the following code in the htmlhead.inc (inside the <head></head> of your xHTML) file:

<link rel="icon" type="image/png" href="images/lltm_icon.png" />

So now I get a pretty little icon at the top. When you read about the Favicons in wiki, it states that since Microsoft’s IE isn’t standards complient, if you name your icon differently than what Microsoft expects it to be, it won’t show up in IE >=7 (not sure about 8). The line of code above works in Firefox, Opera, and Safari. I guess Chrome hasn’t caught up with it yet.

UPDATE 1
I figured out how to make it so IE gets it. The file needs to be a .ico file and it must go before your code for your other icon. The code is:

<link rel="shortcut icon" href="/images/lltm_icon.ico" type="image/vnd.microsoft.icon">

You can convert your PNG to a ICO here. No software necessary.

UPDATE 2
With WordPress it’s easy. In your Dashboard under Appearance go to Editor. Click on your Header file (should be header.php). Put the code as you would in a regular file, in the head. Works like a charm.

WORK AROUND
Using IE, oddly enough, solves this problem. The selected item is inserted properly into the form.

SPECIAL COMMENT
I’ll begin by saying I am a devoted Mozilla Firefox user. I use IE rarely when Firefox has issues or when TESTING a web application. As a web designer/programmer, I need to make sure that my product can function with any browser. I take the extra step in assuring that my product is fully operational, no matter what browser a user is using. I test my application with Firefox, IE, Safari, and Opera to make sure it works. If it doesn’t, I fix it so that it does work with that browser.

Microsoft programmers, you should be ashamed. To release a tool as powerful and as popular as SharePoint and have it NOT be compatible with one of the most popular browsers as Firefox. How dare you not test your product thoroughly, using multiple browsers. Did you assume that only IE users will use your product? You are wrong, sirs.

If you were to go ahead and make the outrageous requirement to ONLY use IE with SharePoint, why not display an error or a warning message when someone goes to a SharePoint site with a browser other than IE? Seriously. Here I was trying to figure out why it wouldn’t insert my selection when all the while it was because of the browser I was using. Rediculous.

And another thing, why even have this visual show for a simple drop down menu anyway? What a waste of time programming something like that. Why should it open up a completely different window just to insert one little thing? Just make it a simple drop down. Who are you trying to impress? Are we all supposed to be like “ouu, look at that, visually pleasing”. I don’t think so and I am NOT amused.

You wasted my time and my energy trying to research this problem, emailing everyone I could think of who uses SharePoint. Even drafting an email to my boss explaining that I couldn’t do a task because there’s a bug in SharePoint (yeah, that sounds good, right?).

Come on, Microsoft, get with the picture. Good night and good luck.