Category: MS IE

Add HTML5 Shiv To Drupal

Drupal, Drupal 7, MS IE

PROBLEM
I’m using HTML5 in my theme. I want older browsers (ie, IE) to recognize some of the new tags such as header, footer, etc. Google has a shiv out there you can download. I use this on like all my sites.

You can link to it directly but I want the print shiv as well… I’m not sure where they keep that so you can directly link to it.

I’m a novice at Drupal 7 and they’ve changed a bunch since Drupal 6. The JavaScript calls are different. Also these JS files are a little unique as I want to put them in an less than IE9 comment.

SOLUTION
After playing around with getting the URL to the theme, having that not work exactly since I’m working on a local environment, I got the function calls I needed to link to the /javascript/ folder I created in the theme where the shivs will go.

I modified the html.tpl.php file which is in the themes folder. I added the following two lines of code which go to the two shivs:

<!--[if lt IE 9]><script src="<?= base_path().path_to_theme(); ?>/javascript/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<?= base_path().path_to_theme(); ?>/javascript/html5shiv-printshiv.js"></script><![endif]-->

If there’s another way, I’d like to know. I’m sure there’s a module out there you can download to get the HTML5 support like a shiv, but I think linking to the shivs is a lot easier.

Content After Two Floats With Spacing

CSS, Mozilla Firefox, MS IE

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

Bottom Border Not Showing Up In Nested List In IE

CSS, MS IE

PROBLEM
In IE the bottom border of a div with many nested lists isn’t showing up. It works fine in FF. All the other borders are fine and visible.

As you can see below, the bottom border does not show up in IE:

The only CSS for the main container is a border.

However, the funky thing about this issue is that when I only have one list, the border shows up (just imagine the list stopping at “Resources and Publications” in the above example). That would only be one list.

Searching the web didn’t yield any fix. When you google this issue, they usually suggest adding hasLayout and position: relative to every li. That didn’t work for me.

SOLUTION
By adding a min-height to the container div did the trick for me. This was the same div that had the border CSS. I added min-height: 10px and the border now works in IE.

Two Column List With CSS

CSS, MS IE, NIFTY TRICKS, XHTML

PROBLEM
I wanted to do a list of items in two columns with a border around the list. I didn’t want to use two floated divs in order to get the look I wanted (nor tables). Also, I didn’t want to break up the list. I wanted the HTML to be simple.

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.

Gap At Bottom Of Div With Image In IE

CSS, MS IE

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.

Small two pixel gap between divs

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.

Background Image Won’t Display In Div In IE7

CSS, MS IE

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:
Background Image Not Showing Up In IE7My 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.

IE9 Text Running Into Text, Not Clearing Divs

CSS, MS IE

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.

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

CSS, MS IE, XHTML

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.

Tackling Prepopulated Email Problem & Annoying Beep In SharePoint

MS IE, MS SharePoint, SPECIAL COMMENT

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

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.

Text Color Same As Background In IE

CSS, Mozilla Firefox, MS 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.