html help - Notification alert

Hi all,
Hope you can help me out here, this notification alert pops up when a member get a notification as (seen in the attachment) - it's the little red bubble. When certain numbers are present, it seems the numbers are not center and correct looking - see how the "3" is sort of running out of the bubble? Here is the code below - how can I make the bubble longer to fit the numbers in properly I this code.

<if condition="$show['notifications']">
            <div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]</a> <div style="background-color: red; display:inline; border-radius: 3px;"><span style="color: white;"><strong>&nbsp; $notifications_total &nbsp;</strong></span></div></span></div>

Code (markup):

Thanks in advance!

 

While it's hard to follow without formatting, one obvious flub is the DIV inside a SPAN... unless you're using that HTML 5 asshattery that's invalid markup as block-level elements cannot go inside inline-level ones. (and even with HTML 5 ****tards saying you can do it, it doesn't work reliably).

Generally speaking you seem to have a bunch of DIV for nothing, span for nothing, and I'm not entirely sure why a total would be getting 'more emphasis' semantically.

I'd have to see it live on a site (which you did NOT provide so we can't "see" what's wrong) to say more, but generally speaking I have the suspicion that markup should be gutted down to:

<if condition="$show['notifications']">

	<div id="notifications">
		<a href="usercp.php$session[sessionurl_q]">
			$vbphrase[your_notifications]
		</a>
		<span>$notifications_total</span>
	<!-- #notifications --></div>

Code (markup):

with EVERYTHING else handled in your external stylesheet... swinging an axe at all the extra tags and classes for nothing, and fixing the lack of separation of presentation from content with the mis-use of STRONG and inlined STYLE. (I'd also consider throwing that span inside the anchor so it too can be clicked -- but that's me)