• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

UWO (Unidentified Whitespace Object)

 
James
Greenhorn
Posts: 4
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have an image next to a span and there's whitespace between them. Why?

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

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

<a href="http://www.symantec.com">
<img src="img/block.JPG"
type="image/jpeg"
width="170"
height="80"
border="0"
hspace="0"
vspace="0"/>
</a>

</div>
</body>
</html>
[ June 26, 2006: Message edited by: James Douglas ]
 
Roy Ivar Moe
Greenhorn
Posts: 21
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What is 500px - 328px?

Hmmmmm.....
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64181
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
James
Greenhorn
Posts: 4
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 21
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


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?

Regards,
Roy
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic