[Tip/Trick] Center Nav Menu Bar (1.x and 2.x)

[Arantor]

No, the instructions for 2.0 are still showing a " in the middle where there shouldn't be one.

[Antechinus]

Yigal, this:

For 2.x
---------------------------------------------------------------------

Index.template.php:

Find:

Code Select Expand

// Show the menu here, according to the menu sub template.
   echo '<div style="width="50%;margin:auto;';


Replace With:

Code Select Expand

// Show the menu here, according to the menu sub template.
   echo '<div style="width:50%;margin:auto;">';


needs to be changed to this:

For 2.x
---------------------------------------------------------------------

Index.template.php:

Find:

Code Select Expand

// Show the menu here, according to the menu sub template.
template_menu();


Replace With:

Code Select Expand

// Show the menu here, according to the menu sub template.
echo '
<div style="width:50%; margin:0 auto;">',template_menu(),'</div>';


You can't just drop the opening tag for the div in front of the template_menu() without also closing the div after the template. You will get errors if you do that. It is also best to set the margin as 0 auto rather than just auto.

[Yigal]

Calm down guys -_-' ... I'm getting to it.  Oh and thanks

[Antechinus]

Ok, here is the best way of doing it for the 2.0 Core theme.

If you use this method the menu will stay perfectly centered regardless of how many tabs you have displayed or how wide your screen is.

Note that this method will also work with list-based menus in other themes, but it will not work if you are also using css-based drop menus.

This is only for single level menus without drop menus. Because of this it will not work with Curve when Curve becomes the default theme in RC2.

Anyway for the RC1 Core theme:

Index.template.php:

Find:

Code Select Expand

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="clearfix">';

Replace with:

Code Select Expand

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="clearfix">
    <li class="main_menu_first">&nbsp;</li>';


Css/index.css:

Find:

Code Select Expand

#main_menu
{
padding-left: 1em;
}
#main_menu ul
{
list-style: none;
padding: 0;
margin: 0;
background: url(../images/maintab_first.gif) no-repeat bottom left;
padding-left: 10px;
}
#main_menu li
{
margin: 0;
padding: 0;
display: inline;
}
#main_menu li a
{
float: left;
display: block;
color: white;
font-size: 0.8em;
font-family: tahoma, sans-serif;
text-transform: uppercase;
}
#main_menu li a:hover
{
color: #e0e0ff;
text-decoration: none;
}
#main_menu li a span
{
background: url(../images/maintab_back.gif) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
#main_menu li.last a span
{
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
#main_menu li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
background: url(../images/maintab_active_back.gif) repeat-x bottom right;
}
#main_menu li.active a span
{
background: url(../images/maintab_active_first.gif) no-repeat bottom left;
padding: 0 0 0 8px;
}
#main_menu li.last.active
{
float: left;
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0 8px 0 0;
}
#main_menu li.active a
{
background: url(../images/maintab_active_last.gif) no-repeat bottom right;
padding-right: 8px;
}

Replace with:

Code Select Expand

#main_menu {
   float:left;
   width:100%;
   background: none;
   overflow:hidden;
   position:relative;
}
#main_menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
li.main_menu_first {
   width: 8px;
   height: 20px;
   background: url(../images/maintab_first.gif) no-repeat bottom left;
}
#main_menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#main_menu ul li a {
   display:block;
   color: white;
   font-size: 0.8em;
   font-family: tahoma, sans-serif;
   text-transform: uppercase;
}
#main_menu li a span
{
background: url(../images/maintab_back.gif) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
#main_menu li.last a span
{
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
#main_menu li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
background: url(../images/maintab_active_back.gif) repeat-x bottom right;
}
#main_menu li.active a span
{
background: url(../images/maintab_active_first.gif) no-repeat bottom left;
padding: 0 0 0 8px;
}
#main_menu li.last.active
{
float: left;
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0 8px 0 0;
}
#main_menu li.active a
{
background: url(../images/maintab_active_last.gif) no-repeat bottom right;
padding-right: 8px;
}

This method originally comes from this web page: matthewjamestaylor.com/blog Screenshots of the result are attached. 

[Yigal]

Thanks    I will add this to the top of the posts

[Mark S]

Ok... here's the code you referred to for always beautifully centered nav bars compatible with all browsers and requires no css hacking.... (breathe)...

Code Select Expand

<div id="centeredmenu">
   <ul>
      <li><a href="#">Tab one</a></li>
      <li><a href="#" class="active">Tab two</a></li>
      <li><a href="#">Tab three</a></li>
      <li><a href="#">Tab four</a></li>
   </ul>
</div>

I put that in place of :

<div style="width:80%; margin:0 auto;">',template_menu(),'</div>'

and... of course it didn't work.  So, what is the correct insertion for this?

Thanks!

[Yigal]

Have you tried these following codes?
http://www.simplemachines.org/community/index.php?topic=328766.msg2193162#msg2193162

[Antechinus]

Ok... here's the code you referred to for always beautifully centered nav bars compatible with all browsers and requires no css hacking.... (breathe)...

Code Select Expand

<div id="centeredmenu">
   <ul>
      <li><a href="#">Tab one</a></li>
      <li><a href="#" class="active">Tab two</a></li>
      <li><a href="#">Tab three</a></li>
      <li><a href="#">Tab four</a></li>
   </ul>
</div>

I put that in place of :

<div style="width:80%; margin:0 auto;">',template_menu(),'</div>'

and... of course it didn't work.  So, what is the correct insertion for this?

Thanks!

That is just a basic html example from that page. It wont work without the required css. Complete instructions specifically for the SMF default theme are available at the end of the OP. I suggest reading them.

[aw06]

Need to center my menu  See my index.template below and advise

Code Select Expand

<?php
// Version: 2.0 RC3; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0 RC3';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as opposed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;

/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;

/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = false;
}

