473,320 Members | 1,916 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Automatic captions: img:after { content:attr(alt) }

This CSS declaration doesn't do anything on my page, for some reason.
I've made heavy use of this technique in other places, and it works.
It's not a problem with the alt value, either. This shows nothing:

img:after {
content:"Test";
}

While this shows "Test" after all div elements:

div:after {
content:"Test";
}

I've fiddled around with setting visibility, display and other
properties, but for some reason img elements seem not to support
content in their :before and :after pseudo-elements.

Since this is in fact a tip mentioned by W3 (http://www.w3.org/TR/
WCAG10-CSS-TECHS/#Alt ), and shown there almost verbatim, that's
somewhat confusing to me. Any experience with getting this to work?

Jun 22 '07 #1
11 14020
Link broke. This is the one I meant:

http://www.w3.org/TR/WCAG10-CSS-TECHS/#Alt

Jun 22 '07 #2
Scripsit Christoph:
for some reason img elements seem not to support
content in their :before and :after pseudo-elements.
That's strange enough. I've only tested it on Firefox 2, but it seems to
fail to support it for input elements, too. Maybe that's because they are
replaced elements that are empty elements in markup terms.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 22 '07 #3
On Jun 22, 10:08 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Christoph:
for some reason img elements seem not to support
content in their :before and :after pseudo-elements.

That's strange enough. I've only tested it on Firefox 2, but it seems to
fail to support it for input elements, too. Maybe that's because they are
replaced elements that are empty elements in markup terms.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
I've tried testing <img></imginstead of <img />, but of course the
element has to be empty for valid XHTML, so that didn't work. I'll try
it with Opera and Firefox 3.0alpha - if the W3C recommends it, I'm
more apt to think it might just be a problem of the browsers not
implementing the standard properly yet.

If that doesn't work, I guess it's time for <div class="figure">.
Unfortunately, I'll probably have to fill in the caption text again,
unless there is some way to access "first child of type img's alt
attribute" from within a div selector. So far, I've only seen attr()
used for the element's own attributes.

--
cb

Jun 25 '07 #4
Opera 9.21 shows the caption properly:

http://ermarian.net/html/img

Looks like it's time to file a bug on Bugzilla again... or, well, more
of a feature request, given how bleeding-edge CSS 2 is.

--
cb

Jun 25 '07 #5
Christoph B wrote:
Opera 9.21 shows the caption properly:

http://ermarian.net/html/img

Looks like it's time to file a bug on Bugzilla again...
Good luck with that
https://bugzilla.mozilla.org/show_bug.cgi?id=245633

--
Berg
Jun 25 '07 #6
Note. In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.

Apparently not. So I guess this approach is not going to work at all,
and I'm going to end up with a bunch of divs and copying content
multiple times:

<div class="figure">
<img src="" alt="Image Caption" />
<div class="caption">
Image Caption
</div>
</div>

The problem with divs, of course, is that they cannot inherit the
natural width of the contained image. The img solution would have kept
the figure as small as the image, but this way, the div will fill the
screen. An explicit width, of course, will never quite match the
image, so the image needs to be told to fill the width of the parent
("width:100%").

This, in turn, will mean that the image will be either stretched or
squashed, unless the figure element is exactly the proper width.

Oh well...

Jun 26 '07 #7
On 2007-06-26, Christoph B <ch****************@gmail.comwrote:
>Note. In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.

Apparently not. So I guess this approach is not going to work at all,
and I'm going to end up with a bunch of divs and copying content
multiple times:

<div class="figure">
<img src="" alt="Image Caption" />
<div class="caption">
Image Caption
</div>
</div>

The problem with divs, of course, is that they cannot inherit the
natural width of the contained image. The img solution would have kept
the figure as small as the image, but this way, the div will fill the
screen. An explicit width, of course, will never quite match the
image, so the image needs to be told to fill the width of the parent
("width:100%").
You can contrive to give the divs "shrink to fit" widths by making
them floats, display: inline-block or display: table, although the
latter two options are not widely supported by browsers.
Jun 26 '07 #8
You can contrive to give the divs "shrink to fit" widths by making
them floats, display: inline-block or display: table, although the
latter two options are not widely supported by browsers.
Thanks, float did it.

http://ermarian.net/html/img

(The approach that works in Firefox is the second one on the page)

I guess this isn't so bad, since the CMS will automatically duplicate
the alt attribute for the caption. And if it needs to be hidden, it
can just be set to display:none.

--
cb

Jun 27 '07 #9
On Jun 27, 12:33 pm, Christoph <christoph.bursc...@gmail.comwrote:
You can contrive to give the divs "shrink to fit" widths by making
them floats, display: inline-block or display: table, although the
latter two options are not widely supported by browsers.

Thanks, float did it.

http://ermarian.net/html/img

(The approach that works in Firefox is the second one on the page)

I guess this isn't so bad, since the CMS will automatically duplicate
the alt attribute for the caption. And if it needs to be hidden, it
can just be set to display:none.

--
cb
Short note: It is necessary for the text below the graphic to have the
"clear:both" property, because otherwise it will wrap around the
image.

--
cb

Jun 27 '07 #10
Scripsit Bergamot:
Christoph B wrote:
>Opera 9.21 shows the caption properly:

http://ermarian.net/html/img

Looks like it's time to file a bug on Bugzilla again...

Good luck with that
https://bugzilla.mozilla.org/show_bug.cgi?id=245633
That page explains that :before and :after won't be supported for img by
Firefox, since "'::before' and/or '::after' don't apply to replaced
elements". That means that they treat the CSS 2.1 draft as authoritative
and, moreover, read more in it than there is in it. At least at present, the
CSS 2.1 draft says:

"Note. This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification."
http://www.w3.org/TR/CSS21/generate.html

The bottom line, however, is that we can't expect browsers to support the
pseudo-elements for "replaced elements" like img, input, etc. (whatever the
full list is - the CSS specifications and drafts are obscure in this area).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jul 5 '07 #11
Jukka K. Korpela <jk******@cs.tut.fiwrote:
>
That page explains that :before and :after won't be supported for img by
Firefox, since "'::before' and/or '::after' don't apply to replaced
elements". That means that they treat the CSS 2.1 draft as authoritative
The big problem for replaced elements is, where should the generated
content be displayed?

According to the CSS specification the generated content is inserted
before (::before) the first child or after (::after) the last child of
the element (or if there're no children, theses pseudo elements become
the fist or last child element).

But for replaced elements like IMG the "content" area of the IMG element
is replaced by the image itself. And so the image would also replace
or at least cover the "::before" and "::after" pseudo elements, which
would be therefore invisible.
--
Alexander
Jul 5 '07 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: EthanStyle | last post by:
color schemes on a site are probably the hardest thing to do right. even if you know which colors go together you still have to orgainize them correctly. is it better to have a light color...
2
by: Headless | last post by:
I'm pretty sure this isn't possible, but to be sure: in an author print style sheet is it possible to disable printing of a graphic logo and print it's alt content instead? Headless --...
24
by: Markus Ernst | last post by:
Hi I have a title with a title gif: <h1><img src="mytitle.gif" alt="This is my title"></h1> So this is text-based browser and search-engine friendly and can be easily formatted with a style...
18
by: Roger Shrubber | last post by:
Hello all I have created a page which has several pictures on it. Each picture is surrounded by a frame made from actual photos of real picture frames, consisting of four corner tiles and four...
13
by: Québec | last post by:
Hi, How can we mofdify the alt attribute with css? Jean Pierre
1
by: Garmt de Vries | last post by:
On my pages, I use a couple of images (with appropriate alt texts of course) for decoration purposes. For example: <p> Blablabla about some topic.<br> <a href="foo.html"> <img src="see.gif"...
15
RMWChaos
by: RMWChaos | last post by:
As usual, an overly-long, overly-explanatory post. Better too much info than too little, right? A couple weeks ago, I asked for some assistance iterating through a JSON property list so that my...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: khushi patel | last post by:
I am working on Lightbox that has dropdown on it. depending on ddl value div should be shown up pleae help <%@ Page Title="" Language="VB" MasterPageFile="~/MasterSite.master"...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.