PROBLEM
Here’s another one of those weird IE bugs. There is a gap at the bottom of the div that has an image in it. The image may or may not be linked.

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.

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:

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!

ISSUE
So I don’t know what it is about Drupal 7, but it just seems to been more difficult to work with and a lot more frustrating than Drupal 6. I really think it hates me.

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.

ISSUE
I need to do round borders for IE 6-8 users. Since I already have to use images to generate the borders, I might as well make them fancy and add a little shading. However, when I go to view my new div in IE7, the background of the div does not show up… In other words, the two borders are not visible.

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.

ISSUE
Since all HHS government websites need to be 508 compliant by May 2013, my company has been running around trying to make them compliant now. We have quite a few old applications which are still being used. It’s my job to review them for compliancy and fix some of them.

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.

ISSUE
Upon testing an application I’m working on I noticed that IE9 wasn’t properly clearing text after floated divs. I have a big div which encompasses two floating divs (aka a two column display). A table is underneath the big div but with no clear. The reason there isn’t a clear is because the two column display is part of the right div of another two column display, if that makes sense.

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.

ISSUE
It really does erk me that Drupal doesn’t have an option for administrators in the Show blocks for specific roles when editing a block.

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…

ISSUE
While working on a new Drupal site, the theme I chose, Sky, I noticed the menu wasn’t dropping or flying out in IE. After a few tests, it was actually found out, the menu was working but it was only working on the page where it was linked (or one if its children).

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.

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.

This blog post is actually for two problems with IE6 I’ve come across recently.

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.