Aligning images in wordpress

HTML & CSS
1

I’m trying to align images in wordpress posts. The default code, while it aligns images perfectly fine, the anchor surrounding the image behaves like a block element when the “aligncenter” class is used or when no class is used at all. How can I avoid that issue without altering the HTML? Example code as follows:

<html>
<head>
<style type="text/css">
    /* reset */
    body{
        background-color:cyan;
        padding:0px;
        margin:0px;
        color:black;
        font-size:100.01%;
    }
    p { margin: .2em 0 .8em 0;}
    a img { border: none; }
    /* reset */
    
    
    /* alignment */
    #content .post img.aligncenter {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #content .post img.alignleft {
        float:left; 
        margin:0 1em 1em 0;
    }
    #content .post img.alignright {
        float:right; 
        margin:0 0 1em 1em;
    }
    /* alignment */
    
    
    /* content */
    #content {
        width: 700px;
        background:white;
        margin: 25px auto 0px auto;
        padding: .8em;
    }
    #content .post img {
        border: 1px solid #DDDDDD;
        padding: 6px;
        display:block;
    }
    #content .post a:hover img{
        background-color:#EEEEEE;
        border-color: #BBBBBB;
    }
    #content .post p img, #content .post .wp-caption {
        margin-top: 0.4em;
        margin-bottom: 0.6em;
    }
    /* content */
</style>

<body>

<div id="content">
    <div class="post">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="aligncenter"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignleft"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignright"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class=""></a></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        
    </div>
</div>

</body>
</html>
2

Wow, I wish all code samples were that easy to test! :slight_smile:

I’m not quite clear what you are asking, though. How do you want those images to appear? It’s really the image itself that is set to display: block; Do you want text to wrap it, or …?

3

For the centered image, if you hover your mouse over the image the :hover property is triggered (as expected). But…the same goes for if you hover your mouse on the white space to the left or to the right of the image–which is the problem.

[URL=“http://img402.imageshack.us/img402/2233/imagehover.png”]http://img402.imageshack.us/img402/2233/imagehover.png

The position of the image is in the right place…it’s just the anchor which isn’t behaving properly.

[edit]: Made a minor change, so now it’s only the centered image which has the anchor issue.

<html>
<head>
<style type="text/css">
    /* reset */
    body{
        background-color:cyan;
        padding:0px;
        margin:0px;
        color:black;
        font-size:100.01%;
    }
    p { margin: .2em 0 .8em 0;}
    a img { border: none; }
    /* reset */
    
    
    /* alignment */
    #content .post img.aligncenter {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #content .post img.alignleft {
        float:left; 
        margin:0 1em 1em 0;
    }
    #content .post img.alignright {
        float:right; 
        margin:0 0 1em 1em;
    }
    /* alignment */
    
    
    /* content */
    #content {
        width: 700px;
        background:white;
        margin: 25px auto 0px auto;
        padding: .8em;
    }
    #content .post img {
        border: 1px solid #DDDDDD;
        padding: 6px;
    }
    #content .post a:hover img{
        background-color:#EEEEEE;
        border-color: #BBBBBB;
    }
    #content .post p img, #content .post .wp-caption {
        margin-top: 0.4em;
        margin-bottom: 0.6em;
    }
    /* content */
</style>

<body>

<div id="content">
    <div class="post">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="aligncenter"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignleft"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignright"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class=""></a></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        
    </div>
</div>

</body>
</html>
4

Ah, I see. Hmm, interesting problem. To be honest, I wouldn’t have thought an <a> would behave that way. That behavior doesn’t bother me, but still, there must be a way to get rid of it. Will have to test further, or await a better mind! :smiley:

5

Hi,

That’s why I always float the container and not the image :slight_smile:

If the images are a fixed size then you could do this.


 #content .post img.aligncenter {
        clear: both;
[B]        float:left;
        margin-left:50%;
        margin-right:50%;
        position:relative;
        left:-80px;
    }[/B]

If the images are various sizes then you’d have to address the anchor instead with your class.

(I assume the real page has a doctytpe ;))

6

Yes, the real page has a doctype. This is just a test for this specific issue.

The image sizes vary.

Since wordpress is in control, it’s going to be a real pain to edit each anchor individually. That’s why the restriction on the HTML.

7

That’s pretty awkward then unless there is some sort of consistent structure that you can use.

The only way I could see to stop the anchor being active was to float the image but then of course the text wraps hence the double margin on each side and the need to know the width.

I couldn’t see any other CSS way to do it I’m afraid.

8

WP always requires some PHP tweaking…

