Cutenews Images Aren't Flush With Border

[Misanthrope 0]

When I upload images to my site via Cutenews, I notice they don't align flush with either the left or right border. They seem to be off by just a pixel or two and I don't know how to fix it. This is a recent phenomenon and wasn't a problem before the cpanel upgrade.

Here's an example:
http://forums.xisto.com/no_longer_exists/
Take a look at the "It's Friday....So What?" news entry, and note how the image is not flush with the left border. Then scroll down to the Willie Nelson entry and you'll see images aren't flush on the right either. How do I remedy this?

[Saint_Michael 3]

Although I haven't worked in cute news in years, but I would have to say that you have to mess around with your templates coding, I did a view source code, which I doubt would show the problem, but you might have to remove the padding, the text align to left instead of justify and that might fix it.

<div style="border-top: 1px solid rgb(211, 211, 211); padding: 3px; text-align: justify; margin-top: 3px; margin-bottom: 5px;">

[jlhaslip 4]

Look in your CSS file for the settings of the div #content and also the class .content.

#content img {												 // andreas01.css (line 147)background:#CCCCCC none repeat scroll 0 0;border:4px solid #F0F0F0;display:inline;padding:1px;}.content img {												 // andreas01.css (line 248)margin-left:4px;margin-right:4px;}

Change the margin/padding settings to suit.

[Misanthrope 0]

Well, I tried the Cutenews template alterations first and unfortunately that didn't work. Then I looked at this:

Look in your CSS file for the settings of the div #content and also the class .content.CODE
#content img { // andreas01.css (line 147)
background:#CCCCCC none repeat scroll 0 0;
border:4px solid #F0F0F0;
display:inline;
padding:1px;
}
.content img { // andreas01.css (line 248)
margin-left:4px;
margin-right:4px;
}
Change the margin/padding settings to suit.

I tried messing around with the settings at line 147 and 248 and that didn't work either. In line 248, I tried changing the margin to a lower px which made images slightly more flush, but then there was no space between the image and text.

Are there other specific lines in the CSS file I need to alter? If so, which ones? Why would the cpanel upgrade have affected Cutenews like this?

[jlhaslip 4]

Why would the cpanel upgrade have affected Cutenews like this?

I doubt very much that this is a Server Upgrade issue. The Server simply supplies the html and CSS. Your Browser interprets the supplied coding and presents it to you. Have you changed or upgraded Browsers lately? Or upgraded Cutenews?

[Misanthrope 0]

I doubt very much that this is a Server Upgrade issue. The Server simply supplies the html and CSS. Your Browser interprets the supplied coding and presents it to you. Have you changed or upgraded Browsers lately? Or upgraded Cutenews?

Are you saying you can't view the problem from your computer? I'm using the same browser I did then (Firefox). Of course, it updates itself as a matter of course. I haven't upgraded Cutenews because the current version is bad enough. I don't remember when but there were a few times that Trap sites went down following the upgrade issue. As a result of one of those occurances my Cutenews was altered and looked like crap. BuffaloHELP witnessed the changes at my site from his end, using Explorer and Firefox, I think. He was able to re-center my text, and told me how restore permissions so I could resume normal editing. Now if I can get the images to behave like they used to I'll be a happy camper.

[Saint_Michael 3]

No haslip is saying that cpanel has nothing to do with the changes to cutenews, of course with the lose of the data way back when, odds are it had restored to an older version before making the changes. As for the actual changes haslip is refering to the fact we would have to look at the admin panel to cutenews in order to fix or see the changes, because if you do view source we are only going to see the html that was generated by cutenews from the templates that auto-generate the code.

so basically we need to look at the source code to the template you are using to display your posts and what not. From the looks of it though, you have to remove any reference in your css file that came with the template that has to do with images.

#bcontent img{padding:1px;display:inline;background:#cccccc;color:#303030;border:4px solid #f0f0f0;}/*end results page bigger*/

reduce the padding to 0 and also try to find that div I mentioned early one of the cute news templates and reduce the padding to 0.

[Misanthrope 0]

reduce the padding to 0 and also try to find that div I mentioned early one of the cute news templates and reduce the padding to 0.

Thanks. That worked for aligning the images flush with the left and right borders. The problem now is I have no space between the image and text. I'd like to have about 4px between them on all sides that border text as well as on top. I also notice something odd. On the first post (Friday), there's no space between the top line and the image, but on the next post, there is. Weird and annoying.

Here is the Cutenews template for Active News:

<div class="content"> <div style="width:455px; margin-bottom:30px;"><div><b><font style="font-family:Verdana; font-size:13px; color:#273C4F">{title}</b></font></b></div><div style="text-align:justify; padding:0px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{short-story}</font></div><div style="float: left;"></font>[full-link]Read more [/full-link]</font><b> </div>

Let me know if this is the correct code ya'll need to look at....

[jlhaslip 4]

Willie Nelson's img should be as follows:

<img border="0" alt="" src="http://forums.xisto.com/no_longer_exists/; class="right" style="margin-left: 10px;"/>

The class=right floats it right and the in-line style for margin-left overrides the #content and .content since it is the closest to the element.
The images that are on the opposite side of the page should be class="left" and margin-right: 10px; as their inline styling.
The left and right classes are already defined in the CSS for the anrdeas template.

The id on the div which contains the image is overriding the margins set in the class, as per the w3c specificity rules, so the margin need to be declared inline.
You might also try adding the following to your CSS file:

img#content.left { float: left; margin-right: 10px; } and \img#content.right { float: right; margin-left: 10px; }

... that might work, too.

Untested due to limitations of the tools I am using. I would need to download the files and set up a test case, which I simply do not have time for at the moment.

[Misanthrope 0]

Thanks for the assistance you two. I think with your all help and suggestions I finally got the page looking more the way it did before the changeover. Yipeee! Now I can get back to focusing on writing silly stuff...

[Saint_Michael 3]

WOOT!! glad we were able to fix the problem without the need to get into cutenews and mess around with everything just to get it right . A gig suggestion would be to do a full back up of your site, can't remember if you can do a cute news backup or not, but if you can though do that to save your settings misa.

Edited October 15, 2008 by Saint_Michael (see edit history)