Uneven Space, Horizontal Rule, Kindle for iOS

[bwdrennan]

Hello,

Can you help work out a problem?

This is occurring on Kindle for iOS v3.0.1, on iPod Touch running iOS 5.1.1, which should behave the same as an iPhone.

With an h2 headline sandwiched between upper and lower horizontal rules, there is a small space between the headline and the upper rule, and a large space between the headline and the lower rule. This mismatch looks awkward. I would like the spaces to be the size of the smaller spaces, and be even.

I'm convinced that this issue is related to the way the Kindle app renders the tag "hr," because with the rule at the top of the screen, there is also an awkward and unwelcome space above the upper rule.

This renders as desired, with equal space above and below, on Kindle for Android v3.5.1.1 running on Android 2.3.3., and on (basic) Kindle running v4.0.

Developer info (referenced by Amazon in the current "Publishing Guidelines," in the information about the tag "hr") states that Mobipocket does not support the attribute "style" for the tag "hr."
http://www.mobipocket.com/dev/articl...TagRef_OEB.htm

With this HTML:

<hr class="rdrule" />
<h2>Headline Text</h2>
<hr class="rdrule" />

CSS for h2 is:

h1, h2, h3, h4, h5, h6 {
hyphens: none;
-moz-hyphens: none;
-webkit-hyphens: none;
page-break-after: avoid;
adobe-hyphenate: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
text-align: left;
}

Already tried this (apparently not supported anyway):

.rdrule {
height: 5px;
color: #ee2742;
background-color: #ee2742;
margin-top: 0;
margin-bottom: 0;
padding: 0;
} /* red rule */

and already tried deleting the attribute "class" from the hr tag and adding this in the style sheet:

hr {
margin: 0;
padding: 0;
}

According to the above Mobipocket developer info, any solution that relies on a style should be ineffectual.

When I added a top margin of 70px to the h2, it rendered with large, even spaces above and below, but I would like to have small, even spaces. Plus, that rendered on other two devices with uneven spaces.

When I added a bottom margin of -50px to the h2, it had no impact on the iPod, nor on the Kindle, and rendered illegibly on the Android device.

Any solutions available that look good on all devices?

Thanks,
Bryce