Ticket #1071 (closed defect: fixed)

Opened 13 years ago

Last modified 13 years ago

Cover images are not always displayed

Reported by: hans Owned by: hans
Priority: blocker Milestone:
Component: generic Version:
Keywords: Cc:
Time planned: 1h Time remaining:
Time spent: 4h

Description (last modified by hans) (diff)

Images are not displayed with Firefox when they are not in browser cache. When loading the page for the first time cover images are not displayed with Firefox. When the cover image is already in cache it will be displayed correctly.

This defect appears both on Windows and Mac.

http://lemill.org/trac/attachment/ticket/1071/defect_mozilla_no_images.png?format=raw

Attachments

defect_mozilla_no_images.png (67.1 KB) - added by hans 13 years ago.

Change History

Changed 13 years ago by hans

comment:1 Changed 13 years ago by hans

  • Description modified (diff)

comment:2 Changed 13 years ago by laszlo

  • Owner changed from anonymous to laszlo
  • Status changed from new to assigned
  • Time planned set to 1h

comment:3 Changed 13 years ago by laszlo

  • Owner laszlo deleted
  • Status changed from assigned to new
  • Time spent set to 4h

I've tried to use preload JavaScript?, but it haven't solved the problem. A have not any other idea to solve this, yet.

comment:4 Changed 13 years ago by tarmo

  • Priority changed from critical to blocker
  • Summary changed from Cover images are not displayed with Firefox when they are not in browser cache to Cover images are not always displayed

This needs to be fixed now. Anyone with CSS validators please take a moment to check out the pages and see what's wrong.

comment:5 Changed 13 years ago by tarmo

Right. If I have a <ul> without a class, the images are displayed. But when the ul is given the class "coverimages", images not in cache are no longer displayed. The CSS for ".coverimages" and all underneath it are really messy. Hans? Have fun...

comment:6 Changed 13 years ago by tarmo

  • Owner set to hans

OK, we decided to replace the UL css hack with a table. Hans will do this.

comment:7 Changed 13 years ago by hans

About the really messy CSS: unfortunately complex CSS layouts are that complicated, because different browsers understand CSS in a different way. This code is explained at http://www.brunildo.org/test/img_center.html and http://www.brunildo.org/test/ImgThumbIBL2b.html

display: -moz-inline-box; is the line that makes the CSS invalid.

If we do it with a table it would look like this:

<table border="0" cellpadding="0" cellspacing="4" width="550">
	<tr>
		<td class="coverimagecell">
		<a href="http://lemill.net/content/overview-of-lemill/view"><img
		src="http://lemill.net/content/overview-of-lemill/coverImage" alt="Overview of LeMill" /></a>
		</td>
		<td class="coverimagecell">
		<a href="http://lemill.net/content/tupograafia/view"><img
		src="http://lemill.net/content/tupograafia/coverImage" alt="Tüpograafia" /></a>
		</td>
		<td class="coverimagecell">
		<a href="http://lemill.net/content/introduction-what-is-new-media/view"><img
		src="http://lemill.net/content/introduction-what-is-new-media/coverImage" alt="Introduction: What is New Media?" /></a>
		</td>
	</tr>
	<tr>
		<td class="captioncell">
		<a href="http://lemill.net/content/overview-of-lemill/view">Overview of LeMill</a>
		</td>
		<td class="captioncell">
		<a href="http://lemill.net/content/tupograafia/view">Tüpograafia</a>
		</td>
		<td class="captioncell">
		<a href="http://lemill.net/content/introduction-what-is-new-media/view">Introduction: What is New Media?</a>
		</td>
	</tr>
</table>

CSS classes used in the table:

.coverimagecell {
	border: 1px solid #cccccc;
	width: 176px;
	height: 176px;
	text-align: center;
	}
	
.captioncell {
	text-align: center;
	}

Prototype: http://www.hanspoldoja.net/temp/2007-01-30-lemill/coverimages.html

Tested: Safari, IE7, Firefox 2

Can somebody integrate that code with LeMill? I do not have a working Zope/Plone/LeMill? in my machine at the moment and I will be offline until tomorrow evening...

comment:8 Changed 13 years ago by pjotr

Ok ... I'll try to make something for that.

comment:9 Changed 13 years ago by pjotr

(In [1317]) references #1071, still needs to be checked out by all the others and with Safari

comment:10 Changed 13 years ago by pjotr

  • Status changed from new to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.