Kempwire.com

By Jonathan Kemp

Getting Overflow Hidden to Work in IE

This is an easy fix, but I thought it was worth a post anyway, in case someone comes across it.

Setting overflow: hidden on a block element does not work in IE, if width and height are not set. But, it does in other standards aware browsers.

You may come across this situation if you have an element nested inside another element where width and height are set, and the nested element is inheriting the dimensions of the parent element. In that case, there is no need to set width and height usually. Well, in IE, overflow: hidden will not work if no dimensions are specified.

So as you may have already guessed, the fix is pretty simple. Setting a width and height on the element, or even just a width, will cause IE to obey the property.

I’m not sure if IE is doing the correct thing or not, in this case. It does make sense that you would have to specify dimensions, so that the browser will know where to cut it off at. It seems though, that IE is dumb here, as other browsers assume the inherited dimensions. I’ll leave that up to you to decide.

Elgg Plugins Need Better Organization and Navigation

Update: See the comments. Not too long after I wrote this, we noticed big changes in the Elgg Plugin site. What changed? Every one of my five suggestions was incorporated making huge improvements in the Elgg Plugin site. Thanks guys.

A few days ago, I wrote a post on how to improve Elgg. Something else that is needed to help make it better is improved plugin organization.

The way that Elgg plugins are organized leaves much to be desired. You can see what I am talking about here. Plugins are listed in order of most recently added to the site, and you can browse them 20 at a time. So to find a plugin, you have to go through page after page, and there’s no way to tell whether or not the plugin might be useful.

So here is what needs to be added to improve plugin organization on Elgg.

1. A way to rate plugins. Plugin ratings would be useful to help developers determine whether the plugin works well or not. Then you could organize plugins by popularity.

2. How many times a plugin has been downloaded. This would also help you to know if a plugin is useful, and you could sort plugins by this option.

3. Plugin search. There is no way to search plugins on the site. What?

4. A plugin description displaying in the listing. The only thing you can view in the listings is the plugin title. These are not very descriptive sometimes, so it is hard to tell what the plugins are for based on the titles alone.

5. Better versioning. Old versions of plugins stay in the listings, which is fine. But plugin organization by version would be helpful.

Basically, Elgg plugin organization is almost useless in that you have to page through the list of most recent plugins and without descriptions you have to click through to find out what they do. Adding things from the list of above would greatly improve the organization and help developers better find plugins to improve their sites. This would also help improve the usefulness of Elgg itself. All of these suggestions are obvious, so it’s a mystery why the developers haven’t implemented anything like this yet.

Firefox 2 Does Not Support inline-block

Those familiar with CSS 2.1 may be familiar with the CSS property display: inline-block. This property allows an object to have the properties of both an inline object and a block object. What this means is that the object can be displayed inline but have height and width qualities of a block object.

This is a property that can be very useful when applying certain layouts. I was using it on a project recently when I discovered that Firefox 2 lacks support for display: inline-block. This was quite shocking to me because I assumed that Firefox 2 had full support of CSS 2.1. After all, Firefox was the number one Mozilla browser until only recently.

Anyway, in searching for a work around, I discovered that there is a similar Mozilla-specific CSS property that works in the same way, display: -moz-inline-box. All you have to do is add that property to your CSS and you will get the same effect in Firefox 2.

However, I discovered another problem with this in that once you apply display: -moz-inline-box to an object you can no longer use position: absolute on any objects contained within that object. I continued to be amzaed by Firefox 2’s misbehavior.

I finally discovered a solution to this as well, although not ideal. After searching a bit more, I found that if you add an second div inside the object, you can apply position: relative to that, which will then allow you to position objects absolutely within that div. Make sense?

In case you were wondering, the reason it is not ideal is that you are adding an unnecessary div to your code for simply presentational purposes. It is never good to do this, but sometimes the trade off is worth it for full cross browser support, when your layouts are more complex.

Elgg Development Wishlist

Elgg is an open source software package that allows you to create and host your own social network. I discovered it last year while looking for this type of software. It is free and because it is open source there is a community of developers that can create plugins to help improve the software.

First, let me say how pleased I am with Elgg. It is the best open source social network software out there that I have been able to find. In fact, I would say there is nothing else like it. I also like the fact that it is open source and extendible with plugins and themes. There is a community site where users can upload plugins and themes.

