Inline float image not floating

Help! I know I’m overlooking something stupid, but can’t see it.

I want to float a simle, smallish gif on the left hand side of the text in a very simple xhtml page.

This is the whole paragraph.


<p>Emergency waterleak repairs in southeast London is one of the key services I deliver, seven days a week if need be. A lot of people think this is something that
will only happen in winter during long periods of severe frost. I can assure you that is not at all the case, and have included a list of some of the most frequently
found reasons for a problem of this kind to pop up. Some of these are utterly obvious, or at least will be when you think about it; others are not. And when it
happens and you can not control it, this simple, clean water that we all take for granted can cause an enormous amount of grief. <img {float:right} src=“GSR GIF 100.gif” width=“100” height=“100” alt=“water leak repairs Gas Safe Registger logo”/> </p>

The purpose of this exercise, is to leaf all css alone and manipulate am image inline.
When I remove the {float:right} the image displays fine exactly where I put it.
When I add {float:right} I get a dispaly error pointing at the first curly bracket.

Experimented with id, class and various syntaxis, but nada.

Starting to pull my hair out, which I can not afford as there isn’t that much left.

Many thanks for any solutions that will allow me to float an image inline.

[FONT=Verdana]{float:right} is CSS notation, so you can’t add it into an HTML tag. Give your img a class then reference it in your style sheet. e.g.

.classname {float:right;}

[/FONT]

Sorry - I’ve just re-read your post and realised you specifically wanted to put the declaration inline. Assuming you understand why that’s generally a really bad idea, you can do it with <img style=“float:right;” src=“GSR GIF 100.gif” width=“100” height=“100” alt=“water leak repairs Gas Safe Registger logo”/>

Muchas gracias senhor Bear.

When you want to add CSS inline to a tag you use the style attribute of the tag.
eg

<p style='your css rules here>text </p>

As TB was saying this is not the optimal way of using CSS tho.

ALSO NOTE: FLOATED ELEMENTS must be placed FIRST in the source code. The way you have it the image will float… but bellow all the text in the paragraph ( maybe that’s what you intended, tho ).


<p><img style='float:right'  src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/> Emergency waterleak repairs in southeast London is one of the key services I deliver, seven days a week if need be. A lot of people think this is something that
will only happen in winter during long periods of severe frost. I can assure you that is not at all the case, and have included a list of some of the most frequently
found reasons for a problem of this kind to pop up. Some of these are utterly obvious, or at least will be when you think about it; others are not. And when it
happens and you can not control it, this simple, clean water that we all take for granted can cause an enormous amount of grief. </p>

Thanks DF, I know using css inline is not ideal, I use it as a temp to see what it looks like and then adjust size, position and whatever until I am happy that it looks ok in various browsers. When I am satisfied with the compromise, I add the result to the style sheet.
There is a lot of experimenting to do, as I am completely rewriting my site from a very clumsy “as long as it displays, I am happy” html4-loose and all inline, to xhtml-strict with as much css as practicable. One could say this is a bit of a lurning curve; I have zero formal training and learned everything I know through reading forum threads, asking questions from time to time, doing online courses and reading library books. The Sitepoint members have been instrumental with their advice.

You can also experiment in-browser using the built-in (or add-on) plugins for debugging. Chrome comes with the Chrome web developer, and IE also comes with one. Opera comes with Dragonfly though I have trouble manipulating the panel there (lack of familiarity mostly). You can download Firebug for Firefox. I’m sure Safari has something too but I can’t afford a special computer just to run that browser :slight_smile:

When you open the debugger you can actually type in CSS on elements and see the changes live.

Muchas gracias senhor Bear.

senhorA even

Ah. Without the h even.

[ot]

I understand it’s hard to tell under all the fur. :wink:[/ot]