Content After Two Floats With Spacing

PROBLEM
I need to put content after a very specific float. There are a few floats going on in the banner of one of our websites. The first float is handling the left/right content. The other float is inside the right content and handling the alignment of the search and submit buttons.

We now want text to go underneath the search and submit button. The problem is just putting the text under these elements, it doesn’t leave much room for spacing:
there is no spacing after the search and submit button

Furthermore, it looks awful in IE:

The search and submit buttons move down and the rest of the content is towards the bottom

SOLUTION
After trying to add a margin on almost everything in the box (which did not work), I added a height to the search area. The below content knows that it’s not big enough to fit in there so it breaks.

I could then give the search div a padding of 3px on the top and bottom. Now it looks nice in all browsers:

The text at the bottom has space away from the search field

Google Reader Not Working

PROBLEM
Google updated Google Reader about two to three weeks ago. The interface is a lot different than what it used to be. Even on google.com/reader, they have a screen shot of the old interface which was a lot nicer and easier.

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:

Google Reader only showing one result, no scroll option

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!

FireFox Print Bug With MOSS Site

ISSUE
I’ve been assigned the horrifying task of fixing various bugs in MOSS/SP sites at my work. One of the bugs is the inability for FireFox to print documents that span more than one page.

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.

Text Color Same As Background In IE

ISSUE
While working on my company’s Intranet, I ran into a strange bug in IE. It seems that with DIVS sometimes, the text color is the same as the background. However, when I mouse over it, it changes to the correct color.

Text Not Showing Up Screen Shot

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.

Creating Favicons

ISSUE
For a while now I’ve wondered how to get a web navigation/web icon/toolbar icon to display on my website. Most major sites now have them:

Favicon Screen Shot

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.

SharePoint Bug With Firefox

ISSUE
I noticed this around the SharePoint site I’m managing with the Central Administration. When going to select something from a drop down, it doesn’t insert it into the form.

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.