However, there are several drawbacks to Elgg. First, I would say it is in its infancy now. In fact, in 2008, a new 1.0 version was built from scratch. While the 1.0 version is a great improvement, several features were left out of the new version that existed in the old version that software like this should have in my opinion.

The good thing is that development is continuing on Elgg with 2 major releases planned per year. I am afraid though that the features that are most needed are not on the radar of the developers. Here is my list of features that I feel Elgg needs in the next version or two to be much more useful.

1. SEO – Elgg needs basic SEO. Currently, blog posts, pages and files do not even have unique title tags. This is a basic rule of SEO the developers have ignored. The funny thing is that this was not a problem in the earlier version.

Update: I’ve posted a solution for fixing your title tags in Elgg.

2. An Upgrade Path – When version 1.0 was launched, there was no way to upgrade your installation without losing your data. This is a serious mistake that has not been corrected yet. If you were already using it, you can’t use the new version unless you want to start over from scratch. Why was this even considered and why hasn’t it been corrected yet?

3. The Wall – The classic version had a wall feature just like Facebook. In the new version, they got rid of it. Please bring back the wall.

4. RSS Import – Classic Elgg had a built in feature that could import RSS feeds and even create blog posts from the RSS feed. I’m not sure why they got rid of it, as that is a pretty cool feature that simlar blog platforms need a plugin for. Please bring this back as well.

These are my main concerns, but the list doesn’t stop there. It seems like the developers are using WordPress as a model. While this is a good thing, the developers should pay closer attention to the development of WordPress. I can think of a few things WordPress has that Elgg should have.

WordPress has better documentation. WordPress also has better access to support. Another cool feature would be ratings on plugins and stats on how many times plugins have been downloaded. If you haven’t noticed a pattern yet, WordPress also has this.

Hopefully, this post will start the Elgg developers thinking about these things. If not or in the mean time, maybe some sharp plugin developer will take it upon himself to find a solution to these problems. In any case, I am patiently waiting for Elgg to get better over time. It’s not there yet.

Repeating Background Bug in IE 6 and 7

I discovered an interesting bug that occurs in both IE 6 and 7 the other day. Actually, I had seen it before, but I had never been able to figure out a cause or a fix until now.

The bug occurs when you have a background set to no-repeat on an element with an undefined width. When no width is set on the element, usually because it’s inside a parent element that has a set width, the background repeats vertically in IE 6 and 7 even when the background is set to no-repeat.

The fix is easy. Obviously, if this bug occurs when no width is set on the element, simply setting a width fixes the problem. The background will no longer repeat and will show up as it is specified. There you have it!

Bizarre Empty Div Line-height Bug in IE6

File this one under, you may have seen it before, but I ran across a very weird IE6 bug yesterday. This bug gave me a fit, and I hadn’t encountered it before, at least I don’t remember it.

The problem was an empty div with a height set to 6px. The actual height in IE6 was 18px. If I set the height to 20px, it would be 20px, but if it was less than 18px, it would stay at 18px. Well, it just so happens that 18px is the line-height. So what’s happening is the empty div is inheriting the line-height, even though there is no text inside the div. Go figure.

Another interesting thing is that reducing the line-height doesn’t fix the problem. No matter how I tried, it stayed at 18px. Even setting the line-height inline doesn’t work. What does work is setting the font size to 0. This fixed it instantly. So remember, if you are using empty divs in IE and they are smaller than the line-height, you need to set font size to 0.

See the screenshot below and click on the link to see an example.

Line-height Bug in IE6

How to Transfer a Blog from Wordpress.com

If you are thinking about setting up a blog, there are many good options out there. However, it is my opinion that Wordpress is the best blogging platform currently available. It is also one of the most widely used due to its robust features, extendability and ease of use.

If you decide to use Wordpress, there are 2 ways you can do it. You can use the free hosted version of Wordpress.com, or you can host it yourself. Both versions have their pros and cons. Ideally, you want to host your own copy of Wordpress to have the most flexibility. This is not for everyone though. If you are not up to the task of running your site yourself, the hosted version is the way to go.

