image_width tag

[unseen]

okay, so i'm making a new template because i really love the <IMAGE_WIDTH> tag and the template i'm using now is not compatible with IE. i've tried putting that tag everywhere and no matter what, it won't change the width of the image info. here is what i have in my CSS:

#image-info {
color: #656565;
font:10px verdana, arial, helvetica, sans-serif;
line-height: 170%;
text-align: justify;
border-bottom:1px dotted #4e94a5;
}
#image-navigation {
color: #656565;
font:10px verdana, arial, helvetica, sans-serif;
line-height: 170%;
text-align: justify;
border-bottom:1px dotted #4e94a5;
}

and this is what i have in my image_template:

<div id="image-info">
<span class='headline'><IMAGE_TITLE></span>
<IMAGE_NOTES>
<IMAGE_DATETIME> - <IMAGE_COMMENTS_NUMBER> comments. <IMAGE_CATEGORY><p />
<EXIF_CAMERA_MODEL><br />
<EXIF_EXPOSURE_TIME> <EXIF_APERTURE> <EXIF_FOCAL_LENGTH> <EXIF_FLASH> <EXIF_ISO>
</div>

<div id="image-navigation">
<IMAGE_PREVIOUS_LINK>
<a href="index.php">Current</a>
<IMAGE_NEXT_LINK>
&nbsp;&nbsp;&nbsp;
<SITE_PHOTONUMBER> photos | <ADVNCD_SITE_VISITORNUMBER> visitors
&nbsp;&nbsp;&nbsp;
<a href="index.php?showimage=<IMAGE_ID>">Permalink</a>
&nbsp;&nbsp;&nbsp;
<a href="<SITE_BROWSELINK>">Browse Archive</a>
</div>

now i'm sure i'm missing something obvious but i'm not that great at css so i'm mostly guessing at things. if you can help me out though that would be great. thanks :]

[Joe[y]+]

change <div id="image-info"> to <div id="image-info" style="width:<IMAGE_WIDTH>px;">

[unseen]

i knew it was something with the div id, but i wasn't sure what i was missing. thanks so much!

I do not see how and where you set the image in your template:

do it like this here and you will have the image correct:

<img  src="images/<IMAGE_NAME>" 
width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" 
alt="<IMAGE_TITLE>" 
title="<IMAGE_TITLE>" />

so you have the image in the correct width


If you want to set the image in a predefined DIV which correlates to the image-width, you must set the CSS in image_template.html, because otherwise the PixelPost-TAG will not be interpreted

<img  
id='the_image" 
src="images/<IMAGE_NAME>" 
width="<IMAGE_WIDTH>" 
height="<IMAGE_HEIGHT>" 
alt="<IMAGE_TITLE>" 
title="<IMAGE_TITLE>" />

and the css in the same HTML-File:

<style type="text/css">
<!--
 the_image {width:<IMAGE_WIDTH>px;margin:20px;} 
-->
</style>

does this help?

[unseen]

actually i wasn't trying to resize the image, i wanted the image info to be the same width as the image, like joey was talking about in the "idea for template makers" thread. i appreciate it though, thanks!

yes, that was what I told you: use the image-width-tag for the image-div or image-span or whatever CSS-element and the image will not be resized!