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

Code:
            <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>
                    &nbsp;
                <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>
                    &nbsp;
                <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>
                    &nbsp;
                <a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;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>
                    &nbsp;
                <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:

Code:
.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

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&amp;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&amp;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>
					&nbsp;
				<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>
					&nbsp;
				<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>
					&nbsp;
				<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;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>
					&nbsp;
				<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>