[WITHDRAWN] Gallery and CSS
Posted: Sun Jan 15, 2012 6:02 am
EDIT - my client wants another way of displaying the content, a solution is no longer needed
I customized Gallery's AE-Gallery template to wvds-verhalen template (download XML here: http://frankspub.frankma.nl/cmsms/2012/ ... rhalen.xml).
The website uses jQuery on several occasions, therefore I deleted the call for jQuery from the Gallery template and put a call in the website's template <head> tag.
I tested in the latest versions of Firefox, Opera, Chrome, Safari and Internet Explorer, on a Win7 pc.
And CMSMS 1.10.3.
http://www.wilbertvandersteen.nl/cmsms/verhalen
In all browsers below the row of thumbnails extra space is rendered.
In Chrome and Safari the (jQuery) scroll bar is missing when entering the URL directly into the adress bar, but it does show up when visiting the page by clicking the menu item verhalen.
The page validates for HTML and for CSS3 (except some warnings and errors in the menu stylesheet: _float and _height properties).
Both problems don't occur when removing {$imgs} from the gallery template
(the borders of .ae-image-wrapper and .ae-thumbs will still be visible; set .ae-gallery .ae-image-wrapper to 700px height to get a scroll bar)
This suggests the problems are caused by {$imgs} and/or the .ae-thumb-list class (which is defined in the jquery.ae-gallery.js file of AE-Gallery template).
my questions
Why is that extra space at the bottom created and how do I get rid of it?
Why does the jQuery scroll bar not show up immediately in Chrome and Safari?
Frank
I customized Gallery's AE-Gallery template to wvds-verhalen template (download XML here: http://frankspub.frankma.nl/cmsms/2012/ ... rhalen.xml).
The website uses jQuery on several occasions, therefore I deleted the call for jQuery from the Gallery template and put a call in the website's template <head> tag.
I tested in the latest versions of Firefox, Opera, Chrome, Safari and Internet Explorer, on a Win7 pc.
And CMSMS 1.10.3.
http://www.wilbertvandersteen.nl/cmsms/verhalen
In all browsers below the row of thumbnails extra space is rendered.
In Chrome and Safari the (jQuery) scroll bar is missing when entering the URL directly into the adress bar, but it does show up when visiting the page by clicking the menu item verhalen.
The page validates for HTML and for CSS3 (except some warnings and errors in the menu stylesheet: _float and _height properties).
Both problems don't occur when removing {$imgs} from the gallery template
Code: Select all
<div class="ae-gallery">
<div class="ae-image-wrapper"></div>
<div class="ae-nav">
<div class="ae-thumbs">
<ul class="ae-thumb-list">
<!-- {$imgs} -->
</ul>
<!-- end .ae-thumbs --></div>
<!-- end .ae-nav --></div>
<!-- end .ae-gallery --></div>This suggests the problems are caused by {$imgs} and/or the .ae-thumb-list class (which is defined in the jquery.ae-gallery.js file of AE-Gallery template).
my questions
Why is that extra space at the bottom created and how do I get rid of it?
Why does the jQuery scroll bar not show up immediately in Chrome and Safari?
Frank