Could you provide a url that we can view how this displays? I thought IE7 works fine with width: auto and IE6 implements width: 100%.
You might try adding something like _width:10px; and see if that works. On Jul 16, 5:19 am, Gordon <[email protected]> wrote: > I have an image I want to annotate with markers. I'm doing this by > putting the image in a position: relative container along with a list, > and making all the list items position absolute. > > Here's my CSS: > > .helpImageWrap { > text-align: center;} > > .helpImage { > width: auto; > position: relative; > display: inline-block; > margin: 0; > padding: 0; > background: green;} > > .helpImage img { > border: solid 1px black; > margin: 0; > padding: 0;} > > .helpImage ol { > list-style: none; > list-style-position: inside; > margin: 0; > padding: 0; > line-height: 0; > text-align: left; > color: white; > font-size: 19px; > font-weight: 900; > display: block; > width: 0;} > > .helpImage ol li { > line-height:normal; > position: absolute; > display: block; > background-repeat: no-repeat; > background-position: top left; > margin: 0; > padding: 0;} > > .helpImage ol li span { > display: block;} > > .helpImage ol li.pointLeft, .helpImage ol li.pointRight { > width: 28px; > height: 23px;} > > .helpImage ol li.pointUp, .helpImage ol li.pointDown { > width: 23px; > height: 28px;} > > .helpImage ol li.pointLeft { > background-image: url(ui/pointers/point_left.png);} > > .helpImage ol li.pointRight { > background-image: url(ui/pointers/point_right.png);} > > .helpImage ol li.pointUp { > background-image: url(ui/pointers/point_up.png);} > > .helpImage ol li.pointDown { > background-image: url(ui/pointers/point_down.png);} > > .helpImage ol li.pointLeft span { > margin: 3px 0 0 11px; > > } > > (background: green is there so I can see what the container width is > doing) > > And here's my HTML: > > <div class="helpImageWrap"> > <div class="helpImage"><img src="../ui/browser/browser.png" > width="619" height="441" alt="The CMS Main Brouser Window" /> > <ol> > <li class="pointLeft" style="top: 5px; left: 266px;"><span>1</ > span></li> > <li class="pointLeft" style="top: 18px; left: 153px;"><span>2</ > span></li> > <li class="pointLeft" style="top: 49px; left: 108px;"><span>3</ > span></li> > <li class="pointLeft" style="top: 268px; left: 108px;"><span>4</ > span></li> > <li class="pointLeft" style="top: 72px; left: 554px;"><span>5</ > span></li> > <li class="pointLeft" style="top: 107px; left: 429px;"><span>6</ > span></li> > <li class="pointLeft" style="top: 280px; left: 383px;"><span>7</ > span></li> > </ol> > </div> > </div> > > This works fine ins FireFox, Safari, Chrome, Opera and IE8, but it > breaks in IE7, because the container gets a width of 100%, regardless > of the width:auto setting. > > I could explicitly encode a width, but this has to work with lots of > images of different sizes. I tried setting width: 0 and letting IE > push the container size out as boxes in IE expand if they're too small > (against spec). That put the markers back in the correct place > relative to the image, but now the image's left hand edge was at the > centre of the page, breaking the layout again. > > I suppose I could add a javascript for IE that explicitly sets the > container's width to match its contained image, but that's not an > elegant solution, would cause the page to redraw when the script runs, > and would not work at all with javascript turned off. I'm a firm > believer in not using JS for layout. If anyone can help with a better > idea than that, I'd really appreciate the feedback! -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
