HR alignment problems

[eggheadbooks1]

Had coded in some lines into my HTML only to discover the attributes such as align and color for the hr have been depreciated. So I did some research and came up with this:

<hr style="text-align:center; border:3px solid #000000; width:70%" />

but ADE didn't recognize text-align:center. So in a rather convoluted way I coded in:

<hr style="margin-left:15%; border:3px solid #000000; width:70%" />

and it works fine in ADE and other ePub programs BUT...

I need two lines of different widths, one above the other:

<hr style="margin-left:15%; border:3px solid #000000; width:70%" />
    <hr style="margin-left:15%; border:1px solid #000000; width:70%" />

and now, because of the different line thickness, the two lines do not line up perfectly beneath each other (see attached jpeg) as they did with my old HTML4 code.

I've tried fudging the width percentage, making the top line 69% and adjusting the margins, and other such nonsense, all in vain. The difference in width wouldn't be such an issue if they would align:center properly, but as I said ADE is not recognizing that. It also does not recognize float:center for the hr element.

I have tried creating a div and imposing text-align:center on it, but while Sigil displays it properly, again ADE does not recognize it (I use ADE as a benchmark for what the book will look like in the worst ePub reader ever; if it looks okay in ADE, it'll be fine everywhere else, I figure).

Any help greatly appreciated.

Michelle

P.S. I also read it is better to create the hr in CSS, but when I tried to create two different classes of hr for the different line heights, the results were worse.

[eggheadbooks1]

Worked it out. By only specifying the left-margin indent, and lowering the top line width to 69.5%, the difference is barely legible to the naked eye. Will go with that.

Michelle

[RbnJrg]

Originally Posted by eggheadbooks1

Worked it out. By only specifying the left-margin indent, and lowering the top line width to 69.5%, the difference is barely legible to the naked eye. Will go with that.

Michelle

Also you can use CSS; try this css code in your css stylesheet:

hr {
   text-align: center;
   width: 70%;
   color: #000000;
   background-color: #000000;
}

.thick_line {
   height: 3px;
}

.thin_line {
   height: 1px;
}

And in the .html file use:

  <hr class="thick_line" />
  <hr class="thin_line" />

to display the two lines (see below a screenshot of my Kindle).

Regards
Rubén

[JSWolf]

Originally Posted by RbnJrg

Also you can use CSS; try this css code in your css stylesheet:

hr {
   text-align: center;
   width: 70%;
   color: #000000;
   background-color: #000000;
}

.thick_line {
   height: 3px;
}

.thin_line {
   height: 1px;
}

And in the .html file use:

  <hr class="thick_line" />
  <hr class="thin_line" />

to display the two lines (see below a screenshot of my Kindle).

Regards
Rubén

There is a problem with this in ADE. The fix is very simple. Replace the text-align: center in the hr CSS as follows...

hr {
margin-left: 15%;
width: 70%;
color: #000000;
background-color: #000000;
}

Then it will work and the lines will be centered. Other then that, the code is very neat and tidy.

[eggheadbooks1]

Thanks for these. Will do.

Michelle

[eggheadbooks1]

New issue:

The way I have it coded gives me two solid black lines. If I use the code suggested here, I get a beveled edge. See screen shot for comparison. There seems to be an inability of the reader to create a dark black border of only one pixel. I think what I might do here is give the client an option: the first way replicates his manuscript, the second is a bit fancier.

Michelle

[JSWolf]

On an eInk screen, a line with one pixel in height is going to be too light.

[eggheadbooks1]

Interestingly enough, when I use my simple line code with the hr style amendments instead of using CSS, the line stays dark black even on an e-ink reader. Just tested on my Kobo.

Michelle

[DaleDe]

In CSS a pixel is not a pixel; it is a pt so so depending on your ppi you may illuminate a line that is several pixels wide. This can make the line darker.

Dale

[Jellby]

Your problem with different widths happened because you were using a border all around the element, including right and left, which makes the HR look wider. Apart from the solutions already given, you could have simply used border-top and border-bottom (or "border-width: 3px 0 3px 0").

[RbnJrg]

Originally Posted by eggheadbooks1

Interestingly enough, when I use my simple line code with the hr style amendments instead of using CSS, the line stays dark black even on an e-ink reader. Just tested on my Kobo.

Michelle

Try this code in your css stylesheet:

hr {
   margin-left: 15%;
   width: 70%;
   color: #000000; /* suppress this style */
   background-color: #000000;
   border: 0;/* add this new style */
}

.thick_line {
   height: 3px;
}

.thin_line {
   height: 1px;
}

And, as before, in the .html file use:

  <hr class="thick_line" />
  <hr class="thin_line" />

I think after that, you won't have the beveled edge and your lines will be sharper.