right click on the button, inspect element in fireforx and we see <div class=“close-btn” title=“Close”>.
this button is both close window and return to index
On that page … refreshed several times, emptied cache, visited source code and generated source code …
… but still the button is not there (Firefox, Chrome) … 
- Do you see the button in a preview of some webdesign program (or CMS), or real online?
- And if you see the button online: which device (desktop, laptop, mobile)?
- Which operation system?
- Which browser, and which browser version?
Ah, I see him!!! 
In Internet Explorer 11 under Windows 7. (then the css of post #16 should help)
But not in Chrome, Firefox, Opera or Safari under Win-7.
I suspect the AJAX-call is IE-only, but I’m not an AJAX expert.
There is definately something wonky going on. It seems like any deeper link doesn’t show the close button (really a back to home) at first, refresh or otherwise.
But if you go to http://www.jorgemonedero.com/blog/ and click on any image then it will be there.
Tested using IE, Firefox, Opera, Chrome and Safari - Win 7 - same behavior for all of them.
Seems to me the javascript bug should be worked out before getting after the CSS
Odd; I am on mac looking on firefox, safari, chrome and opera and I can see the button.
Also on PC firefox and internet explorer.
Does anyone know how to move that button to the bottom alongside artist name without it being obscured because it’s hitting the edge of the containing div that has a class of “slider-image”
I have just realised that the button only appears if one goes to http://www.jorgemonedero.com/blog/ first and then click on any of the photopgraphs (portfolios)
Yes, that is what Mittineague said in post #23.
And indeed, in this way I can see the close-button too. 
- If a gallery page is called directly by URL, the button doesn’t appear.
- And then after a refresh: still nothing.
- The button is only visible.when coming from the home page to a gallery page,
In the generated source code it is clear that there are big differences in what is presented:
[CENTER]
button is visible when coming from the home page[/CENTER]
But:
[CENTER]
there is no button when a page is called directly[/CENTER]
Another difference: in the showed-button case, the <div id=“grid-gallery”> is filled with the whole gallery! In a page without the close button it is empty. - On screen you don’t see this difference, for in both cases the surrounding #gallery-container is set to {display: none}.
But there are more strange things:
In the <head> of a gallery page are parts of the content:
<head>
<meta ...>
<title>...</title>
...
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
...
</head>
<body>
And the same four-in-hand is occurring after the </html> (!):
</body>
</html>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
Both are wrong, the 4 belong (only once) in the <body> section, and no wonder the html-validator is [U]protesting[/U]. 
I’m afraid there is something wrong with the used “PEXETO GridGallery” plug-in for Wordpress: 
- an error in the gallery script,
- and/or not good implemented.
=====
Workaround possible!
Anyway, with javascript and a bit of css we can make a short circuit. Here is the trick:
- We don’t change the position of the close-button (what is rather impossible if there is no button!).
- We always create a new close button on the desired position.
- If there was already a close button on the page (under the social media links), we delete the old button.
<script type="text/javascript">
/* ===== replacing/creating the close button ===== */
var allDiv=document.getElementsByTagName('div');
for (var i=0; i<allDiv.length; i++){
// insert new close button in the caption line:
if (allDiv[i].getAttribute('class')=="item-title" || allDiv[i].getAttribute('className')=="item-title"){
allDiv[i].innerHTML='<a href="http://www.jorgemonedero.com/blog/" title="Close">'
+'<img id="closebutton" src="http://www.jorgemonedero.com/blog/wp-content/themes/expression/images/close-button.png" alt="" title="Close"></a>'
+allDiv[i].innerHTML;
}
// adapt width of the caption line:
if (allDiv[i].getAttribute('class')=="preview-content"){
allDiv[i].style.width=allDiv[i].offsetWidth+60+"px";
}
}
</script>
This script can be added in the bottom of the page, just before the </body></html> tag.
- Or a link over there to the script in an external closebutton.js file.
In the <head> of the document, just before the </head>, can be added the accompanying css:
<style type="text/css">
.close-btn { /* close button in old position (if close button is existing) */
display: none !important;
}
#closebutton { /* new close button */
width: 27px;
height: 27px;
margin: 0 30px 0 0;
padding: 0;
vertical-align: middle;
opacity: .5 !important;
transition: opacity .35s ease-in-out;
}
#closebutton:hover,
#closebutton:focus {
opacity: 1 !important;
}
</style>
- Or it can be added in an existing stylesheet.
Test: [U]test-close-button-position-script.htm[/U]
- Tested in Firefox, Chrome, Opera, Safari-Win, IE7, IE11 (so must be good in IE7+).
- Refreshing allowed.
- The source code is the generated source code of a page with the button, displayed on desktop.
- Resizing the page is dependent of the AJAX, not working over here without the CMS; so on smaller windows / devices the rendering isn’t optimal (but the button has to be on the right place).
Your a genius. thanks so much Francky. Have a god weekend
regards
Garry
Hi Francky,
Please excuse my ignorance but I haven’t got any HTML pages;
The gallery pages are generated/sit in the “single-portfolio.php” (for example: single-portfolio postid-160).
You say add the javascript to the bottom of the page before the </body></html> tag…
but where as I haven’t got any html pages?
Then add the html code just before the </head> …. again, I haven’t got any html pages.
So basically where do I add all youre beautiful code as regards my wordpress site?
Regards
Garry
@indigojones666
Hi Garry,
I’m afraid I have to repeat: "Please excuse my ignorance but " … Wordpress and the WP-plugin’s are things I don’t know much about.
- Extra css:
Then for the extra css you have to discover how you can make a “custom.css”, and drop the extra button-css in that file. *) - Extra javascript:
If the “single-portfolio.php” page has the closing tags </body></html>, you can drop the extra button-javascript over there (just before the </body></html>).
If the closing tags </body></html> are not in the “single-portfolio.php” **), the CMS is making the </body></html> in some other php-file in the Expression theme of the CMS-system.
- Then for the extra javascript you have to discover in which php file is added the script-link:
html <script type="text/javascript" src="http://www.jorgemonedero.com/blog/wp-includes/js/comment-reply.min.js?ver=3.7.1"></script>
- Then you can add the extra js just under that:
html <script type="text/javascript" src="http://www.jorgemonedero.com/blog/wp-includes/js/comment-reply.min.js?ver=3.7.1"></script> <script type="text/javascript"> /* ===== replacing/creating the close button ===== */ var allDiv=document.getElementsByTagName('div'); for (var i=0; i<allDiv.length; i++){ // insert new close button in the caption line: if (allDiv[i].getAttribute('class')=="item-title" || allDiv[i].getAttribute('className')=="item-title"){ allDiv[i].innerHTML='<a href="http://www.jorgemonedero.com/blog/" title="Close">' +'<img id="closebutton" src="http://www.jorgemonedero.com/blog/wp-content/themes/expression/images/close-button.png" alt="" title="Close"></a>' +allDiv[i].innerHTML; } // adapt width of the caption line: if (allDiv[i].getAttribute('class')=="preview-content"){ allDiv[i].style.width=allDiv[i].offsetWidth+60+"px"; } } </script>
If you get problems with this, I should suggest you post a new question in [U]the Wordpress part of the forum[/U], for this is not “Javascript & jQuery” anymore.
There the WP-specialists are visiting the posts.
Good luck!
*) You can also add the button-css in the end of an existing .css file, but then the extra code will be deleted at a system-update of the Expression theme. - At a system-update the custom.css stays untouched.
**) We cannot see this online, for the P of PHP is (server-side) Preprocessing; we can only see the html-code results, not the php input code, which is somewhere in the WP-dashboard.
Thanks Francky