IE8/Windows 7 screwing up sizes

**AtW** · 31 January 2010, 01:57

Try this:

<img src="image_files/tabstop.gif" alt="" width="784">

**NickFitz** · 31 January 2010, 03:22

<img> is an inline element, and <body> may only have block (or script) element children. However, I find the HTML 4.01 spec somewhat ambiguous in this regard, as <img> is one of those peculiar beasts known as "inline replaced elements", and the validator is happy with an <img> being a child of <body>

What is probably happening is that IE is stretching the image to the width of the <body> element, which will be dependent on the size of the browser window; on a 1024px-wide-screen, deducting the width of window borders, a vertical scrollbar, and the default padding[*] on the body element makes 980px sound about right.

Try wrapping the <img> in a <div>, which is a block-level element and will simply expand to meet the needs of its content. Then the <img> will (presumably) no longer grow beyond its natural dimensions, as rather than being contained by an element that seeks to expand it to fill itself, it will instead be contained by an element that is itself required to expand to accommodate it.

Did I say

? Well, I'll say it again:

Don't ever believe anybody who tells you that HTML is easy

[*] EDIT: I meant "default margins"

EDIT again: you say that specifying the width in a style rule doesn't seem to work. Off the top of my head, I would conjecture that you are specifying the rule as something like "width: 784;" which won't work in strict rendering mode (triggered by the doctype declaration) as that only works in quirks mode, for the sake of retaining compatibility with a bug that originated in IE3. The rule should be "width: 784px;", as the "px" (specifying the units of the length value) is required in CSS. If this isn't where it was going wrong then I can only assume that it's some kind of weird misbehaviour by IE8. In that case feel free to post the relevant code; I'll have a play with it and, if necessary, report a bug to Microsoft.

**Numpty** · 31 January 2010, 09:51

Originally posted by NickFitz View Post

Did I say

? Well, I'll say it again:

Don't ever believe anybody who tells you that HTML is easy

__________________________________________
Last edited by NickFitz : Today at 04:34. Reason: Doh! & Doh! again...

You have no ieda how much better you have made us mortals feel.

**xoggoth** · 31 January 2010, 10:14

Cheers but that width method makes no difference either and I always use px in style. Div method may be problem on proper page (checked in online validation thingy) as is using div with auto scale/auto margin to centralise the page.

It sure isn't! Was trying to change my index page so tabs used inline li instead of tables, can't get anything to line up quite right - when I discovered above, in IE only.

Actually not sure I haven't got a broader problem with win 7 or my graphics. Import a VB6/VB.net project to this PC and all the control size/positions have similarly been scaled. I know VB.net has an auto scale but don't think that should change the values in properties before running it. They never have before when I've tested at different resolutions. A VB6 program splash screen auto scales too.

**xoggoth** · 31 January 2010, 10:43

Ah! Discovered problem. It's not an HTML problem at all. When I was first setting up the PC I used the Windows 7 screen resolution option to "make text and other items larger or smaller" and set 125%.

Put that back to default and it's ok. Presumably Microsoft progs including IE8 cater for of this Windows 7 option but others don't.

Bah. If I have to do all my dev in default mode I will need stronger glasses.

IE8/Windows 7 screwing up sizes