View Full Version : Problem with the HR tag


KNotTed
02-26-2010, 03:27 PM
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
02-26-2010, 08:15 PM
Here (http://www.mobileread.com/forums/showpost.php?p=430451&postcount=5) you go:

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

KNotTed
02-26-2010, 09:01 PM
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
02-26-2010, 09:15 PM
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
02-27-2010, 04:07 AM
In particular, it seems ADE does not support "auto" margins.

JSWolf
03-03-2010, 11:06 AM
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
03-03-2010, 11:14 AM
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
03-03-2010, 01:36 PM
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
03-03-2010, 02:56 PM
It's not a chapter separator. It's for separating sections in chapters, like * * * in some books.

Amalthia
03-03-2010, 06:32 PM
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
03-03-2010, 07:20 PM
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
03-03-2010, 07:29 PM
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
03-03-2010, 07:34 PM
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
03-03-2010, 08:05 PM
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
03-03-2010, 08:18 PM
Here's the CSS code needed to do what the OP wants to do.

...

Simple really.

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

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.)

JSWolf
03-03-2010, 08:30 PM
Well, with ADE there is no way to apply an align to an <hr />. It's a bug and the only way to do it so it works is to use % like 20% and then apply a margin to make it centered. Sorry, but that's the best way to do it and it does work.

KNotTed
03-03-2010, 08:49 PM
Yeah, most browsers also accept <hr style="text-align: center" />, but it's not standard CSS/XHTML. Using the auto margins is the correct way, but as Jellby pointed out, ADE doesn't seem to support that.

To create a separator with asterisks that has space above and below, you could do <p style="margin: 1.0em 0;">*&nbsp;*&nbsp;*</p>, which would give you the spacing without needing <p>&nbsp;</p>

I had reasons for wanting to use a fixed width, but since it's not supported, I'm not going to worry about it too much.

JSWolf
03-06-2010, 10:48 AM
Yeah, most browsers also accept <hr style="text-align: center" />, but it's not standard CSS/XHTML. Using the auto margins is the correct way, but as Jellby pointed out, ADE doesn't seem to support that.

To create a separator with asterisks that has space above and below, you could do <p style="margin: 1.0em 0;">*&nbsp;*&nbsp;*</p>, which would give you the spacing without needing <p>&nbsp;</p>

I had reasons for wanting to use a fixed width, but since it's not supported, I'm not going to worry about it too much.

But if you use 1.0em, then the spacing does change if you change the size of the font. If you want a fixed amount of spacing, use px as in 20px.