How do I prevent text from falling off it's platform?

If anyone has any suggestions that I can try please let me know. Preferable something besides besides padding-left 1px, cause I know that works.

1st.) Blogger
2nd.) jsfiddle
Both exactly the same code.

Please explain.Your question does not make any sense to me.

The text is meant to stay on the black background, and not move off it.

You just posted a piece of an image. Am I supposed to guess what it is and its relevance to your question? Or is this related to another one of your threads?

A blown-up pixilated image of what you have doesn’t help anyone explain anything…

Same exact code as what?

1 Like

The blogger code and the jsfiddle codes are exactly the same, no difference.

So, then why is the text hanging off the blogger code and not the jsfiddle code?

I don’t see that the text has fallen off anything.

1 Like

You still don’t see a difference?

difference from what? All you have done so far is post images that apparently have some problem with them.

I do see a difference, but given you have blown up the image beyond all recognition it doesn’t mean a thing.

Why is the text hanging off of one, and not the other? This is what I want to know, and if that can be adjusted.

If you look at the websites themselves there is no problem even if you view the text at several times its “real” size. The problem as I’ve already stated several times is your blown-up pixilated images. They are just plain nonsense. Forget them!

1 Like

It’s an issue for me, and I intend to find a fix for it.

As far as I understand it, your problem is that you feel your text is too close to the border. In that case, the simple (and correct) solution would be to add a little padding around the text.

I wanted to find another method besides padding-left 1px.


You will need to clarify exactly what the problem is and where we can see the result of the differences.

You said:

How do I prevent text from falling off it’s platform

I have no idea what that means and to what you are referring.

I can only surmise from your images that there seems to be a difference in line-height and that the letters on the left seem to have 1px artefact showing on the left probably due to anti aliasing combined with your image enlargement.

The body of the letters are essentially in the same place.

You will need to create a clear demo of the problem that exhibits the problem in a stand alone form.

You should know that is perfectly valid for characters to be different over various systems/browsers and anti aliasing will not necessarily be confined to the exact glyph size. Glyphs themselves are also allowed to extend out of their line box and indeed italic text will poke out in some browsers and not in others.

If this is a difference in the same browser (name that browser) between the fiddle and your blogspot then obviously both of those come with overheads in code so you need to make sure that your code is not inheriting anything from the page it sits in. I find jsfiddle unreliable for complex bug hunting and you are better creating a stand alone demo that has no dependencies when you have a bug to chase.

However if you are constantly chasing pixels then I’m afraid you are in the wrong job and should find a better way to spend your time :slight_smile:


1st.) Blogger
2nd.) jsfiddle

@asasass: simply posting the same links and the same images without any further explanation is pointless. If there is something you want to clarify, then you need to explain it properly.