When using IE 7, the alternate vote up widget does not work. I am using the following code in node-storylink.tpl.php:

<!-- start node -->
<div id="node-<?php print $node->nid; ?>" class="node storylink clear-block<?php print ($sticky) ? ' sticky' : ''; print (!$status) ? ' node-unpublished' : ''; ?>">
<?php print $picture ?>
<h2 class="title"><a href="<?php print $storylink_url ?>" target="_blank"><?php print ($seqid) ? $seqid .'. ' : '' ?><?php print $title ?></a></h2>
<img src="/themes/foliage/postimg.png">
<?php print $vote_storylink_via ?>
<?php print $vote_up_down_widget ?>
<div class="content"><?php print $content ?><a href="<?php print $storylink_url ?>">[View Original Story]</a></div>
<div class="submitted"><?php print $submitted ?>
<?php if ($terms): ?>
<span class="terms"> | <?php print t('Tags') ?>: <?php print $terms ?></span>
<?php endif; ?>
</div>
<?php if ($links): ?>
<div class="links">&raquo; <?php print $links ?></div>
<?php endif; ?>
<br class="clear" />
</div>

A screenshot is attached displaying the issue.

CommentFileSizeAuthor
no-vote.PNG8.66 KBron williams

Comments

mstef’s picture

mstef commented
Priority: Normal » Critical

I am having the same exact problem and desperately need a patch or solution. Thanks..

frjo’s picture

frjo commented

The problem is that IE 7, just like IE 6, doesn't understand the width: auto part in vote_up_down.css: 

.vote-up-down-widget-alt .vote-up-act,
.vote-up-down-widget-alt .vote-up-inact,
.vote-up-down-widget-alt .up-inact {
  display: block;
  width: auto;
  height: 22px;
}

For IE 6 I have used the star html hack to set a fixed width, the "* html" make other browsers ignore it. Look for this at the bottom of vote_up_down.css:

* html .vote-up-down-widget-alt .vote-up-act,
* html .vote-up-down-widget-alt .vote-up-inact,
* html .vote-up-down-widget-alt .up-inact {
  width: 55px;
}

Simply removing the three "*html" above will fix the problem for IE 7 but will also make the voting widget 55 pixel wide in all browsers. Making it look less nice in my opinion.

Any good suggestions?

ron williams’s picture

ron williams commented

This might not make sense, but maybe it would be possible to do a user agent string detection and use/display different code based on the useragent? This could work, though it may not be implementable in this setup.

frjo’s picture

frjo commented

The proper way of doing it is to use something Microsoft call "Conditional Comments". If you include a CSS file like this:

Only IE 7 will make use of it. Firefox, Safari, Opera etc. only sees a normal comment that they ignore. Read more on http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp .

The thing is that this is most easily (and best) done in the theme, not in a module. THe new Garland theme has a "fix-ie.css" file already. Paste e.g. in this at the bottom of that file and all is well :-).

.vote-up-down-widget-alt .vote-up-act,
.vote-up-down-widget-alt .vote-up-inact,
.vote-up-down-widget-alt .up-inact {
  width: 55px;
}

I would like a solution that does not force users to manually add code to there theme, it's not neet.

ron williams’s picture

ron williams commented

What file would I use for this then? I use the foliage theme.

frjo’s picture

frjo commented

Add a empty "fix-ie.css" in the same way as Garland does it and add the code above to that file.

xman’s picture

xman commented

And for IE7 place this in css:

*+html .vote-up-down-widget-alt .vote-up-act,
*+html .vote-up-down-widget-alt .vote-up-inact,
*+html .vote-up-down-widget-alt .up-inact {
  width: 55px;
}
*+html .content {
  height: 1%;
}

FF, Opera and IE6 ignore this.

alexandreracine’s picture

alexandreracine commented

Still valid?

lut4rp’s picture

lut4rp commented
Status: Active » Closed (fixed)