Archive for category web development

CSS Problem - Background-Position in IE7

Posted by admin in css, internet explorer, web design, web development on August 21st, 2009

I ran aross this problem with the way Internet Explore 7 (IE7) handles the background-position css property, and thought I’d post it just in case I could save someone some time. I was working on a layout, and it looked great in IE8, Firefox 2, Firefox 3 & Google Chrome 2. When viewed in IE7, however, the background-position of one of the elements was off.

After a bit of experimentation, as is a normal part of cross-browser testing with Microsoft Internet Exploder, I narrowed down the problem to the fact that I had overflow hidden for this particular element. All other browsers used the declared dimensions of the element to position the background. The problem is that there was some overflow, and all browsers but IE7 properly ignored it. IE7 used the dimensions including the overflow to determine the background-position.

In this situation I was able to size the element in such a way to eliminate the possibility of overflow, and then was able to remove the overflow:hidden declaration.

No Comments

10 Common Misconceptions About Search Engine Results

Posted by admin in search engine optimization, web design, web design process, web development, web promotion on June 28th, 2009

  1. If I simply build a website, it will show up on page one of the search engine results.
    Many people have no idea how search engines work, and consequently don’t understand how websites get listed,  or consider that it may be difficult to get seen. Search engines are “free” advertising, and there is a lot of competition. If the terms you want to rank for are very unique, then chances are there is little traffic for them. If the terms are not unique, then you have a lot of work ahead of you to beat the competition.
  2. Just put the right words in the magical meta tags, and my web site  will show up on top
    Meta tags had a lot more weight when the Internet was young. Then webmasters figured out how to game the search engines, and all that stopped. You still need to know how to use meta tags properly on your web pages, but working on meta tags alone will get you nowhere.
  3. It’s relatively easy to get on top of the search engine results if you know a few tricks.
    A lot of SEO companies make promises like “guarantee top ranking in 1 week or your money back.” The catch is that you can’t have top ranking for any term you want. Getting on page one of Google for “Used car with red paint in Hayward California” is easy. Getting on page one for the term “Car” is just not going to happen for a small or even medium size business. If a company makes it sound easy, they either don’t know what they are doing, or they are trying to scam you!
  4. If I’m on top of the search results for the terms I have chosen, I’ll be getting traffic and making money.  
    Being on top of the search engine results doesn’t make you money in itself. You need targeted traffic, and to convert that traffic in to sales, or whatever your objective for the web site is. If you rank highly for keywords that aren’t searched for, you won’t get traffic. It may sound obvious, but targeting the right keywords is a step that is often overlooked.

  5. Once my website is published to the internet, it should show up in the rankings right away.
    It can take from 2 to 4 weeks for your site to show up in the search engine index, and another 4 to 8 weeks for it to be completely crawled and included in a way that you will achieve optimum results. Also, most major search engines factor in such variables as domain name age, so it may take a matter of years before you can break on to page one for competetive keywords, especially if your competition has been around for a while.
  6. Submitting a site to many search engines will result in traffic to my website .
    SEO companies that say they will submit your site to 300 search engines are trying to scam you. There are at most 10 major search engines that will bring all of your traffic.You certainly want to submit your website to them, but if you take other necessary steps, such as obtaining incoming links to your
    site, search engine spiders will find your web site even if you don’t submit. And just because the search engine knows about your site, doesn’t mean that it considers it important enough to rank highly in search results.
  7. Pay per click (PPC) is an easy and inexpensive way to get search engine traffic quickly.
    When Google Adwords and it’s copiers came out years ago, it was pretty easy and relatively inexpensive to get good traffic. This is no longer true. It is very easy to waste a lot of money trying to learn how to run a pay per click campaign. It may not even be cost effective to run a PPC in certain niches, and it can be very costly to find that out the hard way.
  8. The web designer is the expert, and I don’t need to get involved in the web site design process to obtain great search engine performance.
    Web designers are experts in making your Internet business plan a reality. To do that, we need to know as much as possible about your business, products, and customers. It is not uncommon for different departments in one company to use different terms to refer to the same thing. It is also not uncommon for people inside a company to use different terms than do customers when referring to the same thing. Maybe you offer a service, but it isn’t that profitable and would rather not push it. Not communicating this kind of information to your web designer can result in a website that is less effective than it could be.
  9. Search engine optimization is something that can be tacked on after a website is built.
    Web design is more than graphic design for web pages. Even more important than making a website look pretty, is creating an information design that will make the website user friendly. Since search engines should always be considered as a user in the design process, that means making the website search engine friendly. And since the information design is the foundation on which the graphic design is built, it necessarily comes before the graphic design.

  10. The website alone determines ranking in the search engines.
    External factors are what makes the difference between page 1 and page 100 of the search results, especially for competetive search terms. Search engines want to serve up the most authoritative and important results to their users. They determine the authority of a website based on the number and quality of relevant links pointing to that site. A related misconception people often make is thinking that linking out to many sites will improve your authority. In reality, linking too much to other sites can bleed the authority from your site and hurt your efforts.

