CyberD.org
C:\ Home » 2013 (Page 59)

Styling <sub> & <sup> To Fit Line

The <sub> & <sup> can be pretty useful if you want to write things like the 1st or reference1 and make it look professional, but they can also distort the line-height for certain lines. The solution? Style them!

The default style for <sup> a element is vertical-align: super and the default for a <sub> element is vertical-align: sub. Surprising, huh? :) If you didn't know you can vertically align any element like <sub> & <sup> by default. But anyway, try styling <sub> like this:


	sub {
	vertical-align: bottom;
	font-size: 6px;
	}

For <sup> you could do:


	sup {
	vertical-align: top;
	font-size: 6px;
	}

That should align the little text at the top and bottom of the line, instead of giving it a fixed height. If you don't want to use px for the text, 0.6em would work too. If the above doesn't work, you could also add line-height: 0px or mess around with the margin. You should see that it's working well on this post! :)

* Just a reference.

The :focus CSS

Working through my stylesheet I came across a :focus tag with the outline:0; attribute. I think it might have something to do with the spoiler tag that I started using a while back, but of course not outlining areas of focus won't be a good idea for everyone.

I tried styling the :focus element a bit, but since it's an attribute that works on all elements on a page the results didn't look that good. Adding a border made tags like <h1> look strange, and adding only <color> made some elements lose focus completely, like navigation elements that override color. If I added :focus at the end of the styelesheet, or used the !important attribute, that would solve it, but the navigation elements would look strange with a different color. I'd have to change background color too. Actually, I'd probably have to add separate :focus attributes for many of the different elements on the page and style them differently.

So, I just got rid of the :focus instance completely. If people actually use a keyboard to navigate the site, let the browser style it for them. The default style for the outline tag seems to be a border: #same-as-links thin dotted; style btw. Just remember, don't null out the :focus element! Some visitors probably won't be very happy.

Stack Overflow

Stack Overflow is a programming Q & A site that’s free. It's a place where people ask questions and get a lot of answers. I'm not a member of the community myself, yet, but every time I'm wondering about some aspect of code and go Google it, Stack Overflow usually tops the results! It's a simple site, with a clear layout and tags for the different types of questions, and a lot of helpful/knowledgeable users. It's a site worth knowing about! I think I'll sign up right now...

WordPress HTTP Error Uploading Images [FIX]

So, lately I've been occasionally bugged by an HTTP error when uploading images. At first I didn't think much of it, I thought there was something wrong with the image file, so I ran it through FastStone Photo Resizer (a program I use to compress/resize most images I upload) and that fixed the problem. Many days passed.

Then today I was about to post about a new pair of shoes and the error popped up in a red box. I had already resized the picture, and sizewise it was down at 418kb, so there should be no problem with the file. I tried uploading a few times, and each time it got stuck at 92%. I tried uploading the original file (around 2MB) and it got stuck at 99%. At this point I was thinking there was some problem at the end of the file (EXIF camera information maybe?) since I hadn't uploaded a photo in a while, but then I tried making the file a LOT smaller (10%), and it uploaded fine!

I checked support threads and people spoke about the Smushit plugin giving the same error, but I don't have that plugin installed (no sense in resizing the image after upload, I do that before uploading). I checked my plugins anyway, to see if any of them were suspicious, and then I checked my error_log. Guess what, exhausted memory limit was the error. I found a bunch of other plugins misbehaving too, but that's outside the post, the exhausted memory limit was easy to fix, and I'm surprised I haven't 'fixed' it earlier! Maybe my host didn't allow modification of the PHP RAM limit earlier. Anyway, the fix is this:

define('WP_MEMORY_LIMIT', '32M');

Just add that to the wp-config.php file. That's it. You could change the .htacess file or the php.ini file too, it'll do the same thing. I tried uploading again after this quick edit and the error was swept away. I might be imagining things, but I feel like the site overall is a bit faster too. Maybe this will even get rid of those occasional pesky 502 errors that sometimes bother me! Maybe this tip is useful for some other lost soul looking to fix their HTTP errors. If you didn't know it, now you know. :)

Shoes On The Line

So I ordered a pair of shoes. 42s. Nah, 47s, that's what I use. I've got the blues. This is the news. A pair, a deuce, I mean these shoes they come in twos. And here's the proof.

Shoes

It's the first time I've ordered shoes online (via Heppo). And it went well! They fit! They didn't smell! They're crisp! So now I have a new pair for the new year, and that is it.

Woke Up Recently

This is actually posted on the day of recording. Closest you'll ever get to a live! Just... 14 hours ago. :P

Privacy   Copyright   Sitemap   Statistics   RSS Feed   Valid XHTML   Valid CSS   Standards

© CyberD.org 2023
Keeping the world since 2004.