// The main sub template above the content.
function template_html_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
<title>', $context['page_title_html_safe'], '</title>';

// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />';

// Present a canonical url for search engines to prevent duplicate content in their indices.
if (!empty($context['canonical_url']))
echo '
<link rel="canonical" href="', $context['canonical_url'], '" />';

// The ?rc3 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?rc3" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/print.css?rc3" media="print" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" />
<link rel="search" href="', $scripturl, '?action=search" />
<link rel="contents" href="', $scripturl, '" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
echo '
<link rel="alternate" type="application/rss+xml" title="', $context['forum_name_html_safe'], ' - ', $txt['rss'], '" href="', $scripturl, '?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="', $scripturl, '?board=', $context['current_board'], '.0" />';

// Some browsers need an extra stylesheet due to bugs/compatibility issues.
foreach (array('ie7', 'ie6', 'webkit') as $cssfix)
if ($context['browser']['is_' . $cssfix])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />';

// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?rc3"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?rc3"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_default_theme_url = "', $settings['default_theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
var smf_scripturl = "', $scripturl, '";
var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
var smf_charset = "', $context['character_set'], '";', $context['show_pm_popup'] ? '
var fPmPopup = function ()
{
if (confirm("' . $txt['from'] . ' ' . $context['pm_informer']['sender'] . '\\n' . $txt['subject'] . ' ' . $context['pm_informer']['subject'] . '\\n' . $txt['show_personal_messages'] . '"))
window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
}
addLoadEvent(fPmPopup);' : '', '
var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
</head>
<body>';
}

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<div id="bodybg">
<div id="wrapper">
<div id="shad-l">
<div id="shad-r">
<div id="header">
<div id="head-l">
<div id="head-r">
<div id="userarea" class="smalltext">';
if ($context['user']['is_logged'])
{
echo '
<b>', $txt['hello_member_ndt'], ' ', $context['user']['name'], '</b><br />';

// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo $txt['msg_alert_you_have'], ' <a href="', $scripturl, '?action=pm">', $context['user']['messages'], ' ', $context['user']['messages'] != 1 ? $txt['msg_alert_messages'] : $txt['message_lowercase'], '</a>', $txt['newmessages4'], ' ', $context['user']['unread_messages'], ' ', $context['user']['unread_messages'] == 1 ? $txt['newmessages0'] : $txt['newmessages1'] , '.<br />';

echo '
<a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a><br />
<a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a><br />';

}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo sprintf($txt['welcome_guest'], $txt['guest_title']);

echo '
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" style="margin: 4px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<input type="text" name="user"  size="10" />
<input type="password" name="passwrd"  size="10" />
<input type="submit" value="', $txt['login'], '" />
<input type="hidden" name="hash_passwrd" value="" />
</form>', $context['current_time'],'<br />';
}

echo '
</div>
<div id="searcharea">
<form action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="', $txt['search'], '..." onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['search'], '...\';" /> ';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>
</div>
<a href="'.$scripturl.'" title=""><span id="logo">&nbsp;</span></a>';
echo '
</div>
</div>
</div>
<div id="toolbar">
',template_menu(),'
</div>
<div id="bodyarea">';

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//echo 
echo '<BR>';
include 'adverts1.php';
////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Show the navigation tree.
theme_linktree();
}