More SEO Articles

SEO Services

No Comments

Paypal Sandbox - So Slow it’s Unusable

Posted by admin in paypal, web development, web programming, website design on August 6th, 2008

Paypal offers developers an environment called the “sandbox” to test out their applications. “Sandbox”is a generic term for “test environment.” I last used Paypal Sandbox a year or more ago in testing a Paypal integration with Oscommerce, and didn’t notice anything unusual.

Today, however, just now, when throwing a quick test together to detail out a quote, I was unable to use the environment. Page loading is over 10 minutes and counting. To check whether or not it was just me, or just a momentary problem, I did a search and found quite a lot of angry complaints. The complaints spanned a year’s time and seemed mixed at first. The last complaint, just a couple of weeks ago was just resigned. He would not be using paypal in his applications again.

A major theme of the complaints was that Paypal wasn’t interested in improving the situation. They didn’t really care. That was something I had heard before, not from the developer community, but from eBay sellers. They complained of problems, which Paypal customer service was very uninterested in resolving.

If Paypal were just another online store it would be one thing. The problem is that Paypal is basically a bank that has a LOT of peoples financial information online. Are they competent? Do they just not care about the little guy? It seems to me that Paypal should be all about the little guy, because I don’t see many Paypal buttons on Fortune 500 websites.

The bottom line is, if a developer can’t use Paypal’s Sandbox, why not try Google Checkout?

2 Comments

CSS Horizontal Navigation Menu

Posted by admin in css, navigation, web design, web development on April 21st, 2008

I’ve had a request to expand my css navigation tutorial to include a horizontal navigation. This is an extention of my previous css navigation menu tutorial.

To create a horizontal navigation menu in the header, you’ll need to create two horizontally stacked divs within the header. The way I normally code it is to create a div in the header named header top, and under that I’ll put the nav div. Make sure to size them both to the header width so they can’t appear side by side. You’ll also need to add a clearing div after the header so that following divs will begin in the correct place:

<div id=”header”>
 <div id=”header-top”></div>
 <div id=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Nothing</a></li>
</ul>
 </div>
</div>
<div id="clr"></div>

As a convention I started the naming of the navigation styles starting with the nav div. This change will need to “cascade” to all of the other styles within the unordered list. As you can see below, the key to making the nav list horizontal is adding float:left to the li tag. The header-top now displays the header image as a background, and the header div is now just a container to hold the header-top and nav divs. I added a background color to it for aesthetics.

#header{
width: 780px;
height: 84px;
background: #333333;
}

#header-top{
width: 780px;
background-image: url(’images/header.jpg’);
background-repeat: no-repeat;
height: 50px;
}

#nav{
width:780px;
height: 32px;
}

div#clr{
clear: both;
}

div#nav ul li{
float:left;
}

div#nav ul{
list-style: none;
padding: 0px;
margin: 0px;
}

div#nav ul li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

div#nav ul li a:hover{
background: #666666;
}

Here is how it looks.

2 Comments

CSS Navigation Menu - Cascading Stylesheets Tutorial

Posted by admin in css, navigation, web design, web development on April 21st, 2008

In the first tutorial of the series, CSS Positioning, we build a basic, table-less structure for a two-column webpage. In this post, we’ll add what every webpage needs: navigation.

Some designers prefer to add an additional <div> and identify it as “nav” or “navigation” using a class or id. Since almost all navigation bars I’ve seen styled with CSS use an unordered list, <ul>, I like to style that directly, rather than adding the additional <div>.

From the first tutorial, we have the following page structure:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 strict//EN”>
<html>
<head>
<title>CSS Test</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”test.css” rel=”stylesheet” type=”text/css”>
</head>
<body>

