image 200px adds 1px due to inline styling?

How do I make a 200px not take up 201px of width?

[JAB Creations]

I'm more then familiar with the box model for block elements however I'm having difficulty with an inline element, specifically an image.

I have a two column layout with a right sidebar. The sidebar is 200px and the image inside the sidebar is 200px. The whole page is inside of a divisible element with overflow.

Firefox renders an extra pixel on what I theorize to be the right side of the image. When I set the image to 199px I can see a single empty pixel of space on the side. But when I set the image to 200px to completely fill in the sidebar it creates a horizontal scroll on the main overflow element! So there is something about the inline box model that is adding 1px to the total width. I don't wish to cheap out and set the image to display as block though. Suggestions?

- John

[Setek]

As far as I've tested, with or without a full and correct doctype, Firefox still displays a 200px wide

<img />

that's in a 200px wide

<div>

as 200px.

Are you sure you don't have something slightly off with your box? Like, you don't really have a 198px wide

<div>

that has 2px worth of padding or border?

Or, possibly an overlooked bit of CSS on the

<img />

itself?

When there's a correct doctype, Firefox renders an inline image with extra "space" below it, because it's being rendered with a

vertical-align

of

baseline

, but that's below it, not to the side of it.

[JAB Creations]

All my work is done as XHTML 1.1 served as application/xhtml+xml and is WAI AAA compliant. The div the image is inside of is set to 200px with 0 border, margin, and padding total on all four sides.

It's VERY odd that I'm not having the issue now. After XP refused to work cloning to to an older drive (to prepare my Raid 1 for Vista) I did not have SeaMonkey installed on the clean install just yet. Usually I check with the same rendering engine and version if I can. Now I'm curious as to why Firefox got stuck? I've witnessed Firefox at least once not reloading when pressing the reload button but would reload when pressing the no-longer a go button "go button".

- John

[Setek]

Hmm, maybe you were just cached then, with a previous width to the image? :)

[JAB Creations]

Locally? LoL...

[Setek]

Hahah good point :)

Let's.. just... call it ghosts in the machine then

If it's all fixed then it's all good