It’s common these days to take advantage of CSS Style Sheets to replace your headers like <H1> and <H2> with images. While this makes sites more attractive it also hurts some of your search engine value by losing the keywords that could be used in those important headers.

Well here is how to use images and still get your keywords picked up by the search engines.

<style type=”text/css”>
h1 {
padding-top: 35px; /* height of the replacement image */
height: 0px;
overflow: hidden;
background-image:url(“image.gif”);
background-repeat: no-repeat;
}
</style>

<h1>Keywords here</h1>

In this example your pretty image will be used but your keywords will still get picked up by the search engines. The nice thing about this approach is that you can actually get some keywords in there that you might not been able if you weren’t using images.

In an earlier post I described how to use conditional comment codes to call a different stylesheet for each browser like so:

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![if !IE]>
<link href=”not-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>

At the end of the post I mentioned that you can use these comments to hide other content from each browser. I received some questions on this so I thought I better explain further.

To hide content from IE or a certain version of Internet Explorer is simple just use the appropriate comment codes anywhere on the page with the content between them like so:

The above examples will hide the content from IE or the IE version you specified in teh codes – HOWEVER it will only work that way in IE, because conditional comment codes are not read by Firefox.

So to hide content from Firefox you need to use your Firefox only stylesheet you declared in the header of your file. Whatever it is you want to hide in Firefox just wrap in a <div> with a class or id that in your Firefox stylesheet you add the css property of display: none.

So here is an example:

<div id=”hidemefromfirefox”>
CONTENT TO HIDE FROM FIREFOX
</div>

Then in your Firefox only stylesheet you declare:

#hidemefromfirefox {
display:none;
}

I have always preferred including a menu file on my sites rather than repeating them on all the pages for the obvious reason that menu items sometimes change and it easier to change one file than change the links on all the pages that show that menu.

So anyway, recently I have also wanted to use CSS to highlight the active or current page the user is on using CSS, this is easy to do when the menu is on each page, but requires a little PHP when using a single menu included across your site.

So anyway here is my solution:

Here is the code for the navigation menu – I save this as a file called menu.php

<?php
$active[$current] = “class=active”;
?>

<ul>
<li <?php echo $active[1] ?>><a href=”index.php”>Home</a></li>
<li <?php echo $active[2] ?>><a href=”services.php”>services</a></li>
<li <?php echo $active[3] ?>><a href=”print.php”>print</a></li>
<li <?php echo $active[4] ?>><a href=”web.php”>web</a></li>
<li <?php echo $active[5] ?>><a href=”marketing.php”>marketing</a></li>
<li <?php echo $active[6] ?>><a href=”portfolio.php”>Portfolio</a></li>
<li <?php echo $active[7] ?>><a href=”contact.php”>Contact</a></li>
</ul>

Then, just include the menu on your pages and indicate which of the menu links you want to give the CSS style “active”:

<?php $current = 3; include(“menu.php”); ?>

Lastly, don’t forget to declare a visual style for the css class “active” to make the current page link stand out from the others.

VARIATION – You can also change the menu code slightly to make the active page not linkable at all – this will further make the current page stand out from the other menu options. Here is an example of the code you would use for the links:

<li <?php echo $active[1] ?>><?php if ($current != 1) { echo “<a href=\”index.php\”>home</a>”; } else { echo “home”; } ?></li>
<li <?php echo $active[2] ?>><?php if ($current != 2) { echo “<a href=\”web.php\”>web</a>”; } else { echo “web”; } ?></li>

A handy trick I have been using since IE 7 came out and all of sudden my css was being read a tad differently across each of these browsers: IE6, IE7 and Firefox.

Typically I first design a stylesheet for Internet Explorer, then use a conditional statement to add a second stylesheet where I only include those css items that need to be modified for non-IE browsers – namely Firefox, then I place the two stylesheet calls in the <head> like this:

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![if !IE]>
<link href=”not-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>

I list them in that order because only IE reads these codes so in IE it only reads the “style.css”, but in Firefox it reads the “style.css” first then writes over what ever styles are renamed in “non-ie.css”

Here are other conditional comments you can use and what they stand for if you need to get more exact on which browser you are targeting:

<!–[if IE]>
If browser is Internet Explorer<br />
<![endif]–>
<!–[if IE 5]>
If browser is Internet Explorer 5<br />
<![endif]–>
<!–[if IE 5.0]>
If browser is Internet Explorer 5.0<br />
<![endif]–>
<!–[if IE 5.5]>
If browser is Internet Explorer 5.5<br />
<![endif]–>
<!–[if IE 6]>
If browser is Internet Explorer 6<br />
<![endif]–>
<!–[if IE 7]>
If browser is Internet Explorer 7<br />
<![endif]–>
<!–[if gte IE 5]>
If browser is Internet Explorer 5 and up<br />
<![endif]–>
<!–[if lt IE 6]>
If browser is Internet Explorer lower than 6<br />
<![endif]–>
<!–[if lte IE 5.5]>
If browser is Internet Explorer lower or equal to 5.5<br />
<![endif]–>
<!–[if gt IE 6]>
If browser is Internet Explorer greater than 6<br />
<![endif]–>
<![if (IE 6)|(IE 7)]>
If browser is Internet Explorer 6 OR 7 ( | is the OR operator )
<![endif]–>
<![if (gt IE 5)&(lt IE 7)]>
If browser is Internet Explorer 5, 5.5 OR 7 ( & is an AND operator but with the gte and lt it is used as a BETWEEN method )
<![endif]–>

Conditional comments are preferable to weightier browser detection scripts and are cross-browser friendly, so don’t forget that you can use these conditional comments to also include or exclude whatever code you want – not just stylesheets.