Rocket scientist needed for help with forum signature

[Deltango Vale]

I recently created a signature, which I was happy with. Everything looked fine for a couple days then, for some unknown reason, the vertical alignment changed (I didn't do anything; it just changed).

My signature is in three parts: image, text, image. Here is the 'code':

<a target="_blank" href="https://marketplace.secondlife.com/stores/49789"><img src="http://community.secondlife.com/t5/image/serverpage/image-id/20473i4C6A72153EF3A0E7/image-size/original?v=mpbl-1&amp;px=-1"></a><a target="_blank" href="https://marketplace.secondlife.com/stores/49789"> Anthracite Rentals </a><a target="_blank" href="https://marketplace.secondlife.com/stores/49789"><img src="http://community.secondlife.com/t5/image/serverpage/image-id/20475i64A21578DFD3FCCD/image-size/original?v=mpbl-1&amp;px=-1"></a>

Note: I can't get all the 'code' to display properly in this post. Not sure what to do.

Note: because there is a problem with putting a space before the A of Anthracite, I had to put a 'null' (alt 255) to create a fake space. (I'm going out of my mind with the complexity of this stuff.)

If you look at my signature, you will see that the text is now too low with respect to the red lines. For some unknown reason, either the text has shifted downward or the red lines have shifted upward. Like I said, the above 'code' used to work just fine. The text used to align properly with the images. I logged on this morning and it was messed up.

Anyone want to have a go at solving my problem?

[Peewee Musytari]

I could never be mistaken for a Rocket Scientist, but I do know one of that helps lol

My suggestion would be...That is way too complicated, why not just make an image of the line with the text on it and use that so that it can`t change? Even the most basic graphics program can handle making a line with some text in the middle of it so you wouldn`t need some expensive graphics package.

 

EDIT: I would also suspect that the fact that the introduction of the new Smileys now has images floating higher than text (like the one I just did up there) may have some connection to what happened to your signature.

[LoveAngeL Lyre]

Why you want the red lines to be clickable? Your code includes 3 times the url of marketplace when one time is enough. You can create 2 equal red lines (no clickable) and a simple url in the middle which you can rename in Anthracite Rentals. I dont understand the reason for the clickable images in your signature.

 

Forgot to say: add <center> ....... </center> in the beginning and end of your signature if you want your images to be exactly in the middle of signature's space, although its no necessary. You don't need more html than that.

[Deltango Vale]

Ahhh, thanks for the explanation of what changed. I had thought of making a single image, but I tend to rip my hair out using Paint. I'll give it a try, but I kinda like the way the text gets underlined when one hoveres one's mouse over it. I tried adding align="bottom" to the images, but it had no effect. From what I have read so far, the world of web programming is in chaos. Some things work on Tuesdays with Firefox, other things work on Wednesdays with IE. Some things used to work but no longer work. Some things might work with Lithium, others not etc. If there were a single, simple, universal standard, idiots like me might stand a chance.

[Deltango Vale]

Agree. I don't know how to insert simple images. The only way I know is by making them clickable. Can you give an example of the code for a simple image?

[Peewee Musytari]

Its possible they will correct whatever is making the smileys float around like that and that could fix it for you, so don`t try adjusting alignment just yet or you could end up broken again when they correct it lol

[Deltango Vale]

Good advice, thanks (searches for smileys, but can't find any)... tries to do it manually with

[valerie Inshan]

Strangely, you are having this issue today just when the new emoticons were launched and have a serious alignment problem (see this thread: http://community.secondlife.com/t5/Forums-Blogs-Answers-and/New-emoticons-today/td-p/854517/page/2).

Apparently, it looks like a global bug which Dres has put on the agenda for the CTUG today. I hope we can have some feeback tomorrow. :smileyindifferent:

[LoveAngeL Lyre]

Ah ok, then we have another "problem". the html code is really so simple:
<img src=" url of image">

 

I created a signature with a pic no clickable. I will let it for a while to check it out.

[Peewee Musytari]

Ooh thats interesting...did ya see that? ....In Comments they line up correctly

 

Haha this is going to be fun when they correct the aligment, they will be too low in comments....Yet another good reason to GET RID OF COMMENTS!!!! ...I really hope that this new thing with comments always open is not the fix we have been waiting for.

[Griffin Ceawlin]

Are you just trying to add the red bars above and below your text?

 

<A href="https://marketplace.secondlife.com/p/Anthracite-Rentals/1508547" target="_blank"><IMG src="http://community.secondlife.com/t5/image/serverpage/image-id/20473i4C6A72153EF3A0E7/image-size/original?v=mpbl-1&px=-1"><p>Anthracite Rentals<p><IMG src="http://community.secondlife.com/t5/image/serverpage/image-id/20473i4C6A72153EF3A0E7/image-size/original?v=mpbl-1&px=-1"></A>

 

P.S. You went nuts with the target="_blank, huh?

ETA: Again, note the truncated HTML in my post.

ETA2: NVM. Forum reformatting upon saving it in MY sig broke it. LOL.

ETA3: This is better:

<img src="http://community.secondlife.com/t5/image/serverpage/image-id/20473i4C6A72153EF3A0E7/image-size/original?v=mpbl-1&px=-1"><p><a target="_blank" href="https://marketplace.secondlife.com/p/Anthracite-Rentals/1508547">Anthracite Rentals</a></p><p><img src="http://community.secondlife.com/t5/image/serverpage/image-id/20473i4C6A72153EF3A0E7/image-size/original?v=mpbl-1&px=-1"></p>

ETA4: Here is the HTML you would use with a simple horizontal rule, without relying on a graphic:

<hr color=red><p><a target="_blank" href="https://marketplace.secondlife.com/p/Anthracite-Rentals/1508547">Anthracite Rentals</a></p><p><hr color=red></p>

ETA5: Again, NVM. Lithium does not like the horizontal rules. I give up. LOL.

[Peewee Musytari]

BTW, back to your image problem, you can make 2 images, one to show with mouse-over, so you still get that effect you wanted.

[Deltango Vale]

Ahhhhhhhhh, very interesting. Yes, my signature worked fine late last night (about 20 hours ago), so my problem does seem to be linked to the new emoticons. I will follow Peewee's advice and not change anything.

[Deltango Vale]

Yes, I was wondering why my smiley and your first smiley were aligned differently.

 

BTW, whenever I add a comment, the screen fails to refresh properly. I have to click on Answers > Technical to reload the page.

[Deltango Vale]

Sigh, you technical gurus are scary, but I love you. So much for my Arts degree

[Peewee Musytari]

I have noticed since the change today that it closes the comments after you post one, you need to click on the link on the left called "View entire topic" to get it all to open again.

[LoveAngeL Lyre]

This is your code:

 

[LoveAngeL Lyre]

Smiles... i gave you the code

[Deltango Vale]

Yes, sorry, RL interrupted. Exactly. The only difference now between mine and yours is the 'null' (alt-255) character before the A of Anthracite. It's the only way I know to put a space before the A.

[LoveAngeL Lyre]

You need to type it without any space. Another one difference, maybe more important is that your code was 482 letters with spaces and i made it only 183

[Deltango Vale]

The idea behind tinypic.com is to store images in a central location for use on multiple blogs? Another benefit is shorter address names for those images?

[Peewee Musytari]

Lexie confirmed at the UG meeting that they are working on fixing the new smiley alignment, so see what happens when thats sorted out.

[Luc Starsider]

Your signture changing and breaking over two lines could be, as Peewee said, because of changes LL made in at the same time they brought out the new emoticons. At some point the width of the content of a post changed to be narrower than it used to be. Since you use a picture, both before and after the text, of specific dimentions, when the content width changed there was not enough room to show both lines and the text on the same line.

It would be simple to fix, and make immune to this type of change, if it was allowed to specify an image as a background to an element using Cascading Style Sheets, but from my testing, this is not possible. 

The easiest way to fix this, the way it is now, is to upload a new image for the red line to the right of the text that is a few pixels shorter than the one you use now. You will have to experiment with how many pixels to remove. That should prevent the red lines and the text to break over two lines.

- Luc -

[Deltango Vale]

Thanks for the info on CSS. I started looking into it, but decided it was too complex. I gather from what you say, it wouldn't have worked anyway, so thanks for saving me endless hours messing about. In the end, I downloaded a nifty program called Inkscape, which is very intuitive. I created a single image to replace what I had before. The side benefit of this exercise is that I finally found an intuitive graphics program that does not cost the GDP of Brazil (when I win the lottery, I'll buy CorelDraw Graphics Suite X5, but, since Inkscape is a Corel clone, I get the goddies for free).

[Luc Starsider]

I had a working version of the css variant that I was about to post before, but then thought I had better test it before. When I tried it I got an 'html not allowed' message from Lithium. If I didn't include the background image selector, I didn't get the message. I suspect it is the single apostrophes that is causing problems. If anybody know how to make this work, I'd like to know.

Anyway, the new sig looks good, and works as it should, but if you're interested, here is the code for my little experiment:
<div style="width:100%; background:url('[path-to-image-for-lines]') 0 50% repeat-x;"><span style="position: relative; left: 100px; background-color: #fff; padding: 0 4px;"><a target="_blank" href="https://marketplace.secondlife.com/stores/49789"> Anthracite Rentals </a></span></div>
The image I used for the lines is a 3 pixel wide section I cut out of the image you use in the signature.

- Luc -

[WADE1 Jya]

If you don't want to use a graphic banner.... look up Unicode spaces and use a different Unicode space. Certain Unicode spaces are blocked for use in links, it's a web security thing. You can use these in unlinked text.

Anyway if you look around you probably can find some unicode spacing that will work (just try different ones to see what does work) also if you look at Unicode dingbat & geometric shapes codepages you can find a wide assortment of unicode blocks like this one that will include whatever symbols you need to make any sort of simple graphic lines you require.

Yes I am kinda a typography geek :matte-motes-grin: