Slash works well in Firefox, but in IE6 the primary links tabs don't have any spaces between them.

CommentFileSizeAuthor
firefox v IE6.gif1.58 KBoffal
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frjo’s picture

Yes I have seen this also. If you find a nice and clean solution that does not break any other browser I will be happy to commit it.

From my brief testing with IE7 it looks like the problem remains in that version also :-(.

jsartori’s picture

I got the gaps in, but I was unable to code it to keep the hover effect in.

First, take a look at the site--the site itself is just in it's early stages--so far I only have the layout ready, but you can see what I did to the primary links menu so that it looks better cross-platform.

http://shsband.hctc.com/

I edited page.tpl.php--this replaced what was previously here:

<div id="top-nav">
<br/>

<?php if (count($primary_links)) : ?>
<CENTER><TABLE ID="PRIMARY"><TR>
<?php foreach ($primary_links as $link): ?>
<TD class="left">&nbsp;&nbsp;<?php print $link?></TD><td class="center">&nbsp;</td><td class="right"></td>
<?php endforeach; ?>
</TR></TABLE></CENTER>
<?php endif; ?>

</div>

<?php if (count($secondary_links)) : ?>
<div id="secondary-nav">
<center>
<ul id="secondary">
<?php foreach ($secondary_links as $link): ?>
<li><?php print $link?></li>
<?php endforeach; ?>
</ul>
</center>
</div>
<?php endif; ?>

Note, I moved the secondary links to a more practical place. For the primary links, I used a table instead of an inline, unordered list.

Heres what I did to style.css:

/* Navigation */

#top-nav {
  background: #fff;  
/*  background: #660000 url(header_bg.png) repeat 0% 0%; */
  margin-top: -1px;
  margin-bottom: 1em;
  border: 1px solid #660000;
}
#secondary-nav {
  background: #fff;
  margin-top: -17px;
  margin-bottom: 1em;
  border: 1px solid #660000;
}
#top-nav TABLE {
  background: #fff url(header_bg.png) repeat 0% 0%;
  margin: 0;
  padding: 0;
}
#secondary-nav UL {
  background: #fff url(header_bg.png) repeat 0% 0%;
  margin: 0;
  padding: 0;
}
td#primary {
  text-align: center;
  font-size: 1em;
  margin-top: 0.5em;
  font-color: #fff;
  color: #fff;
}
td.left {
  /* display: inline; */
  background: #660000 url(cl.png) no-repeat top left;
  font-weight: bold;
  padding: 0 6px 0 6px;
  text-decoration: none;
  list-style-type: none;
}
td.center {
  background: #660000 url(cr.png) no-repeat top;
}
td.right {
  background: #fff;
}
#secondary LI{
  display: inline;
  background: #660000;
  list-style-type: none;
  padding: 3;
}
LI#secondary {
  text-align: right;
  font-size: 0.84em;
}
#secondary LI:hover {
  background: #900000;
}
td.left a:link,
td.left a:visited,
td.left a:active {
  color: #fff;
  font-weight: bold;
  padding: 0 6px 0 6px;
  text-decoration: none;
}
td.left a:hover {
  color: #ccc;
  font-weight: bold;
  padding: 0 6px 0 6px;
  text-decoration: none;
}
#secondary a:link, 
#secondary a:visited,
#secondary a:active {
  color: #fff;
  font-weight: bold;
  padding: 1px 4px 1px 4px;
  text-decoration: none;
}
#secondary a:hover {
  color: #ccc;
  font-weight: bold;
  padding: 1px 4px 1px 4px;
  text-decoration: none;
}

I know my changes made this sloppy, but I threw it together quickly.

IMPORTANT: If you are planning on trying to get the background color to change when hovering over the link, don't use this--it will not work.

I tested this on IE, Netscape and Firefox, and it looks fine on each. Unless someone is able to find another way to get the highlight to work (since IE doesn't recognize li:hover, and many other elements), I can live with this.

Hope this helps,
Joe

frjo’s picture

The cvs version of the Slash theme is updated. One of the changes is fixes for display bugs in Internet Explorer 6. Please try it out and report back the resolut here.

http://ftp.osuosl.org/pub/drupal/files/projects/slash-cvs.tar.gz

frjo’s picture

Status: Active » Fixed
Anonymous’s picture

Status: Fixed » Closed (fixed)