I have an element on this web page I'm developing where I need my text to conform to
the width of an image above it - whose width will always be different - think of captions. I have found numerous references to using a 1px table to force this width sizing behaviour. I am having problems, though with Safari and Chrome "seeing" this instruction -
the text ends up as a marginally sized text box sitting behind
the image.
The problem, as I see it, has to do with
the text and images sitting in div's nested within
the table. I need
the images to sit in a div because of some jquery script I'm using called cycle, which turns a group of images into a slideshow.
The problem may have something to do with
the script as well. In any case, I have tried a seeming infinite number of combination of floating left and clearing left on all all
the divs, changing their positions and widths...nothing works. Anyone have any clues about how to broach this one?
EDIT 1: ok, should I be editing my post or responding with answers?
here's
the url to see
the problem I am having - http://friedmanstudios.ca/webdev/test8.html
and
the code:
<div id="content" class="boxes">
<table>
<tr>
<td >
<div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div>
<div id="cycleCtrl">
<div id="prev" class="pager"><a href="#">< Prev</a> </div>
<div id="next" class="pager"><a href="#">Next ></a></div>
<div id="pagerNav" class="pager"></div>
</div>
<div id="descController">
<img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for
the Arts </span> <br />
<div id="desc"> In
the past eight years...
</div>
</div></td>
<td width="90%"><!--push col 1 back--></td>
</tr>
</table>
and
the styles:
#content {
position: absolute;
top: 250px;
left: 275px;
float: left;
clear: both;
}
content table {
float: left;
width: 1px;
}
imageFrame {
position: relative;
float: left;
clear: left;
width: inherit;
}
desc {
position: relative;
clear: left;
float: left;
}
descController {
position:relative;
padding-top:5px;
padding-bottom:10px;
clear: left;
float: left;
}
descController div {
height:0;
overflow:hidden;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
padding-top:10px;
margin-top: 10px;
word-spacing: 0em;
line-height: 16px;
font-size: 12px;
position: relative;
float: left;
clear: left;
}
