Problem with the HR tag

[KNotTed]

I'm using the HR tag to create a divider between chapter sections (since the break won't always be in the middle of the page, and it would be nice to know that there is a break). However, I don't want the line to go across the whole page. For my HR tag I'm using the following CSS:

hr { 
  width: 20%; 
  border: 1px solid black; 
  background-color: black; 
  margin: 0 auto; 
}

This works fine when I preview the HTML on firefox and IE 8. However, when I open the epub in ADE and on my PRS-505 the HR is left-aligned. FWIW, I've also tried using text-align: center in the CSS for HR tags.

Does anyone have any experience/tips for correcting this?

[charleski]

Here you go:

hr { 
  width: 20%; 
  border: 1px solid black; 
  background-color: black; 
  margin-left: 40%;
}

[KNotTed]

That's a good solution for the particular question. I suppose I should have been more (or less) specific. Supposing the width is not 20%, but 120pt. I'd still like to be able to center that, regardless of the display device.

[charleski]

Using % will automatically adjust for display width. ADE's handling of hr tags is a bit buggy and doesn't respect the normal styling options. If you absolutely need a centred rule of a specific size your best option is to embed an image.

[Jellby]

In particular, it seems ADE does not support "auto" margins.

[JSWolf]

Originally Posted by KNotTed

I'm using the HR tag to create a divider between chapter sections (since the break won't always be in the middle of the page, and it would be nice to know that there is a break).

Why have an HR for a chapter separator? That's bad form. The proper form is to have each chapter start on a new page.

[frabjous]

Originally Posted by JSWolf

Why have an HR for a chapter separator? That's bad form. The proper form is to have each chapter start on a new page.

That may be true/appropriate for most books, but I don't believe that one style fits all.

[JSWolf]

Originally Posted by frabjous

That may be true/appropriate for most books, but I don't believe that one style fits all.

But, if you keep chapters together, you risk not being mobile ADE compatible.

[KNotTed]

It's not a chapter separator. It's for separating sections in chapters, like * * * in some books.

[Amalthia]

Originally Posted by KNotTed

It's not a chapter separator. It's for separating sections in chapters, like * * * in some books.

I'm tempted to use HR instead of *** because it looks like with the HR tag you can maybe add more space around it whereas the *** you have to add another blank paragraph before and after to create more space. However, I also originally had problems with the line going all the way across so I stuck with the *** because it worked at the time.

[KNotTed]

Well, *** can have extra space above and below by just defining a class that specifies top and bottom margin. No need to add extra paragraph tags.

[kovidgoyal]

Try this

<div style="width:100%;text-align:center">
<span style="width:75%; border-bottom:solid black 2px">&nbsp;</span>
</div>

Though this is rather html specific and is unlikely to translate well when converted.

[Amalthia]

Originally Posted by KNotTed

Well, *** can have extra space above and below by just defining a class that specifies top and bottom margin. No need to add extra paragraph tags.

Well it's rather easy to add <P>&nbsp;</P> I'm not sure what is required for a class tag?

[JSWolf]

Here's the CSS code needed to do what the OP wants to do.

hr {
  margin-left: 40%;
  width: 20%
}

And to invoke it in the book, just do...

<hr />

Simple really.

[frabjous]

Originally Posted by JSWolf

Here's the CSS code needed to do what the OP wants to do.

...

Simple really.

Umm, no. To quote the the original poster...

Originally Posted by KNotTed

That's a good solution for the particular question. I suppose I should have been more (or less) specific. Supposing the width is not 20%, but 120pt. I'd still like to be able to center that, regardless of the display device.

I know the center tag is deprecated, and bad form, but you might have better luck with <center><hr /></center>. (EDIT: Nevermind. Tried it, and it doesn't work in ADE, though it does work in browsers. Darn ADE.)