permaculture playing cards
The moose likes HTML, CSS and JavaScript and the fly likes UWO (Unidentified Whitespace Object) Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Introducing JavaFX 8 Programming this week in the JavaFX forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "UWO (Unidentified Whitespace Object)" Watch "UWO (Unidentified Whitespace Object)" New topic

UWO (Unidentified Whitespace Object)


Joined: Jun 23, 2006
Posts: 4
I have an image next to a span and there's whitespace between them. Why?

<div style="width: 500px;">

<span style="background-color=red; float: right;width: 328px">A</span>

<a href="">
<img src="img/block.JPG"

[ June 26, 2006: Message edited by: James Douglas ]
Roy Ivar Moe

Joined: Jun 22, 2006
Posts: 21
What is 500px - 328px?

Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63342

You're trying to do too much with hard-coded dimensions. Let the browser lay out the elements and be sure to account for line-end characters as discussed in your other post.

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]

Joined: Jun 23, 2006
Posts: 4
Ok, Roy. I deserved that. I didn't explain the situation well enough. When the above code is put in IE, the span (328px) and image (170px) won't fit side-side in the div (500px), though there should be 2 pixels to spare between them. When I decrease the span from 328 to 327, they fit. So, there are 3 pixels of "Unidentified Whitespace" between them.

As it turns out, I later came across a discussion thread where someone described a famous "3 pixel jog" in IE that occurs when a floated element is placed next to a non-floated element. I floated both elements and they fit as expected.

Bear, this code wasn't actually something I was trying to write for some production use. I came across the issue haphazardly during some CSS/DOM study and needed an answer to validate/refute/add-to what I learned.
Roy Ivar Moe

Joined: Jun 22, 2006
Posts: 21

I observed the same behaviour when I tried your example in IE and in FF.
Sorry, can't tell you what causes this though. Probably another IE bug, right?

I agree. Here's the link:
subject: UWO (Unidentified Whitespace Object)
It's not a secret anymore!