Images and the Align attribute
When adding images to a web page, most often times we need to have that image sit to the left or right of the page so that text can flow around it. How is this best handled?
I have seen it done a million ways, using floats applied directly to images, floats applied to paragraphs around images, images in seperate paragraphs, images in the same paragraph (speaking of paragraph elements here). I have not really seen a consistent method for aligning images.
I have paid great attention to what has been written about floating images. Dan even posed the question in his SimpleQuiz series, although that had more to deal with an image and a caption.
I have preferred using a float:left/right applied to a paragraph that contained only an image. An issue recently came up with a content editing system we were working on for a client. The CMS would/could not apply the float styles to the paragraph or the image they contained. It would, however, give the image an align attribute with a value of left or right.
Speaking strictly on the issue of validity, the align attribute applied to an image is still valid XHTML1.0 Transitional, which is what this particular site was coded in. Speaking on the suject of presentational markup, align definitely falls into that corner because it is applying a visual style to that image, telling it to sit to one side or the other. So that sort of throws the whole “separation of presentation and structure” out the door.
I am definitely torn. What methods have you used to float images? What have you noticed as being the preferred way of doing so?
January 31st, 2005
I have started to use the align more and more, just to save time and hassle with testing. Why can’t there just be a simple CSS property that does the exact same thing as align does? It shouldn’t be too hard, and it would help out greatly when floats just refuse to work.
February 1st, 2005
“seperation” should be “separation.” Sorry, I’m a spelling geek.
With images, if you are REALLY looking to separate presentation from structure, then the image tag should not be used at all.
If you think about it, the image tag itself is presentational (in most cases), and should be applied with CSS.
I’d much perfer wrapping the paragraph TEXT around the IMAGE, as oppose to positioning the IMAGE in respect to the TEXT.
But, I don’t have a solid solution on how to do that - this is just my theory.
In the mean time, if I absolutely HAVE to combine an image with text, then I have applied a class to the image, specifying float right or left.
The output isn’t pretty in most cases, but I live with it for now.
February 1st, 2005
Not true in many cases actually. Imagine the scenario of writing an article. The author’s headshot, a graph or chart accompanying the article, and even a photo of the article’s subject all help to tell the story. In this case, it’s best to use img tag so the story doesn’t lose some of its depth when CSS is turned off.
February 1st, 2005
I agree with Vinnie. If you are including an image that is meant to be informational, then someone using a browser that does not support styles, they are unable to view the informative graphic related to the text they are reading.
Besides that, if you were to try and include images across a large site with CSS, that is a lot of style information to keep up with.
February 1st, 2005
I’ve defined an .img class in my css and add the `class=”picr(l)”` attribute to my code when inserting the image into my post, using r for floated right, and l for left. This is a simple way for me to float the image in the text and works for me most all the time, across most browsers. The comment brought up browsers that don’t support styles is a very good point though. From time to time I use the Firefox Developer toolbar and turn styles off to make sure my content would be mostly legible for those users (although it may not be ‘pretty’ by design standards.) Just my 2c.
February 1st, 2005
I’m not saying the image tag is wrong - by all means no. I’m just saying in A LOT of cases, the image tag present can be replaced with CSS.
Of course, if you are managing a photo blog - that’s different. Thousands of photos are hard to keep track of with CSS.
If CSS is turned off by the user, then how are the images that ARE CALLED with CSS displayed?
Text.
That’s why all those “image replacement” techniques have come up - because similar to the ALT and TITLE attributes of an image tag - text is used to replace (but convey the full meaning) of that image that can’t be viewed (due to CSS turned off, or a text browser).
Vinnie and Jeremy - I see your points, and I agree with them. But there IS the other side to it.
February 1st, 2005
There is:
float.align="right"andfloat:rightdo the same thing.I either use a class for the image or, if I know that all images within a certain container will be floated the same way, use a contextual selector.
February 1st, 2005
align=”right” and float:right do not have the same effect. Yes, they both move something to the right side of the page but float does more damage to surrounding objects. It pushes things out of the way a lot more than align does and this tends to mess up layouts and positioning.
February 2nd, 2005
Josh: Could you show me an example of that? I haven’t noticed the two behaving any different, and they aren’t supposed to, unless I’m completely misreading the specs.
Maybe if you use a Transitional DOCTYPE (which would be required to use the align attribute), or make browsers use quirks mode, align and float are treated differently.
I could very well be wrong - I haven’t used the align attribute for a long time.