Hi,

I'm using the corporate theme, and noticed a problem with how it renders in FireFox. I created a custom block, and put some text in it and a photograph with left alignment. It looks fine in IE and Netscape. However, when I view it in Firefox, the photograph overlaps (crosses over) the bottom inner border of the block.

Has anyone experienced this? If so, how do I fix it?

Dave

UPDATE

I just noticed that this is not a problem specific to Firefox (as I previously thought). When I first posted about this problem, I didn't notice that the IE or Netscape windows were not maximized. When I maximize the width of both the IE and Netscape browser windows, the same overlapping problem occurs as with Firefox.

Thus, it seems there is some kind of CSS problem with the theme. When the browser window is maximized, the photograph in my custom block overlaps the inner bottom border of the block. However, when I shorten(drag in) the width of the browser window, the entire block lengthens and then the photograph stops overlapping.

Anyone know how to fix this problem? Thanks for any help.

Dave

Question:

Did you format the picture with bbcode(?) eg

or use a HTML tag eg

I've found HTML tags to work better than bbcodes...

Hi Chainsaw,

I formatted the photograph with HTML tags. Interestingly, the problem only occurs when the photograph is the final piece of content in a block. When I add some text after the photograph, there is no longer any overlapping.

I checked this out with the default theme too, and noticed the same problem (although it was not as bad as the other theme I used). Thus, I'm really not sure if this is related to the style.css code, related to code higher up somewhere, or a combination of both.

The simple solution is to never have a graphic or photograph being the final piece of content in a block. Although, this presents a design restriction that could be very limiting.

I may try some other themes, to deterimine whether this is a style.css problem or something else.

Dave

Well, I noticed this problem both in IE and FF when I posted this news article at my website. The picture had overlapped as well.

http://www.albanycc.org.nz/modules/news/article.php?storyid=4

Can you post your site? It happens some times like in news when the picture is bigger then the topic image.

Chainsaw,

Yes, your site is displaying a similar overlap. My only solution is to put text after the image, but this is a very restrictive solution. When I get some time, I'm going to upload some other themes, to see if the actual theme code is causing the problem.

----------------

Beejay,

My site is pretty much doing the same thing as Chainsaw's site.

Dave

UPDATE

Well, I did some experimenting, and the overlap problem only occurs when I set the align property in the tag to "Left". Although, it could do it with a right alignment too, but I didn't check that. When I set the alignment to "middle" or did not include the align property, there was no problem. However, I need to use the align property with a left setting.

My first solution was to add a line of text a few lines beyond the end of the original content, such as contact information or an email address link, etc. However, that really is not a good solution, since I'm forced to add stuff that really isn't necessary. Also, if someone's browser displays pages in very small fonts, then the problem may occur again, especially if the text shrinks so much that it is no longer rendered below the photograph. Not likely, but I wouldn't sleep well knowing that this could still happen in some unusual cases. First impressions count with new web visitors.

Anyway, I've come up with a much better solution, which many of you probably already know. However, I'm still fairly new to all of this, so it was an important discovery for me. My solution was to put the text and image into a simple HTML table, and insert the entire table into the block. Just remember to set the content type of the block to HTML. With the text, image, and align property embedded within the table, there is no overlapping.

It is a little more tedious this way, but when you have an image as the last rendered content in a block, it avoids the overlap problem. If you are not including an image or the image is not rendered at the end of the content, then you don't need to bother with an HTML table.

By the way, I did notice that using a table resolved some other overlap problems too. When the browser window is very narrow, I've noticed that block text sometimes overlaps the right border of the block. This does not happen when embedding tables in the blocks. I'm wondering if this takes care of some of the overlap problems, which occur in older browsers with many of the themes. I know that it is mainly a CSS issue, but it could be that this helps solve it. Although, I've not tested that possibility.

Dave