I have just installed an XOOPS site, and I'm trying to do a seemingly simple thing: create a border around an image.

I tried "img border=", "img margin=", "img style="border:", "img style="margin", and finally "span margin=". Nothing helps - the border just doesn't show. Looks like it conflicts with some CSSs set by XOOPS.

The site is athttp://gontmakher.com. There is an image on the front page, with no border ;(.

Thanks for any help,
Alex

try this code in css file:

img {border:1px solid #55331A;}

i think something like that work.

hey gsasha,

it would be great if css were so literal, but it is not.

you could use your graphics program to do this or you could edit your template news_...html. you would first have to clone your templates through system admin - template then edit the appropriate template. you might add something like this:

<div style="border: 1px solid #000; padding: 1px;" </div> here the padding will give the image a 1px whitespace or whatever your background color is around the image, just remove if you do not want this. the #000 is border color

this (news_item.html) is the template to edit:

<table cellpadding="0" cellspacing="0" class="item">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="98%">
<tbody>
<tr>
<td class="itemHead">
<span class="itemTitle"><{$story.title}></span>
</td>
</tr>
<tr>
<td class="itemInfo">
<{if $story.poster != ''}><span class="itemPoster"><{$lang_postedby}> <{$story.poster}></span><{/if}>
<span class="itemPostDate"><{$lang_on}> <{$story.posttime}></span> (<span class="itemStats"><{$story.hits}> <{$lang_reads}></span>)
</td>
</tr>
<tr>
<td><div class="itemBody">
<div style="border: 1px solid #000; padding: 1px;"><{$story.imglink}></div>
<p class="itemText"><{$story.text}></p>
</div>
</td>
</tr>
<tr>
<td class="itemFoot">
<span class="itemAdminLink"><{$story.adminlink}></span>
<span class="itemPermaLink"><{$story.morelink}></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

i did not have enough time to test, kind of shooting from the hip, so may need some fine tuning, but can help you out later in day.

you would have to go to sys admin - prferences and select the cloned set of templates and upadte.

Well, that's strange. I'll explain why.

The "style=" string in my page does work for some attributes (for example, it does react to float=right, and, strangely enough, to border=groove. Seems the only thing it ignores is "border=", "margin=", "padding=" and such).

I don't quite understand why it would work if I added the "padding" attribute in div.

<b>Or am I speaking complete BS?</b>

Thanks,
Alex

hey gsasha,

i assume your are referring to the image that appears with your news. please advise.

hey gsasha,

follow the link which illustrates a border with padding:

http://dcdezines.ca/modules/articles/article.php?articleID=3

in this example i have edited the template to put a border around other articles.

it would likey be much easier to use a graphics program to put a border around your image.

hey gsasha,

to further clarify, a margin defines the white space around an element's border, while padding refers to the white space within the border. also try to focus on the issue at hand as it is difficult to explain. also, there is a number of way to accomplish what you want to with css.

Right. I'm talking about the image that currently appears in the first news item on the front page ofhttp://gontmakher.com.

The point is, I *don't* want to show a visible border. I want to have an invisible border around the image, for which any of margin, padding or transparent border would do.

My problem is, the browser for some reason ignores the margin, padding and border properties (I tried IE, Mozilla and FireFox).

I checked the final HTML and CSS generated by XOOPS, and to my understanding, the border (both of margin, padding and border) should be there. But it isn't. However, there is a suspicious "border: 0" in one of the CSS's. I thought it might be the reason of the problem and that's why I'm asking for help here.

Now, I don't see why I should change the template - there could be multiple solutions, but first, there is a problem with the generated HTML/CSS content that I don't understand.

And all in all, it seems to me rather backward changing the image to make a border (and what if I later decide it to be 6 rather than 5 pixels wide...).

Hope I succeeded to explain myself better.
Thanks again,
Alex

Oh, right! I've found the reason for the problem.

I ran the page through a CSS validator (http://jigsaw.w3.org/css-validator), and it complained about margin etc. parameters that did not include dimensions.

My mistake was to assume that no dimensions should implicitly be interpreted as pixels, but apparently I was wrong. After adding "px" to the dimensions, everything is OK.

Ah, and now the CSS validator also complained about several "margin" commands in the xoops' default.css, which I think should be fixed as they are most certainly ignored by most browsers.