Posts tagged css

Checking CSS for Errors

I just spent an hour or so struggling with some changes to the CSS of this site. I just couldn’t get my changes to show up in a browser. Finally, I ran my CSS through CSSCheck and discovered that my last definition ended with a ) (right parentheses) rather than a } (right brace).  Apparently, CSS doesn’t care if you close your last statement incorrectly, but, of course, when you add a new definition at the end, CSS ignores it completely.

WordPress Image Quirk

While posting my last entry, I discovered a problem with WordPress’s new editor and the way it inserts images into a post. The new version of the post editor is quite slick and includes handy dialogs for inserting media (tiny buttons above the editor window). Here’s the problem:

A Duck

A Duck

If I insert a paragraph break after the image and before the text, the text doesn’t wrap around the image. This seems reasonable enough (though hard to follow because there are no <p> or <br> tags to see where breaks are going. The visual editor displays the image inline, but the actual post does not.

A Duck

A Duck

If I use the html editor and type text right after the image tags, as if they were all part of the same paragraph, I get the image inline as expected.

You would think that it is simple enough to make each image part of a paragraph of text, but, if the paragraph is too short, you end up with a gap before the start of the new (non-flowing) paragraph (as with this paragraph).

A Duck

A Duck

The solution seems to be to add explicit <br></br><br></br> tags (two sets) and running the two paragraphs together, instead of pressing enter in the editor.



Then the next paragraph displays correctly flowing around the image (like this one).



Something here is broken, and I think it is the editor module in WordPress. Because it doesn’t show the <br> or <p> tags, even in the html view, the user can’t predict the results very well. I noticed a similar problem when I tried to add a break inside a <li> tag in another post.




A DuckAs you can see above (in Firefox, but not in IE), the caption function causes the flowing paragraph to take on the attributes of the caption, so it seems best to avoid using the caption function (as here) in order to keep your text consistent within the post.



I’ve experimented with different tags and settings in style.css and tried inserting image tags without using the editor’s “Add an image” function, so I’m reasonably confident that problem lies in the editor. I’ve also noticed that if you do put in your own <br> or <p> tags, and then switch to editing with the visual editor, they are stripped out of the saved version and you end up back where you started.

Annoying!

Agave – A Handy Web Design Tool

Exploring Ubuntu Studio, I discovered a utility I’ve never seen before.

Agave is, among other things, a handy program for finding harmonious new colour schemes you can use on web pages.

I used it to choose the colours for the parent page of this site — Kevin Kennedy’s Web Portal — and I love the results (YMMV).