<div id=”wrapper”>

<div id=”header”></div>

<div id=”column1″>
</div>

<div id=”column2″>
</div>

<div id=”footer”></div>

</div>

</body>
</html>

Now we will add our unordered list to column one, between the <div></div>
tags:

<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Nothing</a></li>
</ul>

Now to style our list into a standard navigation menu. First we’ll take the unslightly list attributes from the <ul> tag itself:

ul#nav{
list-style: none;
padding: 0px;
margin: 0px;
}

Setting the list-style to none removes the bullet, and setting padding and margins to 0px removes the indent.

I’m going to ignore the <li> tag and style the link <a> tag directly. I do this to take advantage of a:hover to change the links background on rollover:

ul#nav li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

First we style the link as a block, so the browser will treat the element like we want it to, as a rectangular button. We style the appearance of the element as we would any box. Finally we remove the link’s underline by setting text-decoration:none.

All that’s left is to set the rollover using a:hover. The only thing we want to change is the background color, so all we have to do is this:

ul#nav li a:hover{
background: #666666;
}

Now fill your content column with text, and you have a table-less, two column webpage, displayed using css.

Here is the design in action.

2 Comments

CSS Positioning: Cascading Style Sheets Tutorial

Posted by admin in navigation, web design, web development on April 17th, 2008

I was asked by an aspiring web designer to tutor him in basic Web design techniques. He is working on a Webpage in tables, but is aware that he should probably start working with CSS instead. He had tried Dreamweaver’s “layers,” but was having a hard time.

In preparation for the 1 hour session I put together a page with a really basic two column layout using CSS positioning. Since I went to all this trouble, I thought I would go ahead and share it with the World Wide Web as well.

Doctype

The first code on the page, and the first thing to be aware of is the Doctype declaration. I use this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 strict//EN”>

Using the “transitional” declarations, rather than “strict” puts the page into “Quirks Mode.” This was necessary to get older browsers to display CSS correctly back in the day, but using today will cause you headaches from all the quirks that will be coming your way.

Basic Structure

The code for implementing a CSS page layout should be divided into two parts: HTML for structure, and CSS for formatting. I break the CSS out into a seperate page and link it to my HTML page thusly:

<link href=”test.css” rel=”stylesheet” type=”text/css”>

This goes somewhere between the <head></head> tags.

In the body of the HTML document, you can declare the structure very simply using nested <div></div> tags. I use the “ID” attribute to identify them, but “Class” works too. Here’s the code for my basic two-column page:

<div id=”wrapper”>

<div id=”header”></div>

<div id=”column1″></div>

<div id=”column2″></div>

<div id=”footer”></div>

</div>

That’s it! That’s the basic HTML structure of the page; a wrapper enclosing the other page elements. The size, color, borders, and structural images are all declared in the CSS. The page content, such as navigation and text, will go inside the appropriate <div> tags.

CSS

Next, we’re going to format each <div> on our page. I also like to remove the margins from the body like so:

body{
margin:0px;
padding: 0px;
}

Next we’ll set the width, postion and background of the “wrapper.” This will set the basic page size and color, as well as center the page in the browser. Centering is achieved by setting the left and right margins to “auto.”

#wrapper{
width: 780px;
margin-right: auto;
margin-left: auto;
background: #cccccc;
}

The header is nested inside the wrapper div. The header image is set as the background.

#header{
width: 780px;
height: 50px;
background-image: url(’images/header.jpg’) ;
background-repeat: no-repeat;
}

The left column is going to contain the navigation, which I’ll add in the next CSS tutorial. Notice that I have set the background color to the same color as that of the wrapper div. This is because we want this column to appear to extend to the bottom of the page. In reality, it will shrink to contain the content. Floating the div left will allow the column to sit side by side the column 2, which will float right.

#column1{
width: 130px;
padding: 10px;
background: #ccc;
float: left;
}

#column2{
width: 610px;
padding: 10px;
float: right;
background: white;
}

Lastly, I position the footer. Note the “clear” declaration, which tells the browser not to position the previous divs beside this one. Also note that the left and right padding are added to the overall width of the div, so you need to subtract those amounts from the total width to match the width of the wrapper and header, which have no padding.

#footer{
width: 770px;
background: #333333;
color: white;
clear:both;
padding: 5px;
}

Next time, we’ll fill our page with some navigation and content.

3 Comments