Floating image to the right

On IE here is the line I had to remove from your CSS file to get the image to display correctly:

'
I think it is the VERTICAL-ALIGN, it is telling the browser to align the image in the middle of the line of text it is with, so in IE, this appears to be overriding the ALIGN=RIGHT which tells it to put it on the right of the current line, letting the rest wrap around it.

I'm not sure, but sounded good when i typed it

-Greg

It's the 'vertical-align:middle;' that's causing the trouble.

OK, thanks!

And what should I do know if I want to use the same CSS for all the pages on my site? Is there a way I can cancel a style definition for a particular object?

eyedam

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

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

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.

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:

'
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

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.

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;
}

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.

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

'
For the CSS and this for the HTML:
'
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.

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

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