Using the <img> tag in <div> tags

[bjg]

Hey,

I need some help here. I'm doing a website for a friend who has a webhosting
business. Basically i decided to learn stirct XHTML while i'm doing it.

Please take a look at this page:

http://www.hostforge.net/~bjg/hfsite/feedback.html

Basically the image of the man on the right is not where i want it in
Mozilla, but it is in IE. So far only tested with those browsers. If you
view the source i've put the <img> tag before the " We at HostForge are ",
so the image should be to the right of that sentence. The top of the image
should be aligned with that line. It is in IE, but not in any other browser.
If i was using tables it would work though.

Does someone know a better way to do this so it's cross-browser compliant?

Regards

 

[Steve Pugh]

I need some help here. I'm doing a website for a friend who has a webhosting
business. Basically i decided to learn stirct XHTML while i'm doing it.

Please take a look at this page:

http://www.hostforge.net/~bjg/hfsite/feedback.html

Basically the image of the man on the right is not where i want it in
Mozilla, but it is in IE. So far only tested with those browsers. If you
view the source i've put the <img> tag before the " We at HostForge are ",
so the image should be to the right of that sentence. The top of the image
should be aligned with that line. It is in IE, but not in any other browser.
If i was using tables it would work though.

It appears in the correct place in Opera 7, and in Mozilla 1.5 when
CSS isn't being used. That suggests that your CSS is at fault.

Why do you use mm as length units in a screen stylesheet? That makes
no sense at all. Very few browsers actually have any idea how big a mm
on the screen really is.

You also need to validate the page - http://validator.w3.org/
The cryptic error message you'll get at first is due to the copyright
symbol. I'll leave the rest of the fixes up to you.

Anyway, your problem. You have an image with align="right" (not
allowed in XHTML 1.0 Strict, or HTML 4.01 Strict, BTW) inside a div
whose position is determined by the preceeding div's float: left.
For some reason Mozilla is positioning the image where it would be if
the float wasn't there. The same thing happens if you change the align
to a float, so this isn't a consequence of mixing CSS and
presentational HTML.

I'm not sure why, but one solution is to change the way you float the
left hand column. Instead of adding the class LHS to each div
individually, add it to a div that surrounds teh whole column. This
puts the image back where it belongs.

Steve

 

[bjg]

It appears in the correct place in Opera 7, and in Mozilla 1.5 when
CSS isn't being used. That suggests that your CSS is at fault.

Why do you use mm as length units in a screen stylesheet? That makes
no sense at all. Very few browsers actually have any idea how big a mm
on the screen really is.

I changed this - this is an old copy i uploaded a while ago. My local
version is fixed.

You also need to validate the page - http://validator.w3.org/
The cryptic error message you'll get at first is due to the copyright
symbol. I'll leave the rest of the fixes up to you.

Same as above. So far so good validating.

Anyway, your problem. You have an image with align="right" (not
allowed in XHTML 1.0 Strict, or HTML 4.01 Strict, BTW)

lol and this - i used img { float: right; } in my style.

inside a div

whose position is determined by the preceeding div's float: left.
For some reason Mozilla is positioning the image where it would be if
the float wasn't there. The same thing happens if you change the align
to a float, so this isn't a consequence of mixing CSS and
presentational HTML.

I'm not sure why, but one solution is to change the way you float the
left hand column. Instead of adding the class LHS to each div
individually, add it to a div that surrounds teh whole column. This
puts the image back where it belongs.

Thanks. I did this and it works fine. Thanks alot!

 

[Eric Bohlman]

Hey,

I need some help here. I'm doing a website for a friend who has a
webhosting business. Basically i decided to learn stirct XHTML while
i'm doing it.

This is a nitpick to be sure, but if you want to learn strict XHTML (or
even strict HTML, but the distinction is even more important when you start
getting into other aspects of XML) you should really truly and completely
understand the difference between a "tag" and an "element" and not be so
sloppy as to write one when you mean the other. Tags are the markers that
indicate where elements begin and end; elements are the stuff in between
the tags (syntactically, that includes the tags themselves; in an abstract
tree model, it doesn't). Or at least that's how it is in XHTML and other
XML languages; in HTML it's possible to have elements that aren't delimited
by tags:

<title>Tag Omission</title>
<p>This document has only two pairs of tags, but five total elements.</p>

For example, the above document has a body element even though it has no
<body>...</body> tags. You could apply styles to that element and they
would work, and you could find it by traversing the DOM from within a
script.