Talk Jesus Login

chadi · #1 May 15th, 2008, 09:20 PM

Installed this vbulletin mod today
http://www.vbulletin.org/forum/showthread.php?t=158473

Unfortunately, the author has not logged into VB since Dec 2007, so I'm hoping to get some help here.

Anyone know how to get an small (16x16px) image icon vertically aligned with the text?

Current code used

Code:

<if condition="$show[guest]">
<if condition="$vboptions[login_popup_autodisplay]">
    <td class="nav_menu_control">
    <img src="images/key.png" align="Member Login" />&nbsp;
</if>
        <a id="navbar_login" href="$vboptions[forumhome].php$session[sessionurl_q]">$vbphrase[log_in]</a> 
        <script type="text/javascript"> vbmenu_register("navbar_login"); </script>
<if condition="$vboptions[login_popup_autodisplay]">
    </td>
</if>
</if>

Notice the text is lowered when an icon is inserted. I've tried various methods, even div tag to no avail.

(click image to see full version)

**Buzz** · #2 May 15th, 2008, 09:50 PM

Code:

.loginicon { display: block; width: 16px; height: 16px; vertical-align: bottom;}

vertical-align: middle;
vertical-align: top;

may also work.
Another way is to simply add padding-top to the css for the icon.

chadi · #3 May 15th, 2008, 10:05 PM

I can't get this to work unfortunately. Tried all 3 positions.

Code:

#login {
    display: block; width: 16px; height: 16px; vertical-align: middle;
}

Tried many ways

Code:

<if condition="$show[guest]">
<if condition="$vboptions[login_popup_autodisplay]">
    <td class="nav_menu_control">
    <img src="images/key.png" align="Member Login" id="login" />&nbsp;
</if>
        <a id="navbar_login" href="$vboptions[forumhome].php$session[sessionurl_q]">$vbphrase[log_in]</a> 
        <script type="text/javascript"> vbmenu_register("navbar_login"); </script>
<if condition="$vboptions[login_popup_autodisplay]">
    </td>
</if>
</if>

Code:

<if condition="$show[guest]">
<if condition="$vboptions[login_popup_autodisplay]">
    <td class="nav_menu_control" id="login">
    <img src="images/key.png" align="Member Login" />&nbsp;
</if>
        <a id="navbar_login" href="$vboptions[forumhome].php$session[sessionurl_q]">$vbphrase[log_in]</a> 
        <script type="text/javascript"> vbmenu_register("navbar_login"); </script>
<if condition="$vboptions[login_popup_autodisplay]">
    </td>
</if>
</if>

Tried <div id="login"> tag at the beginning, before the td tag, before img tag, etc.

**Buzz** · #4 May 15th, 2008, 11:02 PM

Even this?

Code:

img#login { padding-top: 4px; }

chadi · #5 May 15th, 2008, 11:08 PM

Using this below, it bought both of them down further

Code:

<if condition="$show[guest]">
<if condition="$vboptions[login_popup_autodisplay]">
    <td class="nav_menu_control">
    <img src="images/key.png" align="Member Login" id="login" />&nbsp;
</if>
        <a id="navbar_login" href="$vboptions[forumhome].php$session[sessionurl_q]">$vbphrase[log_in]</a> 
        <script type="text/javascript"> vbmenu_register("navbar_login"); </script>
<if condition="$vboptions[login_popup_autodisplay]">
    </td>
</if>
</if>

By the way, the icon itself has always shown vertically in the middle (correct). The problem is the text getting pushed down instead of vertically middle.

**Buzz** · #6 May 15th, 2008, 11:30 PM

This seems to line them up very well....

Code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css">
	<!--
	img#login { vertical-align: top; }
	
	-->
	</style>
</head>

<body>
<table cellpadding="10" cellspacing="5" border="1" align="center">
<tr>
<td class="nav_menu_control">
    <img src="images/key.png" align="Member Login" id="login" />&nbsp;
        <a id="navbar_login" href="$vboptions[forumhome].php$session[sessionurl_q]">$vbphrase[log_in]</a> 
        <script type="text/javascript"> vbmenu_register("navbar_login"); </script>
    </td>
    </tr>
    </table>
    
    
</body>
</html>

but of course I don't have any other styling going on.

chadi · #7 May 15th, 2008, 11:33 PM

Awesome, that did work! Thanks Buzz, appreciate it.