Pleasanton Web Design » css

CSS Problem – Background-Position in IE7

admin — Sat, 22 Aug 2009 04:58:06 +0000

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.

CSS Horizontal Navigation Menu

admin — Tue, 22 Apr 2008 03:58:00 +0000

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:

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.

CSS Navigation Menu – Cascading Stylesheets Tutorial

admin — Mon, 21 Apr 2008 20:22:00 +0000

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

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,

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

CSS Test

Now we will add our unordered list to column one, between the

tags:

Home

Nothing

Now to style our list into a standard navigation menu. First we’ll take the unslightly list attributes from the

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

tag and style the link 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.