Format Problem + Template Tag Link Question

[two40]

hi all o/

I'm using the simple template slightly modified. I've got two issues I was hoping I can get help with. They both relate to the image navigation code. My php/css skill level is beginner.


1. Format problem

Please note the next image tag link @ http://ktnxbi.com/index.php?showimage=7 with Firefox.

It started doing that when I inserted the following code in the css:

#image-navigate {
background:#515151;
border:1px solid #aaa;
padding:20px;
height:15px;
width:50%;
margin:0px auto;
}

#image-navigate a {
padding:10px;
}

.image-previous {
float:left;
}

.image-fullsize {
float:center;/* coded added here -this is borken and i dont know why. the next link drops down. */
}

.image-next {
float:right;
}

As you can see I've added the .image-fullsize to center the fullsize tag link.

The image php code

<div id="image-navigate">
<span class="image-previous"><IMAGE_PREVIOUS_LINK></span>
<span class="image-fullsize"><FULLSIZE_LINK></span>
<span class="image-next"><IMAGE_NEXT_LINK></span>
</div>

From what I can see that's all there is to it. Can't seem to figure out why the Next link on the site is being dropped down slightly.


2.Template Tag Link

I've tried a variety of things to get the <IMAGE_PREVIOUS_LINK> tags to show as clickable images, much like a button. For some reason I couldn't get it to work. Any suggestions?


3. Internet Explorer [fixed]

Seem to be having issues with IE7 as well. The template switch images at the top of the page are not showing up on my live site using IE7. They do show up with Firefox and they do show up on my dev site. The code is the same. Cache cleared. I even reset IE7 to default specs and it's still playing up. Not sure if anyone can help me with this one but I thought I'd mention it. I'll have a play around and see if I can sort this one out. If there is something obvious that you've been through with IE7 please do let me know.

This problem is highly likely to do with my cheap hacking code work. All I did was add the template switchers like so:

<div id="navigation">
<h1><a href="index.php" title="Return to current image"><SITE_TITLE> - <SUB_TITLE></a></h1>
<span class="menu">
<a href="#" onclick="setActiveStyleSheet('bg1'); return false;" <img id="bg1" src="templates/simple/images/bg1.gif" name="bg1" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg2'); return false;" <img id="bg2" src="templates/simple/images/bg2.gif" name="bg2" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg3'); return false;" <img id="bg3" src="templates/simple/images/bg3.gif" name="bg3" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg4'); return false;" <img id="bg4" src="templates/simple/images/bg4.gif" name="bg4" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg5'); return false;" <img id="bg5" src="templates/simple/images/bg5.gif" name="bg5" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg6'); return false;" <img id="bg6" src="templates/simple/images/bg6.gif" name="bg6" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg7'); return false;" <img id="bg7" src="templates/simple/images/bg7.gif" name="bg7" border="0" alt="" /></a>
<a href="#" onclick="setActiveStyleSheet('bg8'); return false;" <img id="bg8" src="templates/simple/images/bg8.gif" name="bg8" border="0" alt="" /></a>
<a href="index.php" title="Return to Homepage">home</a> |
<a href="<SITE_BROWSELINK>" title="Browse">browse</a> |
<a href="http://blog.ktnxbi.com/" target="_blank">blog</a> |
<a href="index.php?x=about" title="About">about</a>
</span>
</div>

Cheers :)

[edit] Fixed problem 3. Was missing a > after return false;"

[Dennis]

Moved to design.

[dhdesign]

Item 1: Format problem

There is no float:center, it's either :left or :right. To center the fullsize link, change the css code for the fullsize link to read as follows:

.image-fullsize {
float: left;
}

Change the html code in the image_template file to read as follows:

<span class="image-fullsize" style="text-align: center;"><FULLSIZE_LINK></span>

Item 2. Template Tag Link

To have an image display instead of a text link, you will need to modify the PP core file where the html for that tag is built and change the code there. Just keep in mind that every time you upgrade to a new version, or if you would change themes and not want it as an image anymore, you will have to edit that core file again.

[two40]

Thank you very much for your help.

I've tried your suggestion for #1 but it doesn't work unfortunately. It leaves the text left aligned.

As for #2, it might not be worth the hassle so I'll leave that alone for now. Thanks :)

[dhdesign]

That should have worked, but since it didn't, try this:

Change the width in #image-navigate from 50% to 600px.

Add margin-left: 200px; to .image-fullsize.

By setting the width of #image-navigate from a relative size (%) to a fixed size (px), you will avoid having the full-size link shift around on different screen resolutions.

Let me know if this worked.

[two40]

It didn't work but I do like the fixed width :)

I think I'll just resort to placing the link in the image info box after the post date. It looks clean there anyway.

Thanks for your help.