If you can at least change the position where the classes are added in the HTML, so that .aligncenter is on the anchor and not the image THEN the following code should solve your problem without disrupting your theme:


    /* alignment */
[COLOR="DarkGreen"]    #content  .post a.aligncenter {float:left; margin-left:50%; margin-right:50%; position: relative; }
    #content  .post a.aligncenter img{float:left; margin-left:-50%;  }[/COLOR]
    #content .post img.alignleft {
        float:left;
        margin:0 1em 1em 0;
    }
    #content .post img.alignright {
        float:right;
        margin:0 0 1em 1em;
    }
    /* alignment */

if worse comes to worse…pic any point BEFORE the anchor is introduced to place the class… you could put it around the <P> and change the rule to read :


    /* alignment */
[COLOR="DarkGreen"]    #content  .post .aligncenter  a{float:left; margin-left:50%; margin-right:50%; position: relative; }
    #content  .post .aligncenter a img{float:left; margin-left:-50%;  }[/COLOR]

the point is that placing the class so close to the element that you want to position limits control.

9

There doesn’t appear to be an automatic way to do that, nor an available plugin (if you know of any that would work, I’d be happy to hear about it). The only way I can see doing that is editing the HTML manually, or go through the advanced settings areas for each individual image.

if worse comes to worse…pic any point BEFORE the anchor is introduced to place the class… you could put it around the <P> and change the rule to read :

I was thinking that I might put the image alone in its own paragraph, and center the paragraph, but that too would involve some extra work for each image.

So…maybe this is turning more into a wordpress issue, rather than a CSS issue. Although I can’t imagine why this was chosen as the default wordpress behavior if it’s broken…

10

FF, how is the class being assigned to the img? I would intercept that and use that to add the class to the P instead(or in addition to, at least).

It will require some sifting through WP PHP (read:eidth the theme PHP not just the css), but that’s WP for you… it’s not so much an issue of WP but an issue of working within the constrains of a frame work.

how are you deciding which image goes left/right /center? use that same foo(); except have it output get the URL and output the link.

11

The wordpress TinyMCE WYSIWYG is responsible for creating the HTML.

I tried following the code, but it’s fairly difficult without a good grasp of the wordpress core.

At this point, I’m thinking I may end up just leaving it as-is. It’s too much work to fix it in wordpress, and it’s too much work to make the necessary adjustments for each individual image manually.

12

I thought so. You could always just place the code in the HTML tab of TMCE. The behaviour that you describe is odd; when you use TMCE visual editor to add a link… the choices for classes pop up, once a class is chosen it is placed on the anchor tag, not the image tag.

so the key is add your image first, chose “none” in the alignment ( better yet, DONT CHOSE ANYTHING as WP adds the class “alignnone”… which is pointless.) THEN add the link… that will give you the option add the class “aligncenter” to the anchor and that’s what we wanted anyway. problem solved

13

Well, if I have to do it manually, probably the easiest approach would be to use your alignment CSS, then in wordpress, click on the advanced options of the image, remove the aligncenter class form the img, and add it to the link. That’s all on the same page.

Thanks :slight_smile:

Now, I noticed in IE9 :hover doesn’t trigger quite right on the alignright, alignleft, and last image with no alignment class. However, it works perfectly fine on the aligncenter anchor. Code as follows:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    /* reset */
    body{
        background-color:cyan;
        padding:0px;
        margin:0px;
        color:black;
        font-size:100.01%;
    }
    p { margin: .2em 0 .8em 0;}
    a img { border: none; }
    /* reset */
   
   
    /* alignment */
    #content .post a.aligncenter {
        float:left; 
        margin-left:50%; 
        margin-right:50%;
        position: relative;
    }
    #content .post a.aligncenter img{
        float:left; 
        margin-left:-50%;
    }
    #content .post .alignleft {
        float:left;
        margin:0 1em 1em 0;
    }
    #content .post .alignright {
        float:right;
        margin:0 0 1em 1em;
    }
    /* alignment */
   
   
    /* content */
    #content {
        width: 700px;
        background:white;
        margin: 25px auto 0px auto;
        padding: .8em;
    }
    #content .post img {
        border: 1px solid #DDDDDD;
        padding: 6px;
    }
    #content .post a:hover img{
        background-color:#EEEEEE;
        border-color: #BBBBBB;
    }
    #content .post p img, #content .post .wp-caption {
        margin-top: 0.4em;
        margin-bottom: 0.6em;
    }
    /* content */
</style>
 
<body>
 
<div id="content">
    <div class="post">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href="" class="aligncenter"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class=""></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignleft"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignright"></a>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class=""></a></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
       
    </div>
