relative or absolute?

[clausowitz]

All,

 

I have this header on my page which shown some icons, for messages and friend requests. I bit like facebook.

When the user has unread messages it shows the number in a red block. Problem is how to position the number so that is is on top of the right icon.

At home is displays fine but at work it is too mucg to the right.

 

 $msgs = '<a href="profile.php?id=' . $logOptions_id . '"><img src="images/msg.png" width="16" height="13" alt="Board Messages" title="Board Messages" border="0"/></a><span style="position: absolute; left: 885px; top: 18px; font-weight:bolder; background-color:red; color:#FFFFFF;"> '.$num_new_msgs.' </span>';

 

What is wrong with my code?

Marco

[teynon]

Can you post a link to a working copy so we can see what you are talking about?

[clausowitz]

Would love to but the website is resctricted to users only.

I can show you what it looks like, or should look like.

 

[attachment deleted by admin]

[teynon]

Essentially I need to see the actual html / css code of the website and what the current result is. It's very hard to work on a puzzle without all the pieces.

[teynon]

An attempt to answer this question without digging to far is this:

 

position: absolute; left: 885px; top: 18px;

 

This object is positioned absolutely on the page. That means if the users screen is wider than yours, it's position, relative to everything else, will be different.

 

The way you fix this is encapsulate it inside of the link.

 

<a href="profile.php?id=' . $logOptions_id . '" style="position: relative;"><img src="images/msg.png" width="16" height="13" alt="Board Messages" title="Board Messages" border="0"/><span style="position: absolute; left: 15px; top: 18px; font-weight:bolder; background-color:red; color:#FFFFFF;"> '.$num_new_msgs.' </span></a>

 

You will have to readjust the pixels for the span to fit properly, however.

[clausowitz]

That's no problem, I thought you meant an online copy.

 

$sql_msg_check = mysql_query("SELECT * FROM profile_comments WHERE profile_id='$logOptions_id' AND date >= '$new_date' ORDER BY id DESC");
$num_new_msgs = mysql_num_rows($sql_msg_check);
if ($num_new_msgs > 0 && $page_visited <> "True" ) {
	$msgs = '<a href="profile.php?id=' . $logOptions_id . '"><img src="images/msg.png" width="16" height="13" alt="Board Messages" title="Board Messages" border="0"/></a><span style="position: absolute; left: 885px; top: 18px; font-weight:bolder; background-color:red; color:#FFFFFF;"> '.$num_new_msgs.' </span>';
} else {
	$msgs = '<a href="profile.php?id=' . $logOptions_id . '"><img src="images/msg.png" width="16" height="13" title="Board Messages" alt="Board Messages" border="0"/></a>
';
}

 

<div style="background-image:url(style/headerStrip.jpg); height:50px; border-bottom:#999 1px solid;">
<table width="900" align="center" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="156"><a href="http://<?php echo $dyn_www; ?>/index.php"><img src="images/logo2.png" alt="" title="" width="156" height="48" border="0" /></a></td>
    <td width="419">
   <div class="headerBtns" style="margin-top:12px;"> 
<?php if (isset($_SESSION['idx'])) { 
echo '<a href="http://'; echo $dyn_www; echo '/member_search.php">Members</a>';
echo '<a href="http://'; echo $dyn_www; echo '/gallery.php">Gallery</a>';
echo '<a href="http://'; echo $dyn_www; echo '/calen.php">Calendar</a>';
echo '<a href="http://'; echo $dyn_www; echo '/myMap.php">Maps</a>';
echo '<a href="http://'; echo $dyn_www; echo '/ladies.php">Ladies</a>';}
      else {
echo '<a href="http://'; echo $dyn_www; echo '/support.php">Support</a>';
echo '<a href="http://'; echo $dyn_www; echo '/myMap.php">Maps</a>';
  }
?>
</div>
    </td>
    <td width="323"><div align="right" style="margin-bottom:12px;"> <?php echo $logOptions; ?></div></td>
  </tr>
</table>
</div>

[teynon]

I don't really want the PHP code. I just need the code outputted to the browser. Have you tried to fix it with the sample I posted above? My guess is that may actually be the answer.

[clausowitz]

It does work in my browser, I guess it will elsewhere, but I have to try tomorrow.

Thanks so far.