Affordable Web Site Design

Another quick bug fix for you. Another little quirk about Internet Explorer is the way in renders the overflow property. I’ve found two problems with this. First is that without a specified width, IE treats the overflow property, no matter how it’s set, as overflow: visible; Second, even after we’ve solved that problem, IE tends to cut off the bottom portion of the element if there is a scrollbar, as if it wasn’t taking the height of the scrollbar into account in its rendering, so let’s dive into these real quick.

First of all, if a width is not specified for the given element, IE will treat it like overflow: visible;, causing the element to continue outside of where you want it, like this:

In order to fix this you need to create a stylesheet just for IE (That’s explained in the last half of this article if you don’t know how to do that). Once you’ve done that, add the following styles to the IE-only stylesheet, where “.element” is the class of the element you’re working with:

.element { overflow-y: auto; overflow-x: visible; width: 450px; }

IE understands overflow-y and overflow-x, and the width is whatever width you want the element to be and it must be set to prevent this problem. In my case, I wanted the element to be as wide as the containing element, which was 450px.

Once you do this, you’ll notice this problem:

Ok, IE, you’ve really outdone yourself on stupidity this time. It looks like IE is not taking the scrollbar into account in the height of the element. So, now we need to fix that by adding padding-bottom: 20px; to the IE-only stylesheet, and here’s what we get:

.element { overflow-y: auto; overflow-x: visible; width: 450px; padding-bottom: 20px; }

Voila! Problem solved. Keep in mind, this isn’t a perfect solution…the problem with this is that IE will add that 20px padding at the bottom of the element even if there isn’t a scrollbar, leaving you with some extra space on the bottom of your element in this case. It’s usually not a big deal, but if anyone knows of an easy fix for this I’m all ears.

Bookmark It

As a web designer you learn something new everyday about the intricacies of Internet Explorer’s faulty rendering of certain elements on a screen. While I’m not always a proponent of using a Strict Doctype, it does help solve some of those issues…then again, it also requires a bit more work and time is money, right? Well, one of the problems I’ve had with internet explorer in the past is the way it renders lists, unordered and ordered lists, especially IE6. Even with a Strict DOCTYPE declaration, internet explorer has a nasty little habit of adding margin between list items when you’ve specifically written into the CSS that it shouldn’t behave this way. I have to admit, I do this everyday and it took me a while to figure this out, so hopefully this will help someone else having margin problems with list items in IE 6 or any other version of internet explorer.

Internet Explorer List Item Margin Problem

So what is the problem exactly? Here’s a snapshot of the sidebar of a site I’m working on in Firefox:

Incidentally, this is also how it appears in IE 7. Now, the snapshot of how that same unordered list appears in IE 6:

Whoa! Where’d all that extra margin come from? Well, it certainly didn’t come from the CSS because every single other browser tested displays fine and all the margins are set to 0px, as well as padding. So what’s the problem here?

IE Problem with List Items and Display: Block

The problem rears its ugly head, in this situation, because I have the display property of those list items set to block in the stylesheet. Internet Explorer, but especially version 6, just freak out when trying to display lists when the links within those lists are styled display: block. So, how do we fix it? We need to trick internet explorer (because it’s bugginess also allows us to trick it into behaving the way we want) into thinking that the display property is set to inline, after we’ve done that we can essentially tell it we’ve changed our mind and we want the display property set to block. This will make IE really throw a temper tantrum, but it’s exactly the temper tantrum we want it to throw.

Conditional Comment Styles

To solve this we need to add a conditional comment in our header section, preferably near our other stylesheet declarations. This conditional comment is something only IE will read because, you guessed it, it’s psychotic:

<!--[if IE]>
<link rel=”stylesheet” type=”text/css” href=”http://yourdomain.com/styles/ie.css” />
<![endif]–>

Now you need to create a new stylesheet for Internet Explorer only and call it ie.css.

Once you’ve done that add these two lines to the stylesheet:

#sidebar li a{display:inline-block !important;}
#sidebar li a {display:block !important;}

The “#sidebar” part is part of my stylesheet because the sidebars on that particular site are wrapped in a <div id=”sidebar”></div>. When dealing with IE it’s alway best to be as specific as possible. Also, you’ll notice I’ve added the !important declaration to this. The purpose of that is to ensure that when I change some styles later on IE doesn’t go and try to ignore this rule. Generally, IE will adopt the most specific style, so, if I were to add the following line to my general stylesheet:

#sidebar ul li a{display: block; }

IE may try to ignore the hack above in the ie.css file. Why? Because this second declaration is more specific. The !important declaration prevents that.

So, now that we’ve added those two lines to ie.css, what does IE 6 show us?

Ahhh, beautiful ain’t it?

Bookmark It

A project I was working on today for web design client in Los Angeles that involved a whole heck of a lot of form fields to run the admin backend of the website. I needed a quick and easy way to allow the client to change or delete everything in each field as quickly as possible. The best method is to highlight everything in the field using the onfocus() and select() javascript functions…

<input type="text" id="textfield" onfocus=”javascript: this.select();” />

Now isn’t that nice and simple? And the added usability is so great your clients will love you. You don’t have to tell them how little work it actually took

Bookmark It

I just picked up a copy of Adobe Contribute on the recommendation of a friend of mine and, I have to say, it’s pretty incredible. I’m writing this post on my desktop, visually, in Adobe Contribute, and it’s showing up as I type exactly how it will be displayed when published…well, close enough anyway.

So far I’ve been able to edit posts and write new ones, but I haven’t figured out how to edit Wordpress pages yet…not sure if that’s possible, but I’ll keep you in the loop.

If you’re interested in taking a look at this time-saving piece of software, you can get a free 30-day trial from Adobe here.

I’m a huge fan of Adobe’s software. I’ve used almost all of their aplpications at some point in time, some more than others, and I’ve found everything to be so intuitive. For example, when I was installing Adobe Contribute, I had to add my server information so contribute could access this blog. At one point it asked for my blog’s access point. Now, I’ve been blogging for a while and designing blogs for just as long and I’ve never once heard the term “Access Point” in reference to a Wordpress blog. So I thought to myself, “What’s an access point?” No sooner had I thought that than I looked up and there in a little help bubble was the explanation of exactly what an access point was and how to find it.

That’s just a small example, but little things like that, when taken over the life of the software, save you so much time, headache, and money because you canfocus on the important tasks instead of searching endlessly online to figure out what a Wordpress “access point” is. That’s also why I’m zealously against Microsoft products. Even though I use Windows and Excel extensively, I avoid the rest like the plague because they are so unintuitive andbuggy I end up spending just as much debuggin and troubleshooting as I do creating whatever it is I’m creating.

I’ll write more about Contribute later, but I’ve been using it for about 20 minutes now and I’m so impressed I can’t believe it took me this long to start using it.

Tags: software,blogging software,adobe,contribute

Bookmark It

Many small business website owners manage their websites themselves, and if you’ve spent any time on a web server, even with any of the easy-to-use administration utilities like cPanel, you’ll know that much of the functionality isn’t exactly self explanatory.

A client I’m working with currently asked what the difference was between the /www/ and the /public_html/ folders on her web server. The answer to that is nothing at all.

The /www/ folder was setup initially because people didn’t know what /public_html/ was and, when searching for a place to save website files, /www/ was more of an intuitive choice. In reality, the /www/ folder is nothing more than a shortcut to the /public_html/ folder. You can change, add, and remove files from the /www/ folder and everything will be reflected in the /public_html/ folder, and vice versa.

Bookmark It