General Support: CSS display problem

Having a hard time viewing your website formatting problem and don't want to make up a website on your server or change
domain name servers.

<p style="text-align:center"><img src="http://memorytrails.org/Horsing.jpg" alt="Horse Broke" /></p>

Exactly what is the problem with the image spacing? The thumbnails line up well and flow across the pages. The medium and large enlargements seem to behave as expected.

<p style="text-align:center"><img src="http://memorytrails.org/Horses.jpg" alt="Gena Warrington" /></p>

The header, navigation, body and footers appear OK in latest versions of Firefox, IE, Opera and Google Chrome on the Windows platform.

<img src="http://memorytrails.org/HorsePage.jpg" alt="Plogger Front Page" />

Unfortunately, I cannot reproduce your development environment to get down to the details of your whitespace/padding/margin problem, but it appears to me that the main.css script may be problematic.

You might get a better clue as to whats going on if you move the link to main.css in index.php so that it appears before ploggers default gallery.css and does not override the plogger default.

Also, and while I do not know what effect it might have, there is an illegal HTML close comment (-->) embedded in your main.css code at line 22.

Your comment got me thinking and I removed the link to the main.css file completely and uploaded this:

http://horsin-around.us.previewdns.com/Photos/index-no-css.php

As you can see, it still has the issue, so "gallery.css" must be the issue unless there is another css file plogger refers to.

Thanks,
Travis

Well done Travis - another beautiful theory destroyed by an ugly fact!

Unfortunately I've got to be away for the weekend. Will get back on Monday.

Hello Travis,

Your flexibility in holding up our discussions on this issue over the weekend is truly appreciated.

It gave me the time, after getting back, to review the underlying code that was associated with this problem in as much detail as the current browser security would allow.

Unfortunately, that was not enough for me to pin-point the problem, for a number of reasons.

At the top of the list is the problem that I see in your using HTML table structures to make up your website page layouts and, at the same time, using a CSS environment to enhance (or override) the presentations that the table required for it's idea of how the element should be presented.

I think that the table structures that are available in HTML were meant to display tabular data. Furthermore I believe that CSS cannot improve on this early HTML implementation of displaying tabular data. But I also believe in the current wisdom that CSS is intended to separate the presentation from the content.

If this is true, then I don't think it is in your best interest to present a web page layout in terms of a table structure, especially where vertical presentation elements are involved. That would not only result in an inflexible web page presentation, but will, almost certainly, result in incompatible presentations on the internet, especially in terms of the vertical spacing differences between table and CSS text presentations in html.

You might also find the recent W3C view about the table layouts useful: http://www.w3.org/TR/REC-html40/struct/objects.html#adef-align-IMG

My apologies for venting about the display problems you are experiencing. The rationalization was the result of being frustrated about not being able to reproduce this problem outside of your environment.

The fact that this problem works everywhere else outside of a plogger page is good reason not to change those things that work.

I can only suggest that you override the deprecated table vertical positioning elements with an in-line CSS style and adjust the vertical positioning. This will allow you a much more complete control of the logo pieces since you can impose negative margins and even invoke absolute positioning.