Something We See Frequently
We hope Little Black Kitty doesn’t mind us grabbing a snippet of a screenshot of her blog, but we’ve seen this presentation idiosyncrasy frequently and we’d like to show you how to easily correct it.
Notice how the text does not start flush with the top of the graphic. The words, “It was a sunny afternoon” start almost halfway down the scope-graphic. That offset is a result of just a few spaces in the HTML code and is easily fixed.
If the code has spaces in it that look like this:
This code will result in this display:
Just delete the spaces between the end of the picture-code block and the beginning of your text-block, like so:
Notice how the carats are shoved up against each other now. This will more closely align the text with the top of the graphic, like this:
Another piece of code minutia we do is to minimize the border at the bottom of the graphic so text can get shoved up against it as close as possible. It just looks better to us that way.
If you can see the “0px, 10px, 10px, 0px” in the code, those are the margin pixels for your graphic. Left, Right, Bottom, Top. We always reduce the Bottom margin to 0px, making the code read: “0px, 10px, 0px, 0px”. This doesn’t always result in the text being perfectly level against the bottom of the graphic. One would have to resize or scale the graphic to ensure that.
We are by no means anything close to an HTML expert, but if you ever wondered how to make those little changes, now you know.
Comments
11 Responses to “Something We See Frequently”
Leave a Reply
-
Got Something To Say?
Email icon provided by Nexodyne. -
-
-
BRK's Site Meter
-
BRK License Agreement
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.
-
BRK's RSS Feeds
Good information to know and all, but sometimes I just like to offset the lines to try to add effect to the picture, or I just screw it up. Which ever comes first.
beware… test on multiple browsers if you are going to do that level of tweaking. Yes, I do this stuff for a living…
and yes, that means testing in IE6 and 7 in Windows. As well as Safari and Firefox on the Mac.
My blog template is also variable, meaning it scales out for different screen sizes and resolutions. It makes it hard to line it up right, but BRK has challenged me to work on getting my stuff looking better.
I’ve had the problem where my inserted graphic comes in as:
<a img src=”pic.jpg”>
hahahaha this is my sample text
The line break after the image (or line tag in your example) will cause the same problem. Just need to review the code once published. I never remember to spell check since I write my rants randomly and chaotically, but I’ll always read it after I am done to try to catch problems like that and some of my more noticable spellings mistakes.
Actually, on Blogspot, when you create a post in “compose” mode (instead of HTML mode) and you ask the mr. Blogger to place an image for you, it always seems to add the line breaks. I’ve found, that the easiest way to fix it, in compose mode, is to remove the carriage returns by hitting delete. TA DA. No HTML needed.
^
|_>What he said, I suck at HTML (I want to lazy link but hate the thought of going to buy a book just for that) and I’m new to the whole blogging thing, but with Blogger that’s all I do, unless I forget…
Cheers!
(Sigh) BRK, what are trying to do to me here? Maybe I shouldn’t admit it, but I’m a web designer. And now my sloppy code has been called out on international media.
It’s funny because when I created that post I noticed the problem and was too lazy to go and fix it.
So now I’ll need to do something spectacularly resourceful with the code on my blog…stay tuned.
Oh, and I don’t mind it when you reference me…I found out about this whole mess, when blogcounter notified me that I’d reached 400 hits…which would be about 2 if it wasn’t for the BRK refers.
You should refrain from using “px” and learn to use “ex” or “em” instead.
Mike
You guys like doing it “the hard way”! I’m more of a lazy guy myself and thus use Windows Live Writer to compose all my blogs, WoW and non-wow…
Mate, you are a fount of wisdom. This is something I wouldn’t have noticed. After reading this post I went back and checked my blog. Every graphic had that problem. Simply fixed. So now not only do I visit you site for Hunter tips, but also blogging/html tips. Your work is appreciated.