JeevesBond — Thu, 15 Jan 2004 11:07:49 +0000

When I did it I forgot to set the id attribute of the img (id="floatright")...Anyway, glad to hear my method works, even if the implementation is a little different

eyedam — Wed, 14 Jan 2004 22:37:06 +0000

OK, thank you all!

I tried it with style too (float:right not align="right"), but I didn't succeed. I suppose I had made some mistake then, as now I simply set style="float: right" for the image tag and it works nicely!

Thanks!
eyedam

JeevesBond — Wed, 14 Jan 2004 15:40:24 +0000

I believe the problem may have something to do with the HTML. I tried this:

IMG {
	BORDER-RIGHT: 0px; 
	BORDER-TOP: 0px; 
	VERTICAL-ALIGN: middle;
	BORDER-LEFT: 0px; 
	BORDER-BOTTOM: 0px;
}
#floatright {
	float: right;
}

'
For the CSS and this for the HTML:

<IMG height=250 src="index_files/JKRunKatie.jpg" width=230 id="floatright">

'
Notice I removed the align="right" but the vertical align is still there for all other images... Hopefully the mystery is solved? Bearing in mind I've only tested this on IE6, hmmm.

Suzanne — Wed, 14 Jan 2004 14:17:10 +0000

Renegade, the problem is that the vertical-align stops the floating from happening. Because we can't cancel out the vertical-align declaration if it applies first and foremost to ALL images, that won't work.

Renegade — Wed, 14 Jan 2004 08:50:04 +0000

Have you tried:

That will make the image float to the right and have text wrap around it. Might also help if you set a class to it so that you can do other things.

HTML:

CSS:
.floated-image-right {
position:relative;
float:right;
margin:10px 0px 10px 10px;
}

Suzanne — Wed, 14 Jan 2004 02:41:36 +0000

I see the problem. You can put classes in ALL your images (ugh), you can put that image in a DIV? maybe? Set a contextual for all images as p img {} and then put the problematic image in div#id img {} instead?

There isn't a way to unset, that I could find, anyway. I went digging around and I think contextual CSS will help, if we can find the right combination.

eyedam — Wed, 14 Jan 2004 01:17:53 +0000

Well, as I understand, I don't need the vertical-align set at all for that image to float correctly. But I have set it on the main CSS, so is there a way to unset it for a particular element?

I tried this:

<style type="text/css">
img#bilde {  }
</style>

'
And set id="bilde" for the image tag, but it still was middle vertical-aligned, and didn't float to the right top corner.

Or is there another way?

Also, I don't think I can use your second suggestion, as even if these some particular images will alwasy be placed in the body part, there are many other images in the body part too, that needs that aligning.

Thanks,
eyedam

Suzanne — Tue, 13 Jan 2004 21:15:08 +0000

You can set an ID for the image(s) that you want to behave differently from the other images, and then set vertical-align to whatever you want.

Another option would be to set a specific contextual identity for all the img that have the vertical align set, such as if they are always in the body and this other image is in the header:

#header img {}

#content img {vertical-align: middle;}

That will keep the declarations for the content images from affecting the header images.

eyedam — Tue, 13 Jan 2004 19:55:57 +0000

OK, thanks for the reply, m3rajk, however, you didn't quite understand the problem. Yes, my post can be misunderstood easily (I see that now) if read alone. But it is a reply to the previous posts, so it should be read after those.

What I meant, was that I (already) use the same CSS for all my site's pages and want to keep it as it is. Only I have set "img" tags vertical-align to middle, and that, as Greg and Jack explained prevents from my image floating to the right correctly.

So, I asked what should I do in this case? Is there a way to cancel all previous style definitions for an object (then I could cancel vertical-align definition to that image). If not, what else can be done?

Thanks,
eyedam

m3rajk — Tue, 13 Jan 2004 17:26:55 +0000

use css in an imported file. this means you either have or something like that in your header or in your header.

at that point use classes and ids to manipulate different things. this will allow things that are recurring across pages to be updated MUCH easier since there's but one place, and also allow faster loading since css files are done once per session... and most browsers will only check the update time and dl the new file if the last update to the file is newer than wha t they have, thus lowering the number of bytes sent per page call