Daniel said:
because IE doesn't handle SVG natively, I have created an alternate HTML
output format for makeppgraph. I have thumbnails of 200px on the longer
side, so there is enough space to put a little text for the alternate
link on top of the img. The way I have implemented it, with two little
css classes works nicely in all browsers except IE6 (haven't got access
to 7).
I've tried z-index, "* html * .pict" etc., all to no avail. Could
somebody please look at
http://makepp.sourceforge.net/gallery/ and tell
me how to get it to work in all browsers.
I don't believe I have a solution to your problem, but maybe some of
this (mostly debugging advice but with some babbling guesswork) will help.
Step One is always to validate the code. You may be amazed to find the
report "Failed validation, 162 Errors" when validating your markup at
http://validator.w3.org/ . Fortunately, the problems are easy to fix
(you may be amused to see what they are.)
Validate CSS at
http://jigsaw.w3.org/css-validator/
The URL is to your complete page. We only need a URL to a reduced form
of the page which still exhibits the problem, so a page with the code
<h2 id="suffixes">Suffixes
<span class="pict">
<a href="suf.svg">
<img src="suf.gif" border="0" height="108" width="200">
</a>
<br />
<a href="suf.html" class="bluebg">HTML variant</a>
</span>
</h2>
(within <body> etc., incl. the relevant CSS, which for this page you
have embedded already) would have been enough. Now we can look at what
the problem might be with less distraction.
I don't think I would have included the images as part of <h2>. I
believe I would have used markup more like
<h2 id="suffixes">Suffixes</h2>
<div class="pict">
<a href="suf.svg">
<img src="suf.gif" border="0" height="108" width="200">
</a>
<br />
<a href="suf.html" class="bluebg">HTML variant</a>
</div>
Your CSS is (close to)
..pict { padding-left:5px; float:right;
font:small normal; line-height:1%; }
..bluebg { background:url(/1.50/pre.png) repeat-y white;
padding:2px 3px; }
I've removed the duplicate background color on .bluebg. I would drop the
normal from .pict's font declaration (using small for font-size is
probably not too bad a decision).
The line-height declaration is funny; what do you mean with it? It's 1%
here, which means 1% of "small", which would make the line-height pretty
damned small indeed. Here, there's obviously another minimum size being
used (although I don't know what the rules are for that).
You said you tried z-index, but that will only work for positioned
elements, and maybe yours weren't. Maybe one solution would be to
replace the float:right with some position:absolute and right:0
declarations. So maybe something like
..pict { font-size:small; position:relative;}
..pict a { position:absolute; top:0px; right:0; }
..pict a.bluebg {
background:url(/1.50/pre.png) repeat-y white; padding:2px 3px;
top:90px; right:120px; z-index:5; }
#suffixes { margin:0; }
You started your post by muttering about native SVG support in IE. It
seems that my Firefox doesn't seem to have it either, although maybe my
version here is just too old. I can't do anything but download the SVG
file anyway.
HTH, somehow.
