Prev: Image "Anchor" ... What is the best option?
Next: Styling a table column
From: Gordon on 16 Jul 2010 07:18
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!
From: BootNic on 16 Jul 2010 10:46
On Fri, 16 Jul 2010 04:18:30 -0700 (PDT)
Gordon <grj.mcvey(a)googlemail.com> 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:

[snip]

> .helpImage {
> width: auto;
> position: relative;
> display: inline-block;
> margin: 0;
> padding: 0;
> background: green;
> }

For block elements in IE 7 to emulate inline-block, use display:inline;
zoom:1;

<!--[if IE 7]>
<style type="text/css">
..helpImage {
display:inline;
zoom:1;
}
</style>
<![endif]-->

[snip]




--
BootNic Fri Jul 16, 2010 10:46 am
Nothing is stronger than habit.
*Ovid*
From: Gordon on 16 Jul 2010 11:16
On Jul 16, 3:46 pm, BootNic <bootnic.bou...(a)gmail.com> wrote:
> For block elements in IE 7 to emulate inline-block, use display:inline;
> zoom:1;

You, sir, are a scholar and a gentlemen. That worked perfectly,
thanks.
 | 
Pages: 1
Prev: Image "Anchor" ... What is the best option?
Next: Styling a table column