Hi,
I modified my postbit_legacy template in vbulletin for my forums, www.talkjesus.com
The problem is the css tooltip hover is messed up in IE7, but works fine in Firefox 3.
In IE, it shows a blank wide space after the icon hovered on, as if its showing a blank alt attribute. How do I go about correcting this?
Example:
http://www.talkjesus.com/blog/22376-major-updates.html
There is a white mini box with 5 16px icons.
This is the template portion
<div align="center" class="postbit-mini-box">
<a href="member.php?$session[sessionurl]u=$post[userid]" class="tooltip">
<img src="images/buttons/folder_user.png" alt="View $post[username]'s Profile" style="border:0" />
<span>View $post[username]'s Profile</span></a>
<a href="album.php?u=$post[userid]" title="View $post[username]'s Album" rel="nofollow" class="tooltip">
<img src="images/buttons/add_album.png" alt="View $post[username]'s Photo Album" style="border:0" />
<span>View $post[username]'s Photo Album</span></a>
<a href="journal.php?$session[sessionurl]do=showjournal&j=$post[journal_id]" title="$post[journaldesc]" class="tooltip">
<img src="images/buttons/book_open.png" alt="View $post[username]'s Journal" style="border:0" />
<span>View $post[username]'s Journal</span></a>
<a href="profile.php?$session[sessionurl]do=addlist&userlist=buddy&u=$post[userid]" title="Add $post[username]'s to Your Contacts" rel="nofollow" class="tooltip">
<img src="images/buttons/heart_add.png" alt="Add $post[username]'s to Your Contacts" style="border:0" />
<span>Add $post[username]'s to Your Contacts</span></a>
<a href="http://www.talkjesus.com/groups/" title="Social Groups" class="tooltip">
<img src="images/buttons/social.png" alt="View Social Groups" style="border:0" />
<span>View Social Groups</span></a>
$template_hook[postbit_controls]
</div>CSS:
.tooltip {
text-decoration: none;
}
.tooltip:hover {
position: relative;
}
.tooltip span {
display: none;
border: 1px dotted #F2A0F9;
background-color: #ffdbf9;
text-decoration: none;
width:200px;
}
.tooltip:hover span {
display: block;
position: absolute; top: 10px; left: 0;
/* formatting only styles */
padding: 5px; margin: 10px; z-index: 100;
background: #ffdbf9; border: 1px dotted #F2A0F9;
opacity: 0.9;
/* end formatting */
}Also, in the same mini box area, I have this other issue (all browsers) where if a post is moderated, by default it shows a green icon (see screenshot). However, I cannot for the life of me figure out how to get this in the *same row* of the white mini box w/ 5 icons, on the left of that box.
Code
<div style="float:left">
<if condition="$show['moderated']">
<img src="$stylevar[imgdir_misc]/moderated.gif" alt="$vbphrase[moderated_post]" border="0" />
</if>
<if condition="$show['spam']">
<img src="$stylevar[imgdir_misc]/spam_detected.png" alt="$vbphrase[spam_post]" border="0" />
</if>
<if condition="$show['deletedpost']">
<img src="$stylevar[imgdir_misc]/trashcan.gif" alt="$vbphrase[deleted_post]" border="0" />
</if>
<if condition="$show['redcard']">
<a href="infraction.php?$session[sessionurl]do=view&p=$post[postid]"><img src="$stylevar[imgdir_button]/redcard.gif" alt="$vbphrase[received_infraction]" border="0" /></a>
<else />
<if condition="$show['yellowcard']">
<a href="infraction.php?$session[sessionurl]do=view&p=$post[postid]"><img src="$stylevar[imgdir_button]/yellowcard.gif" alt="$vbphrase[received_warning]" border="0" /></a>
</if>
</if>
<div align="center" class="postbit-mini-box">
<a href="member.php?$session[sessionurl]u=$post[userid]" class="tooltip">
<img src="images/buttons/folder_user.png" alt="View $post[username]'s Profile" style="border:0" />
<span>View $post[username]'s Profile</span></a>
<a href="album.php?u=$post[userid]" title="View $post[username]'s Album" rel="nofollow" class="tooltip">
<img src="images/buttons/add_album.png" alt="View $post[username]'s Photo Album" style="border:0" />
<span>View $post[username]'s Photo Album</span></a>
<a href="journal.php?$session[sessionurl]do=showjournal&j=$post[journal_id]" title="$post[journaldesc]" class="tooltip">
<img src="images/buttons/book_open.png" alt="View $post[username]'s Journal" style="border:0" />
<span>View $post[username]'s Journal</span></a>
<a href="profile.php?$session[sessionurl]do=addlist&userlist=buddy&u=$post[userid]" title="Add $post[username]'s to Your Contacts" rel="nofollow" class="tooltip">
<img src="images/buttons/heart_add.png" alt="Add $post[username]'s to Your Contacts" style="border:0" />
<span>Add $post[username]'s to Your Contacts</span></a>
<a href="http://www.talkjesus.com/groups/" title="Social Groups" class="tooltip">
<img src="images/buttons/social.png" alt="View Social Groups" style="border:0" />
<span>View Social Groups</span></a>
$template_hook[postbit_controls]
</div>
</div>