IE CSS fix??

[jannmirch]

I'm trying to streamline the navigation for a client's website which was set up by a previous designer.

The test page is here. Organized For Life

The original designer set up a php include for the top navigation. Problem is, every page has it's own unique php include that needs to be updated when a new page is added or a page title changes. It seems like it was set up this way so each page would have a "down" tab set when selected.

I'm trying to set this up as a single include using CSS to set a different background image depending upon which page you're on.

As you've likely guessed, it works fine in Firefox and Opera but breaks in IE. I can't seem to get around it.

Here is my CSS:

#navTop p{
text-align: center;
margin: 0px;
padding: 0px;
letter-spacing: .2em;
}
#navTop span, .opacity a{
filter:alpha(opacity=0);
-moz-opacity:0.0;
-khtml-opacity: 0.0;
opacity: 0.0;
text-decoration: none;
}

.blank {
float: left;
}
.home {
background-image: url(../images/nav_home1.gif);
background-repeat: no-repeat;
width: 50px;
height: 25px;
float: left;
}
.home a:hover, #home .home{
background-image: url(../images/nav_home2.gif);
background-repeat: no-repeat;
text-decoration: none;
width: 50px;
height: 25px;
float: left;
}

Any help would be appreciated. Maybe it's my OCD, but I hate having oodles of files cluttering up my folders when one will do.

Thanks!

[epep]

When layout out menu options horizontally, I usually lean towards using a modified unordered list:

Listamatic: Simple horizontal list

As a sidenote, you may also want to look into putting some pre-load commands in your body tag to get those rollover images loaded before the user actually does a mouseover.

Hope this helps you get on the right track.

EP

[jannmirch]

Thanks for the suggestions. I have made some progress by using the coding hints here.

I am finishing up setting everything up and the next step is adding the preload stuff.

Thanks again.

[xtempore]

Hi Jan

I noticed that you mentioned the previous designer had a separate PHP include on every page, and thought it might be worth commenting on this as well.

I use PHP extensively, and employ a number of different mechanisms for getting a consistent look and feel across the website.

One of the most common needs, as is the case here, is to show some form of navigation that also indicates the current page. I find that this is best handled by having an array of all the pages and I use this to build the navigation and simply change the class if it is the current page.

A simple example might just be the page name and the title as shown in the menu...
$gMenu = array(
'index.php' => 'Home',
'sales.php' => 'Sales',
'about.php' => 'About Us'
);

I would then build my menu using a foreach loop.

I hope that might be of some help.

X.

[jannmirch]

Thanks for the comment on the PHP. I have almost no experience with PHP but achieve a similar result using CSS.

I'm finding that a combination of the two is working and am finally making some progress.

I definitely want to learn more PHP and appreciate your comments. I'll keep tinkering...

[yorkshirewoman]

Hi Jan

I do something similar these days. I use an include file for the navigation (usually as an unordered list), styled via css, and define a current page indicator via the css as well.

An example where a background image is used in the nav styling:
Highspeed Course Care
and one with no background image in the nav styling:
Friendly-Places

Here's how it's implemented:

e.g. in the nav include file:
<ul id="Nav">
<li id="home-nav"><a href="index.htm/">Home</a></li>
<li id="about-nav"><a href="about.html">About Us</a></li>
</ul>

In the CSS I style the different states for the links in the nav, including one which I use for the hover and to indicate current page:

#Nav a:hover,
body#Home li#Home-nav a,
body#About li#About-nav a {
border-bottom: 1pt #CBE597 solid;
border-top: 1pt solid #A3D147;
border-right: 1pt #CBE597 solid;
background-color: #B7DB6F;
color: #000080;
background-image:url(/images/bg2.gif);
background-repeat:no-repeat;
background-position: 3px 5px;
}

Then on each page, just edit the body element ID attribute to indicate which page you are on

I think this was the reference that helped me:
Persistent Page Indicator

Hope the above helps!