</div>
 
</body>
</html>
14

Well, if I have to do it manually, probably the easiest approach would be to use your alignment CSS, then in wordpress, click on the advanced options of the image, remove the aligncenter class form the img, and add it to the link. That’s all on the same page.

see… that what i was wondering where in the process your img as obtaining its classes ( I envisioned some sweatshop with the data being entered by underpaid indentured servant ) … but yeah at some point a decision and that’s the point to apply the class. Anyway, I am glad I could help.

Now, I noticed in IE9 :hover doesn’t trigger quite right on the alignright, alignleft, and last image with no alignment class. However, it works perfectly fine on the aligncenter anchor. Code as follows:

so is this a new bug? the code I gave should not have affected align left or right? this is a stab in the dark, am at my old PPC mac right now and can test IE… but try this:

#content .post .alignleft , #content .post .alignright { zoom:1}

it could also be that IE doesn’t like your blank hrefs. make them href=“#”

15

It must have been there the whole time. I didn’t test IE9 until now.

the code I gave should not have affected align left or right? this is a stab in the dark, am at my old PPC mac right now and can test IE… but try this:

#content .post .alignleft , #content .post .alignright { zoom:1}

it could also be that IE doesn’t like your blank hrefs. make them href=“#”
Nope, it didn’t appear to be a haslayout issue, nor the blank href.

[edit]: I tested again, but this time using IETester. IE6 through IE9 treat it correctly. The actual IE9 browser doesn’t. Must be something odd with the installation of IE9 on this particular that workstation I was using.

16

Seems to work ok on my IE9.

17

It looks like latest centering technique breaks in IE6 and IE7. IE8 and IE9 seem fine.

18

You’ll need to do something like this for ie6 and 7.


[B]#content{overflow:hidden}[/B]
    /* alignment */
 #content .post a.aligncenter {
    float:left;
    margin-left:50%;
    margin-right:50%;
    position:relative;
[B]    display:inline;[/B]
}
[B]* html  #content .post a.aligncenter{
    margin-left:0;
    left:50%;
}[/B]
#content .post a.aligncenter img {
    float:left;
  [B]  left:-50%;
    position:relative;[/B]
}

Whole code:


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* reset */
    body {
    background-color:cyan;
    padding:0px;
    margin:0px;
    color:black;
    font-size:100.01%;
}
p {
    margin: .2em 0 .8em 0;
}
a img {
    border: none;
}
/* reset */
   
#content{overflow:hidden}
    /* alignment */
 #content .post a.aligncenter {
    float:left;
    margin-left:50%;
    margin-right:50%;
    position:relative;
    display:inline;
}
* html  #content .post a.aligncenter{
    margin-left:0;
    left:50%;
}
#content .post a.aligncenter img {
    float:left;
    left:-50%;
    position:relative;
}
#content .post .alignleft {
    float:left;
    margin:0 1em 1em 0;
}
#content .post .alignright {
    float:right;
    margin:0 0 1em 1em;
}
/* alignment */
   
   
    /* content */
    #content {
    width: 700px;
    background:white;
    margin: 25px auto 0px auto;
    padding: .8em;
}
#content .post img {
    border: 1px solid #DDDDDD;
    padding: 6px;
}
#content .post a:hover img {
    background-color:#EEEEEE;
    border-color: #BBBBBB;
}
#content .post p img, #content .post .wp-caption {
    margin-top: 0.4em;
    margin-bottom: 0.6em;
}
    /* content */
</style>
<body>
<div id="content">
    <div class="post">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href="" class="aligncenter"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class=""></a> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignleft"></a> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class="alignright"></a> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
        <p><a href=""><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Vincent_van_Gogh_Starry_Night.jpg/160px-Vincent_van_Gogh_Starry_Night.jpg" class=""></a></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div>
</div>
</body>
</html>
19

IE7 looks good, though I’ll test it in an actual browser later this evening: http://api.browsershots.org/png/original/95/952dc096438a5a788c184e6c8e0704b8.png

IE6 is doing something odd: http://api.browsershots.org/png/original/20/20f5b1844146a667cbf6a671d3bf02ce.png

[edit]: Confirmed that it doesn’t quite work in IE6. In IE7, the anchor overflows to the right of the image.

20

IE6 needs this extra rule to push the text away. I missed it out when I copied and pasted.


* html  #content .post a.aligncenter{
    margin-left:0;
[B]   margin-right:100%;[/B]
    left:50%;
}

Regarding the anchor overshooting the image a little then this happens in all my browsers and was happening in your code for post#13 so I thought you had probably decided to live with it :slight_smile: