I've tried to apply something along the lines of http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.
Can it be done without having to specify each image's width explicitly?
The best related info I could find was posted here a few days ago, but
doesn't seem to work with floats in IE, unless I'm just having another
too late night. http://groups.google.co.uk/groups?hl...oogle%2BSearch
--
Michael
m r o z a t u k g a t e w a y d o t n e t 6 2027
Hi, I've tried to apply something along the lines of http://www.spartanicus.utvinternet.i...d_to_image.htm to a floated span containing an image & caption, but I can't find anything that'll work in IE - floating seems to break it.
I tried to get spartanicus' proposal working, but like you discovered,
IE isn't very cooperative... I had luck; our graphic-department wanted
fixed-sized divs, therefore it's no longer my problem :-)
But I fear this problem can not be solved (without scripting).
Chris
Michael Rozdoba <mr**@nowhere.i nvalid> wrote: I've tried to apply something along the lines of http://www.spartanicus.utvinternet.i...d_to_image.htm to a floated span containing an image & caption, but I can't find anything that'll work in IE - floating seems to break it.
Floating should break it, css 2.1 specifies that floated elements should
use a shrink to fit method when no width is specified (IE has always
used a shrink to fit method for floats).
width:inherit on the caption's block level container won't help here,
IIRC only specified widths can be inherited (not computed widths).
Can it be done without having to specify each image's width explicitly?
Specifying a width on the containing block is always best, anything else
is sub optimal.
--
Spartanicus
Chris Leipold wrote:
[ http://www.spartanicus.utvinternet.i...d_to_image.htm
& floats ] I tried to get spartanicus' proposal working, but like you discovered, IE isn't very cooperative... I had luck; our graphic-department wanted fixed-sized divs, therefore it's no longer my problem :-) But I fear this problem can not be solved (without scripting).
Indeed. Thanks for the feedback.
--
Michael
m r o z a t u k g a t e w a y d o t n e t
Spartanicus wrote: Michael Rozdoba <mr**@nowhere.i nvalid> wrote:
I've tried to apply something along the lines of http://www.spartanicus.utvinternet.i...d_to_image.htm to a floated span containing an image & caption, but I can't find anything that'll work in IE - floating seems to break it.
Floating should break it,
I wondered but didn't check - it was too late into the morning.
css 2.1 specifies that floated elements should use a shrink to fit method when no width is specified (IE has always used a shrink to fit method for floats).
width:inherit on the caption's block level container won't help here, IIRC only specified widths can be inherited (not computed widths).
I think I tried that along with a few less rational stabs in the dark. Can it be done without having to specify each image's width explicitly?
Specifying a width on the containing block is always best, anything else is sub optimal.
Hm. Shame. I hate having to inline styles, even if it is only width. At
least in this case I can. In other situations this would rule out static
pages & require program code, albeit with a choice of client or server side.
--
Michael
m r o z a t u k g a t e w a y d o t n e t
*Michael Rozdoba* <mr**@nowhere.i nvalid>: I've tried to apply something along the lines of http://www.spartanicus.utvinternet.i...d_to_image.htm to a floated span containing an image & caption, but I can't find anything that'll work in IE - floating seems to break it.
span {width: expression(this .firstChild.wid th);}
where the 'span' contains the 'img' as its first child, would do, but is
of course not correct CSS. In an intranet it may be tolerable, but
shouldn't be used out on the Web.
Is it a gallery of images with captions or some images illustrating a
larger text inline?
Some test-pages of mine:
<http://webdesign.criss ov.de/temp/css-d/captions-zoe.html>,
<http://webdesign.criss ov.de/temp/ciwas/image-captions-table.html>.
--
No sig today, my .sig has gone away
The divider stands forlorn, a symbol of the dawn
No sig today, it seems a common sight
But people reading by don't know the reason why
Christoph Paeper wrote: *Michael Rozdoba* <mr**@nowhere.i nvalid>:
I've tried to apply something along the lines of http://www.spartanicus.utvinternet.i...d_to_image.htm to a floated span containing an image & caption, but I can't find anything that'll work in IE - floating seems to break it.
span {width: expression(this .firstChild.wid th);}
where the 'span' contains the 'img' as its first child, would do, but is of course not correct CSS. In an intranet it may be tolerable, but shouldn't be used out on the Web.
Agreed. Interesting to know about the options though. I assume that's an
IE thing? Or does Moz allow similar access to the DOM within CSS? BTW
Does the above rely on the img element in the html having the width
specified, or does it actually calculate it from the image's file?
Is it a gallery of images with captions or some images illustrating a larger text inline?
The latter, as part of a small website for a course of mine.
Some test-pages of mine: <http://webdesign.criss ov.de/temp/css-d/captions-zoe.html>, <http://webdesign.criss ov.de/temp/ciwas/image-captions-table.html>.
Thanks :)
--
Michael
m r o z a t u k g a t e w a y d o t n e t This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: puzzled |
last post by:
Okay, so my subject sounds a bit crass. As much as I'd like to
totally embrace css and avoid "deprecated" usage, sometimes the
deprecated stuff is so much easier and more effective. Plus, it at
least does what I want it to, while I'm left puzzled trying to make a
css implementation do the same thing.
Here is a simple example.
I want to have four identical-sized images displayed in a two-by-two
arrangement, wtih room for a centered...
|
by: Wally |
last post by:
I would like to have an image with a caption displayed below it. The
size of the image will vary. The caption should not extend beyond the
width of the image.
How can I cause the text of the caption to wrap so that it will stay
within the (varying) width of the image?
Any ideas?
|
by: aqualizard |
last post by:
I have made and image with a caption using CSS, but I am hoping someone
can show me how to do it better. By better I mean less HTML, and
hopefully have it work with any sized image where I do not have to hard
code the width of the container that holds the image.
Here is a description:
I want to have an image with a caption underneath, aligned on the left.
There should be a black keyline around the image, and the caption
underneath, and...
|
by: mephraim |
last post by:
I have a page at (view in IE):
http://rmc2.dev.leepfrog.com/ie_fix_me/index.html
that has an image floated right outside of a main content div that
looks like:
<img src="blah" style="float: right; clear: right;>
<div class="schoolofcenter">
|
by: Roy Reed |
last post by:
I found a script that converts image alt text to a caption which I've tried
to modify for my needs:
function addCaption(imgElem) {
var captionElem = document.createElement("div");
captionElem.className = "caption";
var captionText = document.createTextNode(imgElem.alt);
captionElem.appendChild(captionText);
if(imgElem.nextSibling)
imgElem.parentNode.insertBefore(captionElem,imgElem.nextSibling);
| |
by: Hacking Bear |
last post by:
Hi,
I still don't quite fully understand how to handle mixing border/margin
pixel width with percentage width.
In the example below, I want to place side-by-side two DIV boxes inside
a box.
1. Each box takes up 50% of the parent.
2. One of the box has a border width of 1px.
|
by: Ben Bacarisse |
last post by:
After finding a page on an existing site that was not being displayed
correctly by IE7, I have boiled the problem down to the following
simple example:
http://bsb.me.uk/tmp/bug.html
With max-width applied to the paragraphs, the second one is positioned
as if it had "clear: right" applied (but of course it does not).
Other tested browsers behave as I'd expect.
|
by: Chris Beall |
last post by:
See
http://pages.prodigy.net/chris_beall/Demo/photo%20block%20experiments.html
I've ended up with what seems like a rather complex structure for what I
thought would be a somewhat simple problem. Even that complex solution
works well only in FireFox (haven't tested Safari...).
Can anyone come up with a better solution, where 'better' means:
- Works as well as the example above, but is simpler.
OR
|
by: Peter Parker |
last post by:
Could someone show me how to limit caption width to image width dynamically
(image width is not known in advance) if that's possible? I was thinking of
using Javascript to get the image width which is then used for caption
width. Is there a better way? Thank you.
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |