Link to the website: link
When you hover over a picture, the background needs to become transparent white and the text should be centered, vertically and horizontally.
Anyone know how I can center the text? Thanks in advance!
Take a look at Centering Inline Elements It should provide the means to do what you want; includes work-arounds for older IEs.
cheers,
gary
Hi gary.turner, thanks for your link. It doesn’t work for me (or maybe I just don’t understand how I should use it…)
I have a list with image thumbnails with a link and a span for the caption, like this:
<ul>
<li><a><img></img><span>caption goes here</span></a></li>
</ul>
The problem lies with the absolute positioning. AP elements end up as blocks. table cells cannot be AP for obvious reasons when you think about it.
I changed the structure just a bit, and it works. There is graceful fail-over for keyboard users in Firefox and Chrome.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>test doc</title>
<base href="http://www.mj-roofs.be/wordpress/referenties/nieuwbouw/" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #eed;
color: black;
font: 100%/1.25 serif;
}
p {
font-size: 1em;
}
ul {
list-style: none;
text-align: center;
}
li {
border: 5px solid white;
display: inline-block;
position: relative;
}
a:focus,
li:hover {
border: 5px solid red;
}
li a {
background-color: white;
color: black;
left: 0;
opacity: 0;
position: absolute;
top: 0;
}
a:focus,
li:hover a {
display: table;
opacity: .7;
}
li img {
border: none;
vertical-align: bottom;
}
li span {
background-color: white;
display: table-cell;
height: 120px;
vertical-align: middle;
width: 150px;
}
</style>
</head>
<body>
<h2>Nieuwbouw</h2>
<ul>
<li>
<img src="/images/referenties/r_nieuw_32.jpg"
alt="Uitbekleding bakgoten met cederhout"
title="Uitbekleding bakgoten
met cederhout" />
<a href="http://www.mj-roofs.be/wordpress/2011/07/uitbekleding-bakgoten-met-cederhout/">
<span class="caption">Uitbekleding bakgoten met cederhout</span></a>
</li>
<li>
<img src="/images/referenties/r_nieuw_35.jpg"
alt="Plat dak, mechanisch
bevestigd"
title="Plat dak, mechanisch
beve stigd" />
<a href="http://www.mj-roofs.be/wordpress/2011/07/plat-dak-mechanisch-bevestigd/">
<span class="caption">Plat dak, mechanisch bevestigd</span></a>
</li>
<li>
<img src="/images/referenties/r_nieuw_29.jpg"
alt="Uitbekleden van een vijver"
title="Uitbekleden van een vijver" />
<a href="http://www.mj-roofs.be/wordpress/2011/07/uitbekleden-van-een-vijver/">
<span class="caption">Uitbekleden van een vijver</span></a>
</li>
</ul>
</body>
</html>
cheers,
gary
hi gary.turner, thanks again for your helpful input.
Your structure seems a lot better than mine. One remark: when you click on the thumbnail, you see the white frame move 5px down and to the right. How can I solve this one?
Also, the layout in Internet Explorer 7 is ruined…? In FF and Chrome it’s fine.
You added the border to the list element but then you are also adding a border to the inner anchor element on focus:
li.image-teaser a:focus, li.image-teaser:hover {
border: 5px solid #d33431;
}
Remove or change the focus style. Use outline on focus to avoid reflow.
li.image-teaser:hover {
border: 5px solid #d33431;
}
li.image-teaser a:focus {
border:none;
outline: 5px solid #d33431;
}
IE7 doesn’t understand inline-block on block elements. It needs haslayout and display:inline in this order.
li.image-teaser {display:inline-block}/* hasl;ayout trigger */
*+html li.image-teaser {display:inline}/* ie7 */
* html li.image-teaser {display:inline}/* ie6 */
Do not amalgamate the rules or they will fail.
You can’t start a list with using a ul first!
<div class="subnav">
[B]<li class="categories">[/B]
<h3>Referenties</h3>
Where’s the opening and closing ul?
Thierry Koblentz mentioned a different technique for inline-block and IE. I barely saw the difference, but it was there. He would do the display: inline-block for it, and then display: inline in the same declaration (the one for all browsers, using one of the other, older hacks like * in front so only IE saw it). Then he’d manually trigger Haslayout with zoom.
The small difference was gaining some vertical margins, which I hadn’t noticed at first in my inline-blocks in IE… they were acting like inline vertical margins instead of like block vertical margins. Haslayout was triggered but IE was treating the element like an inline-with-haslayout, which is kinda mostly what a real inline-block is, but not completely.
In case this matters here; ultimately it wasn’t worth the extra code for me.
As far as I know there is no difference in rendering if using the display:inline-block followed by display:inline in a separate rule rather than just using display:inline and zoom in the same declaration. I’d be interested to see an example - I tried searching but came up with nothing relevant. There well may be some small difference that I hadn’t noticed before.
The basics of inline block for ie6 and 7 are that the element must be made an inline element and at the same time be in haslayout mode.
Display:inline-block is simply a haslayout trigger in IE and the reason for the extra rule is that adding display:inline in the same rule cancels out the haslayout because its the same display property being used
The oldest inline-block tests I remember were here.
[ot]
I’d be interested to see an example - I tried searching but came up with nothing relevant. There well may be some small difference that I hadn’t noticed before.
Let me double check my page again…[/ot]
this is what I use… i don’t remember where I picked it up from but I like it and it supports OLD MOZILLA as well as IE. Maybe it’s the one Stomme is mentioning?
.element{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
I will admit sometimes I alternate using the star hack ( or leaving that whole declaration out) , it really depends if I have enough IE variations to merit making a conditional style sheet. But I think it’s lovely code either way.
Hi,
I don’t mind the extra code, it works so that’s the most important thing for me. You’ve been a great help all! Thanks for that.
I have to admit though I’ve never heard of haslayout before! Still much to learn…
But anyway, now it works in IE7 as a gallery, but the text is still visible when not hovering and it doesn’t center vertically. Any thoughts on that one?
/note/
You don’t need this line:
li.image-teaser { display:inline-block }/* haslayout trigger */
because you have it further up already (even if IE doesn’t inline-block with it, it’ll still see it and trigger haslayout up there). You just need the other two lines with the display: inline there.
but the text is still visible when not hovering
You have opacity: 0 on the anchor which hides both it and its span child in modern browsers… but remember IE needs the filter junk? Make an IE opacity statement too, so the anchor (and so also its span child) has no opacity. That’ll hide it.
and it doesn’t center vertically.
You were given display: table, which works in modern browsers (also IE8). But… IE6 and 7 dunno that one though.
Personally, looking at the text you have now, I’d just tell IE6 and 7 to first make that span a block (notice in IE7 how the background colour is sticking to the text? spans are inlines, and in modern browsers the display: table stuff puts it in block context so it gets to do block-y stuff) and then I’d look at the height of the images (120px) and give the spans something like, I dunno… a height like 100px and then top-padding to make up the rest (20px). That top padding gets added to the span’s 100px height to make a total of 120px, but the text of the span can’t sit where the padding is… this ought to push the text down. Won’t be exactly perfectly centered like in the modern browsers, but it’ll be close.
li.image-teaser a span.caption {
background-color: #fff;
display: table-cell;
height: 120px;
vertical-align: middle;
width: 150px;
}
[b]new stuff[/b]
*+html li.image-teaser a span.caption {
display: block;
height: 100px;
padding-top: 20px;
}
(do similar for IE6)
To push the text down further, decrease the stated height and increase the top padding (so long as it always equals 120px in total), or to raise the text up increase the height and decrease the padding.
Yeah, that looks like what Thierry used (or, someone else was using it and he was talking about it). I don’t do that kind of hack, I like my IE stuff closeby but not mashed in the main declaration.
You used display:table to vertically center the text but that doesn;t work in IE7 and below. You would again need to use the inline-block hack as shown on Garys site and add an extra element into the html to act as a vertical center trigger.
You also need to add the IE filter opacity rule into the mix as you missed it out on the first rule.
e.g The code for that section should now look like this:
/* REFERENTIES */
ul.referentielijst {
display:block;
overflow:hidden;
list-style:none;
}
li.image-teaser {
border: 5px solid #fff;
display: inline-block;
position: relative;
margin:0 5px 5px 0;
height:120px;
width:150px;
text-align:center;
line-height:16px;
}
li.image-teaser:hover {
border: 5px solid #d33431;
}
li.image-teaser a:focus {
border:none;
outline: 5px solid #d33431;
}
li.image-teaser a {
color:#404040;
left: 0;
opacity: 0;
position: absolute;
top: 0;
text-decoration:none;
width:150px;
height:120px;
[B] filter:alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";[/B]
}
li.image-teaser a:focus, li.image-teaser:hover a {
display: table;
filter:alpha(opacity=85);
opacity:.85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
li.image-teaser img {
border: none;
vertical-align: bottom;
}
li.image-teaser a span.caption {
background: #fff;
display: table-cell;
vertical-align: middle;
width:150px;
height:120px;
}
[B]li.image-teaser {display:inline-block}/* haslayout trigger */
*+html li.image-teaser {display:inline}/* ie7 */
* html li.image-teaser {display:inline}/* ie6 */
*+html li.image-teaser a span.caption {
display:inline-block;
width:145px;
height:auto;
}
*+html li.image-teaser b {
height:100%;
display:inline-block;
width:1px;
overflow:hidden;
vertical-align:middle;
}
* html li.image-teaser a span.caption {
display:inline-block;
width:145px;
height:auto;
}
* html li.image-teaser b {
height:100%;
display:inline-block;
width:1px;
overflow:hidden;
vertical-align:middle;
}[/B]
/* OFFERTEFORMULIER */
And the html with the empty b element added at the end before the closing anchor:
<ul class="referentielijst">
<li class="image-teaser"><img src="http://www.mj-roofs.be/images/referenties/r_nieuw_32.jpg" alt="Uitbekleding bakgoten met cederhout" title="Uitbekleding bakgoten met cederhout"/><a href="http://www.mj-roofs.be/wordpress/2011/07/uitbekleding-bakgoten-met-cederhout/"><span class="caption">Uitbekleding bakgoten met cederhout</span>[B]<b></b>[/B]</a></li>
<li class="image-teaser"><img src="http://www.mj-roofs.be/images/referenties/r_nieuw_35.jpg" alt="Plat dak, mechanisch bevestigd" title="Plat dak, mechanisch bevestigd"/><a href="http://www.mj-roofs.be/wordpress/2011/07/plat-dak-mechanisch-bevestigd/"><span class="caption">Plat dak, mechanisch bevestigd</span>[B]<b></b>[/B]</a></li>
<li class="image-teaser"><img src="http://www.mj-roofs.be/images/referenties/r_nieuw_29.jpg" alt="Uitbekleden van een vijver" title="Uitbekleden van een vijver"/><a href="http://www.mj-roofs.be/wordpress/2011/07/uitbekleden-van-een-vijver/"><span class="caption">Uitbekleden van een vijver</span>[B]<b></b>[/B]</a></li>
<li class="image-teaser"><img src="http://www.mj-roofs.be/images/referenties/r_nieuw_15.jpg" alt="Uitbekleding van een bakgoot" title="Uitbekleding van een bakgoot"/><a href="http://www.mj-roofs.be/wordpress/2011/07/uitbekleding-van-een-bakgoot/"><span class="caption">Uitbekleding van een bakgoot</span>[B]<b></b>[/B]</a></li>
<li class="image-teaser"><img src="http://www.mj-roofs.be/images/referenties/r_nieuw_04.jpg" alt="Plat dak, gebalast systeem" title="Plat dak, gebalast systeem"/><a href="http://www.mj-roofs.be/wordpress/2011/07/plat-dak-gebalast-systeem/"><span class="caption">Plat dak, gebalast systeem</span>[B]<b></b>[/B]</a></li>
<li class="image-teaser"><img src="http://www.mj-roofs.be/images/referenties/r_nieuw_10.jpg" alt="Plat dak met EPDM-rubber" title="Plat dak met EPDM-rubber"/><a href="http://www.mj-roofs.be/wordpress/2011/04/plat-dak-met-epdm-rubber/"><span class="caption">Plat dak met EPDM-rubber</span>[B]<b></b[/B]></a></li>
</ul>
That’s all working for me now in IE7 
Yes, I only added it in the code I gave the OP to show that it was part of the hack but can safely be removed as long as the inline follows the original rule. It cannot go before the original rule or it won’t work
Yes that’s what I’ve been saying all along is that you simply need display:inline and a haslayout trigger that works for inline elements such as zoom. It’s no different to the hack I used except that you can keep it all in one rule with your method but is invalid css because of the *.
I prefer to use display:-moz-inline-box rather than -stack as I have had better results with -box rather than -stack. The hack is for FF2 and below but 9 times out of a ten they need a nested block level element also or they won’t work properly. (I’m not sure that there are many FF2 users left although I believe browsers like sea monkey may still be using the old ff2/gecko equivalent.)
I prefer to use display:-moz-inline-box rather than -stack as I have had better results with -box rather than -stack.
I haven’t seen stack work anywhere. I test FF2 with K-Meleon, which is still a valid browser. Sometimes I need to use -box, and sometimes I need to use -block. I haven’t figured out the rule, but often one works where the other doesn’t. Since I don’t know the rule, I always check. Then there are a few cases where I simply can’t let old FF get any inline-block because none of the substitutes work well enough.
I’ve more or less always managed to get it to work for FF2 but it often meant nesting a block element inside which is a pain and starts to get messy (sometimes a width was all that was needed but not always suitable).
Usually you can just leave it out altogether and let FF2 have a reduced experience.
Hi everyone thanks again for your help, in IE it’s somewhat centered now, it’s good enough for me!