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;
}
