CMotion Image Gallery II

1) Script Title:
CMotion Image Gallery II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ongallery2.htm

3) Describe problem:
jscheuer1 wrote the vertical version of the script.
Images continuous in IE, even IE 6 but they are cuts in Firefox and other Gecko based browsers.
Try here my demo in both IE and Firefox on jolome.com
http://jolome.com/ultim/poetries/tryit.php

I can't see why exactly. If you use a transitional DOCTYPE, there will not be that problem. If you must use a strict DOCTYPE (I'm not sure why you would need to do this as your code isn't valid for a strict DOCTYPE), you can use css style to make alterations for non-IE browsers.

OK, I found out the problem, it isn't a bug with the script. It is a feature relating to how images are treated under a strict DOCTYPE (from quirksmode.org):

Quote:

---

experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn't be removed. The cause was that in strict mode <img /> is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn't have descender characters, so the space was never used, but it still had to be reserved.

The solution was to explicitly declare images block level elements: img {display: block}.

Nonetheless browser vendors, Mozilla especially, thought this was such a confusing situation that they introduced "almost strict mode". This was defined as strict mode, but with images continuing to be blocks, and not inline elements.

---

I also notice that your demo page, although it has a link to the stylesheet gallerystyle2.css - that stylesheet isn't on the server where indicated in the page's code. If you do still want to use strict mode, use the stylesheet and make this addition near the top (red):

Code:

---

#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
display:block;
}

---

And, remove the <br /> tags from the markup:

HTML Code:

---

<a href="#"><img  src="../images/trapped.jpg" width="337" height="392" border="1"></a>
<a href="#"><img  src="../images/trapped.jpg" border="1"></a>
<a href="#"><img  src="../images/trapped.jpg" border="1"></a>
<a href="#"><img  src="../images/trapped.jpg" border="1"></a>
<a href="#"><img  src="../images/trapped.jpg" border="1"></a>

---

My bad...
Thank you very much,

Nice piece of code, by the way....