Share » Forums » Setup & design » Strange "border" below images....

Strange "border" below images....

Strange "border" below images....

Friday 18 July 2003 4:52:34 am - 10 replies

Author Message

Alex Jones

Friday 18 July 2003 6:35:40 am

It could be a couple of different areas causing the problem. As you mentioned it could be the CSS or the table code, if not a combination of both. Are you able to post the page somewhere that we can look at the source code? That will allow us to locate the problem and help you out.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Adam Keaton

Monday 21 July 2003 2:12:02 pm

I am also having the same problem and have tried many different stylesheet configurations to no avail and would appreciate any help.

Thanks,
Kimball

Alex Jones

Monday 21 July 2003 2:17:52 pm

Kimball, are you able to post a link so we can take a look at the actual code? This will allow us the ability to track down the problem.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Bård Farstad

Monday 21 July 2003 2:21:03 pm

This normally happens in some browsers when there are whitespace, yes whitespace, between the image tag and a table cell.

E.g.
<table>
<tr>
<td>
<img src=".." />

</td>

</tr>
</table>

View source in the browser and check if you have some extra whitespace.

--bård

Documentation: http://ez.no/doc

Morten M

Tuesday 22 July 2003 8:03:47 am

thanks for the reply's... as far as I can see there are no whitespaces in the source code that should cause this border to appear...

*-- (i removed the code from this post after my problem was solved) --*

Cheers.
Morten.

Alex Jones

Tuesday 22 July 2003 8:19:00 am

Morton,

The space Bård mentioned includes general carriage returns. Try changing :
</tr>
<tr>
<td>
<img src="/design/demo/images/footer.gif" border="0" width="100%" height="15"/></a>
</td>
</tr>

to:
</tr><tr><td><img src="/design/demo/images/footer.gif" border="0" width="100%" height="15"/></a></td></tr>

This *might* fix the issue.

Also, remove the break tag between the </tr> and </table> at the end. There shouldn't be any markup between the two.

If there is any padding or margin spacing assigned to the "topmenu" class, it could also be causing the problem.

Hope this helps,

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Morten M

Wednesday 23 July 2003 4:36:59 am

Thanks alot Alex! Using this line:

</tr><tr><td><img src="/design/demo/images/footer.gif" border="0" width="100%" height="15"/></a></td></tr>

..did the trick! :-)

If i remove the <br> tag at the end, as you suggest, something strange happens... the entire table that contains my frontpage 'jumps' to the top of the screen leaving no space over the table... when the break tag is there (as it is now) the table (=the frontpage) stays nicely centered pretty much in the middle of the screen... so i'll just keep the break tag for now.. :-)

Thanks again!

Morten.

Alex Jones

Wednesday 23 July 2003 7:12:03 am

Glad to be of help, though the initial suggestion was from Bård. :) One note, the break tag could cause issues in some browsers. I don't know what browser and platform you are testing the design in, but I thought you should be aware. If you need help placing the table a certain amount of space from the top of the page, or another element, it can be done with some valid HTML and/or CSS. Let me know if this is the case and I'll see about sending you a snippet of code to adjust the spacing.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Tore Skobba

Tuesday 04 November 2003 3:52:02 am

HI Think I have solved it.. Orginal message follows, then my solution.

Hehe sorry for bringing life to such an old thread. But.. I am currently having the same problem.. My problem is that by using (note ingress is an picture and an image class):
{attribute_view_gui attribute=$node.data_map.ingress image_class=ingress} I do not have controll ower the whitespaces between <div class="image"><img src></div>. As such I have to instead use the following :

<img src={$node.data_map.ingress.content[original].full_path|ezroot}>

However, I would really like to use attribute_view_gui for design reasons.. Is that possible ? Have anyone had the same problems as I am having? Any solutions to spare?

Cheers
Tore

My ad hoc solution:
Edit "/design/standard/templates/content/datatype/view/ezimage.tpl", or override of course :). In the end of the file put the "{/let}{/default}{/section}" all in one line following closing tag of <img src..>. Or as below here:

<img src={$image.full_path|ezroot} width="{$image.width}" height="{$image.height}" {section show=$hspace}hspace="{$hspace}"{/section} {section show=$alignment}align="{$alignment}"{/section} border="{$border_size}" alt="{$image_content.alternative_text|wash(xhtml)}" />{/let}{/default}{/section}

Hmm I find myself spending most of my time learning about variations in how the various browsers threat HTML, and not acutally designing an new site.. Ouchhhhh. As such I am gonna use my development plan as a napkin at my next stop at McDonalds.

Cheers

Alex Jones

Tuesday 04 November 2003 6:21:33 am

The joy of Web design: constant surprises due to illogical browser rendering...

Glad to see you figured it out, and that you posted the answers for others to see. I recall seeing a request for a new wash attribute that would allow us to format the whitespace output by eZ publish which would be tremendously helpful for occasions such as this.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu