Ever since I added this code to three pages, the code goes wonky when the client tries updating any page (it’s WordPress). It doesn’t happen when I update it for some reason. What’s wrong with the code? Site is subtleyoga.com.
<div class="faculty">
<a href="http://www.subtleyoga.com/about-kaoverii/"><img class="fltleft" src="http://www.subtleyoga.com/wp-content/uploads/2011/08/kaoverii-small.jpg" alt="Kristine Kaoverii Weber, MA, eRYT500" title="Kristine Kaoverii Weber, MA, eRYT500" width="127" height="166" /></a>
<p><span class="bio-title">Program Director<br />
Kristine Kaoverii Weber, MA, eRYT500</span><br />
Kaoverii Weber teaches about half of the curriculum. <a href="http://www.subtleyoga.com/about-kaoverii/">Please click here for more about Kaoverii.</a></p>
<div class="clearfloat"></div>
</div>
CSS
.bio-title{font-weight:bold;}
#content img.fltleft{float:left;margin:0 10px 5px 0;}
.clearfloat{clear:both;}
.faculty{background-color:#E8E8E8; margin:10px 20px 20px 20px;}
#content .faculty p{margin:0 20px 10px 8px;}
I don’t know where on your site this code appears, but anyway, even though it’s “valid” to have an <a> next to a <p>, generally it can lead to buggy page rendering to do so. It’s better to wrap the <a> in a block level element, even if a <div>. For more suggestions, could you point out where this code appears on your site?
Thanks Ralph. Here’s the page: subtleyoga.com/yoga-teacher-training/ryt-200/. This is one page I haven’t fixed yet - see most of the text is not lined up and too large? WordPress just adds <div></div> tags around every line – replaces most <p></p> tags with them every time she does an edit - no matter how small. And this also messes up the faculty section. Here’s a page I fixed - how it’s supposed to look: subtleyoga.com/yoga-teacher-training/ryt500-chattanooga/
From an HTML standpoint, it’s obvious what to do, but with WordPress in the mix it’s a different ball game, and I’m not up to speed with that. [I’ve moved this to the WP forum in the hope that someone there will have suggestions from that point of view.]
How does she enter the content? Does she include the HTML in her posts manually? If so, an option might be to disable WordPress’ auto-paragraphing function by placing the following line in your /themes/mytheme/functions.php file:
@Ralph, what’s the solution from an html standard? It might work.
@Kohoutek, thanks. I think she just uses design view - she doesn’t know html. I did ask her to use the html tab and make changes but it always messes up when she does it. I could try that though.
If you applied the filter I posted, then she’d have to use HTML view and add the markup herself. That may be more work but it’d also give her more control.
Even like something you have on the page that you’ve fixed is OK. So I meant that it’s easy to do this statically, but when using WP there are more factors involved. [I didtched WP some years ago, because I found other tools that were better for this kind of scenario.]
Sculley, another option would be to install a different editor. There are many alternate editors for WordPress, some of which simplify the content creation process, such as this one. If you type in “simple editor” or a similar term on WP’s plugin repository, you’ll get quite a few results, some of which might be a good fit and also rectify the issue you’re currently having with the default editor.
If you want to move away from WordPress as a whole, you could use some of the simpler CMSes such as Perch or TextPattern. They’re both very, very good alternatives, a lot simpler, but they might be sufficient for the task.
For bigger sites, you could look into ExpressionEngine. It’s what I use and I couldn’t be happier with my choice.