Also, when you are starting out with a new blog, Wordpress.com is a big help due to the automatic domain authority you get from having a subdomain of Wordpress.com. This means you can instantly get good search engine rankings which drive traffic to your site. This is the main reason to set up a hosted version and quickly build up some decent traffic.

Let’s say that you do decide to go with Wordpress.com. What happens if you one day want to host your blog yourself? In that case, it is possible to transfer your blog to your own hosted version of Wordpress without losing any data or traffic.

The key to this is having your own domain. When you sign up for a Wordpress.com blog, your blog address will be a subdomain of wordpress.com, as in yourblog.wordpress.com. What you want to do is buy your own domain name and point it at your Wordpress.com blog. Wordpress.com allows you to do this for $10 a year, plus the cost of your domain. This works no matter when you set it up because Wordpress.com automatically redirects traffic from your wordpress.com subdomain to your custom domain, without having to do your own redirects.

Once your links and search engine results are pointing to your new domain, you should be able to transfer all your files to your new host. The second important part of this is importing all your Wordpress data into your new custom Wordpress setup. With Wordpress, this is very simple to do, and it will keep your url’s the same on your new site as they were on your old site. This is critical to making this work. You will also want to keep the same template so that your site appears to change as little as possible.

After your files and data are transferred, you can point your domain back at your new host. Also, Wordpress will redirect any traffic to your old blog to your new one as long as you have the custom domain active in your Wordpress settings. It’s that simple!

Safari Web Inspector for Windows

In case you didn’t know, there is a beta version of the Mac browser Safari available on Windows as of last year. I’m not sure why it is still in beta status as it has been out for awhile, and Safari 3 for Mac is now part of Tiger and Leopard and not in beta.

Anyway, if you are wanting to debug your HTML and CSS in Safari, you should have Web Inspector. Web Inspector is a debugging tool for Safari similar to the Firefox plugin, Firebug. Well, now that I am on a Windows machine at work, I installed Safari for Windows. So, I wondered if Web Inspector was available for Windows as well, and it is. Check out the directions for enabling it here. Basically, you edit your WebKitPreferences.plist file and add this line of code.

<key>WebKitDeveloperExtras</key>
<true/>

Restart Safari, and that’s it. To use Web Inspector, open any web page in Safari, and right click on any html element you wish to inspect. You should see an option for Inspect Element. Click that option, and Web Inspector will open on that element. That’s it.

IE6 3 Pixel Float Bug

So I ran across a nasty bug the other day in Internet Explorer 6 that I had never seen before. The bug is when you have 2 adjacent elements and one of them is floated, IE6 adds a 3 pixel margin to the floated element. You can read about it here on Position is Everything.

I ran a pretty thorough test on it to make sure that is what is occurring. I also tested every fix I could think of before coming up with one. The fix I came up with is to float the other element. This causes the 3 pixel margin to disappear. It doesn’t matter if you float it left or right, either works. Nothing else did.

Click on the following links for examples and source code of the bug and the fix. I realize that the float fix may not be ideal for all situations. It depends on how your site is laid out. That being said, it does work, although it may require you to redesign your site a little bit to apply this fix. It all depends on how bad you want it to work correctly in IE6.

End Mountaintop Removal

So this is a bit off topic, but it’s personal blog. Deal with it. This is too important of an issue to not say anything about it. I’m always amazed to see how much disregard humans can have for their surroundings. This applies to many things, but in this case, I am talking about the environment.

Mountaintop removal is something I am hearing about for the first time, but now that I am aware of it, I am completely sickened by it. Mountaintop removal is a radical form of coal mining where entire mountains are literally blown up — devastating communities throughout Appalachia, polluting drinking water and destroying rivers. How can we do this to ourselves? Does no one realize the consequences of this?  If we allow this type of destruction to continue, there will be nothing left, and nature will be a memory.

Check out this site, http://www.ilovemountains.org/, and see this for yourself. See if a plant near you is using coal from mountaintop removal mines. Then, make others aware of it. I am guessing that most Americans have no idea this is going on. The more public awareness we can create the better chance we have of stopping it soon.

I am very close to it, being in East Tennessee. It is happening in Kentucky, and according to this site, the Bull Run Steam plant, which is near me, is using this type of coal. I really hope something can be done.

Page 3 of 1612345...Last »

Copyright © 2005-2010. XHTML | CSS