Can anyone explain the weird presentation behavior in the UI screenshot above? As you can see, there’s an undesirable separation between the insurance type and the top of the row. When looking at the code via Firebug, there’s a clear break in the code. You can view this oddity in the code screenshot below.
The div.insurance-type parent container has no CSS styles. In other words, the vertical-align property, the margin-top property, the padding-top property, and the float property are set to default values and don’t inherit a value that might cause this presentation. The children divs have this style:
div#worklist table tr td.col-InsuranceType div.insurance-type div {
display: block;
margin-bottom: 2px;
margin-left: 25px;
}
The span.insurance-company has this style:
div#worklist table tr td.col-InsuranceType div.insurance-type span.insurance-company {
font-weight: bold;
}
The components of this web app are:
- ASP.NET MVC 3
- Razor View Engine
- jQuery 1.5.1
- SQL Server 2008
- IIS 7.5
This issue occurs in FF4, IE8 and IE7. Please let me know if you know the root cause of this unexplainable presentation behavior.
Thanks.
This is just a guess since I can’t see the actual page, could there be some garbage character between the td and div that even firebug has trouble displaying? If the content is not client-side generated (ie: via Ajax), try viewing the source in Firefox (Ctrl-U or Cmd-U) and see if there is any weird character in there. I would even go as far as looking at the raw data in Fiddler.
On a different note,
<div class="bold">is bad practice (not semantic), use<strong>instead. 🙂