×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Unknown style tag 10px bigger than image - ugly margin

thread1716-1519066

Unknown style tag 10px bigger than image - ugly margin

Unknown style tag 10px bigger than image - ugly margin

(OP)
Afternoon,

I have finally loaded WP 2.7 on my server and now starting the long process of migration. However I've an issue that I also had with 2.6 and it's regarding images.


You can see what I'm dealing with at the moment by going here:

http://www.followtheboat.com/index.php/2002/05/11/a-new-post/

You can see that both my left aligned and right-aligned images have an extra 10px added to the right, or, rather, the container is 10px bigger and the image is forced top-left. When I look at the code I can see that the image style is set to 210px when the image itself is 200px. Here is the CSS for all my images, starting with the code for the align left and align right images that are affected:

CODE

.wp-caption.alignright {background-color: #443713;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF; margin-left:15px; border: thin solid #443713;}
.wp-caption.alignleft  {background-color: #443713;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF;    margin-right:15px; border: thin solid #443713;}
/* CURRENT IMAGE*/
img.alignright {float:right;margin:0 0 1em 1em;    border: thin solid #443713;margin:5px;}
img.alignleft {float:left;margin:0 1em 1em 0;border: medium solid #443713; margin:5px;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;border: thin solid #443713;margin:5px;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0; border: medium solid #6d5820;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;border: medium solid #6d5820;}
/*THUMBNAIL IMAGE*/
.imgtfe {border: medium solid #443713;}
/* OTHER IMAGES*/
.ranimagecontainer {width:600px; float:left; text-align:center;border: thin double #6d5821; background-color:#443713;}
.ranimage {position: relative; background: url(images/rlogimage.gif) no-repeat left bottom; z-index:5; background-repeat no-repeat; height:60px;}
.picleft{background-color: #453713;border: thin solid #7c6426;padding: 5px;margin-right:15px;}
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; border: medium solid #FF0000;}

If anyone could help I'd be really grateful as this is the last major annoyance I have to deal with before I started migrating my webiste.

Thank you!  

RE: Unknown style tag 10px bigger than image - ugly margin

if you have a look at the source code, there is a div around the image and the caption that has an inline style set with a width attribute of 210px.  it looks to me as though this is the issue.

you have two potential fixes available.

1, go remove the offending style attribute from the divs
2. add this to the .wp-caption.alignright and left css

CODE

width: 200px !important;

this still leaves the 1px brown border around the image, of course.

or have i missed the point?

RE: Unknown style tag 10px bigger than image - ugly margin

(OP)
Hi J,

Er, 'fraid to admit it but you have this time. I didn't create the attribute of that style=210px, it's done on the fly by WP I think; and if I add a defined width then I can only use that class for an image that is 200px wide. The width of my images that use this class is completely varied.

My problem is this style attribute. I've no idea why it is creating a style of 210px width or where it comes from.

Difficult to find it without posting up my entire CSS sheet (wouldn't want to do that on this forum but of course you can see it in the page code) but got any tips on HOW to search for this tag or WHAT I should be looking for?

RE: Unknown style tag 10px bigger than image - ugly margin

i have your style sheet.  that's not the problem.

the solution is as I posted. from an html or css point of view.

from the WP point of view, i will need to look into how the images are being generated and inserted.  I assume you are using the flash media library?

RE: Unknown style tag 10px bigger than image - ugly margin

(OP)
Yep. No image plug-ins, just the standard 2.7 flash upload feature.

RE: Unknown style tag 10px bigger than image - ugly margin

if you upload and insert an image into the code, and switch into html view, do you see the style attribute for width being 10px bigger in the div than the image?  on my systems the width values are identical.

RE: Unknown style tag 10px bigger than image - ugly margin

scrap that.  i'm getting the same behaviour now. one step closer to a solution.

RE: Unknown style tag 10px bigger than image - ugly margin

ok. found the problem. and it's silly.

bunch of solutions.

1. centre everything.  add text-align:center !important; to the alignright/left css  this at least centres things and makes the border look neater.

2. hack the wp-core.  edit line 580 of wp-includes/media.php and change the reference from 10 to 0

3. use a plugin to create the same effect as item 2. the plugin is pretty simple. i have not tested this (really) but it should work... remember to do the normal thing of uploading to wp-plugins and enabling.  feel free to shove in a directory or just in the wp-plugin dir itself. the name of the file does not matter so long as it is .php and unique.

CODE

<?php
/**
 * @package FixImageMargins
 * @author Justin Adie
 * @version 0.1.0
 */
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: http://rathercurious.net
*/
class fixImageMargins{
    public $xs = 0; //change this to change the amount of extra spacing
    
    public function _construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme', 10, 2));
    }
    public function fixme($attr, $content){
    
        extract(shortcode_atts(array(
                'id'    => '',
                'align'    => 'alignnone',
                'width'    => '',
                'caption' => ''
            ), $attr));
        
        if ( 1 > (int) $width || empty($caption) ) {
            return $content;
        }
    
        if ( $id ) $id = 'id="' . $id . '" ';

    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
    . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
}
$fixImageMargins = new fixImageMargins();


?>

RE: Unknown style tag 10px bigger than image - ugly margin

(OP)
Justin, you are a genius. I can't believe you have gone to all this trouble to sort this out, I really appreciate it.

I tried the plug-in first, out of curiosity, though that didn't appear to work so I went for option two and changed the code (must make a note to keep an eye out for it when installing future upgrades). I'm curious, what is this !important hack you are using? I've not seen this before.

I'm very excited about this as today was the first day of migration and this problem was my last one BIG annoyance that was bugging me. Seriously, you've made my day.

Sincere thanks.
 

RE: Unknown style tag 10px bigger than image - ugly margin

sorry. the plugin is def the right answer but i made a few schoolboy errors.  this should work for you

CODE

<?php
/**
 * @package FixImageMargins
 * @author Justin Adie
 * @version 0.1.0
 */
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: http://rathercurious.net
*/
class fixImageMargins{
    public $xs = 0; //change this to change the amount of extra spacing
    
    public function __construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme', 10, 3));
    }
    public function fixme($x=null, $attr, $content){
    
        extract(shortcode_atts(array(
                'id'    => '',
                'align'    => 'alignnone',
                'width'    => '',
                'caption' => ''
            ), $attr));
        
        if ( 1 > (int) $width || empty($caption) ) {
            return $content;
        }
    
        if ( $id ) $id = 'id="' . $id . '" ';

    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
    . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
}
$fixImageMargins = new fixImageMargins();


?>

RE: Unknown style tag 10px bigger than image - ugly margin

(OP)
Getting an error:

Quote:

Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'Array' was given in E:\domains\f\followtheboat.com\user\htdocs\wp-includes\plugin.php on line 166

I've left it up on http://www.followtheboat.com/index.php for you to see...

RE: Unknown style tag 10px bigger than image - ugly margin

my fault again, probably too tired.  missed a bracket.

change the __construct method as shown

CODE

public function __construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
    }

RE: Unknown style tag 10px bigger than image - ugly margin

(OP)
Spot on. Once again ;)

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close