Extra Padding At The Bottom & Div Height Too Big In IE6

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:

Extra Padding At The Bottom In IE6

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.

How To Insert Images Into Links In Drupal

ISSUE
I only struggled with this for about an hour. I’m not sure why Drupal hasn’t thought of this before, but it would be nice to have images as links once in a while. I needed one for my menu… a home link that was an image of a little house (how cute).

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.

Enabling PHP Input Into Drupal

ISSUE
After a while of wondering how the hell I’m supposed to add PHP into Drupal, and many times trying it in blog entries, posts, and blocks, nothing came out of it. It would always display the PHP code and not evaluate it. I didn’t get my PHP cert for nothing, ya know?

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!