function template_body_below()
{

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//echo 
include 'adverts2.php';
echo '<BR>';
////////////////////////////////////////////////////////////////////////////////////////////////////////////////

global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</div>';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer">
<div id="foot-l">
<div id="foot-r">
<div id="footerarea">
<span class="smalltext">', theme_copyright(), '
<br /><a href="http://www.photojamaica.net"><b>PhotoJamaica.net &copy; 2010</b></a> | Theme by <a href="http://www.dzinerstudio.com" target="_blank"><b>DzinerStudio</b></a> | ', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a>' : '', ' | <a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></span>';

// Show the load time?
if ($context['show_load_time'])
echo '<br /><span class="smalltext">'. $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</span>';

echo '
</div>
</div>
</div>
</div>
</div>
</div>
</div>';
}

function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
try {
_uacct = "UA-15421433-1";
urchinTracker();
} catch(err) {}</script>
</body></html>';
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' &#38;#187;';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="topmenu">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
echo '<li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '"><span>', $button['title'], '</span></a></li>';

echo '
</ul>
</div>';

}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;

if (!is_array($strip_options))
$strip_options = array();

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '
<li><a' . (isset($value['id']) ? ' id="button_strip_' . $value['id'] . '"' : '') . ' class="button_strip_' . $key . '' . (isset($value['active']) ? ' active' : '') . '" href="' . $value['url'] . '"' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '><span>' . $txt[$value['text']] . '</span></a></li>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '
<div class="buttonlist', !empty($direction) ? ' align_' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '
</ul>
</div>';
}

?>

[Tiribulus]

For the index.css in RC3 I don't find anything even close to this anymore. Has anybody figured this out for RC3?
Thanks

[exnecko]

Is there this for download !  ??

[Arantor]

Tiribulus: No, I don't think anyone has. The menu is constructed differently in Curve.

exnecko: No, this is a tip you have to apply yourself rather than as a mod because on 1.1.x you can't use it anyway on custom themes and on 2.0 it's incomplete.

[Antechinus]

For the index.css in RC3 I don't find anything even close to this anymore. Has anybody figured this out for RC3?
Thanks

Yes, I have. Sorted it the other day. I'm going to package it up as a mod.

[coldy316]

Okay i'm running SMF 2.0 RC2 and just tried this and it didnt work at all. at the present moment i now
have no top menu showing. how do I solve that problem.

Its the default core one

[bullbreedluverz]

Okay i'm running SMF 2.0 RC2 and just tried this and it didnt work at all. at the present moment i now
have no top menu showing. how do I solve that problem.

Its the default core one

if this is your site http://www.coldyshangout.com/index.php then you are usin curve theme not core

Ok, here is the best way of doing it for the 2.0 Core theme.

If you use this method the menu will stay perfectly centered regardless of how many tabs you have displayed or how wide your screen is.

Note that this method will also work with list-based menus in other themes, but it will not work if you are also using css-based drop menus.

This is only for single level menus without drop menus. Because of this it will not work with Curve when Curve becomes the default theme in RC2.

this tip isnt for curve theme - you will need to undo the edits you made - if you kept a back up of your files before you edited them reupload the back up files otherwise you will need to undo the edits you made removing the changes you made

[coldy316]

Okay i'm running SMF 2.0 RC2 and just tried this and it didnt work at all. at the present moment i now
have no top menu showing. how do I solve that problem.

Its the default core one

if this is your site http://www.coldyshangout.com/index.php then you are usin curve theme not core

Ok, here is the best way of doing it for the 2.0 Core theme.

If you use this method the menu will stay perfectly centered regardless of how many tabs you have displayed or how wide your screen is.

Note that this method will also work with list-based menus in other themes, but it will not work if you are also using css-based drop menus.

This is only for single level menus without drop menus. Because of this it will not work with Curve when Curve becomes the default theme in RC2.

this tip isnt for curve theme - you will need to undo the edits you made - if you kept a back up of your files before you edited them reupload the back up files otherwise you will need to undo the edits you made removing the changes you made

okay let me get this right

1. undo the edits  (which I did already)
2. re-upload the backup file  (never did a backup)

what is the standard code and can i add the standard code back.

[Antechinus]

If you have undone the edits you don't need to worry about other files. If you need to find the standard code you can extract the css from an installation or upgrade pack.

[coldy316]

yeah i manage to extract the css and re-up it

[Antechinus]

I've uploaded a mod that'll centre the menu for the 2.0 RC3 default theme. Haven't tested it in RTL yet but it works in LTR languages. Only browser it screws up in is Firefox 2, but nobody in their right mind uses that any more anyway. Fine in all versions of IE and in all other browsers.

Note that it isn't approved on the mod site yet, but I've tested it pretty thoroughly and it's only css edits anyway so it can't crash your site.

[Antechinus]

Mod is approved now. Link is in my sig. FF2 bug is fixed so it's fine in all browsers (including the dreaded IE6). The mod only supports LTR languages at this stage. I'll sort RTL support when I can (IE 6 and 7 being the problem there, of course).