Home → Questions →

What needs to be included in Custom CSS to have the <hr> or <!--BREAK--> function as a page break?

• Edit

Judi Smith

08 Aug, 2012 12:22 AM

Hi all. I'm trying to hack together a custom CSS for my letterhead. I've gotten pretty much everything I need. However as there is still no way to set bottom page margins, I am looking to manually place the page breaks. I have the custom CSS working fine in all other respects.

I notice that when I use the Custom CSS sample, the

---

and the <!--BREAK--> tags work as expected. But in my CSS, they produce no effect.

Thanks!

1. Support Staff 1 Posted by Brett on 08 Aug, 2012 01:57 AM

   

   It may not be as much about what you're including as what you're overriding. The CSS that allows the page breaks to happen should be loading either way, so it might be possible that your CSS is doing something to interfere with the normal behavior. Do you have a sample CSS file I could test with? And are you using the default MultiMarkdown processor?

   • Edit

2. 2 Posted by Judi Smith on 08 Aug, 2012 02:36 AM

   

   Hi Brett,

   Here's a link to the CSS file that I am using "JSL_Style.css" in my Dropbox:

   http://db.tt/XVjkUOpi
   I don't think it will matter for testing purposes, but there is a
   dependency on an image for a background that functions as a header.

   Kind regards,
   Judi Smith

   The Law Office of Judi Smith, LLC
   Intellectual Property, Tax and Business Attorneys
   1155 S. Washington St. Suite 101
   Naperville, IL 60540
   (630) 506-5548

   • Edit

3. Support Staff 3 Posted by Brett on 08 Aug, 2012 02:45 AM

   

   Yep, it's the float: left on the body tag that's doing it. What's the goal of that style? I might be able to help find another method.

   • Edit

4. 4 Posted by Judi Smith on 08 Aug, 2012 03:27 AM

   

   There is a background image that functions as a header. I used the
   float left to position it at the top. Everything above the date is
   contained in one image that is as wide as the page. See attached
   sample.

   • image.png 44.7 KB
   • Edit

5. Support Staff 5 Posted by Brett on 08 Aug, 2012 04:06 PM

   

   If you set the image as a background on the body with top padding and no repeat, it should accomplish this for you.

   body {
       margin: 0;
       padding: 0;
       background: #fff url(banner.png) repeat-x 0 0;
   }
   

   If that doesn't work, you might try something like this

   body {
       margin: 0;
       padding: 0;
       overflow: hidden;
       height: 8in;
       background: #fff url(coverpage.png) no-repeat 0 0;
       padding-top: 300px;
   }
   

   • Edit

6. 6 Posted by Judi Smith on 10 Aug, 2012 01:32 AM

   

   Yep, getting rid of the float-left did it.

   • Edit

7. 7 Posted by Jackson on 13 Aug, 2012 09:48 AM

   

   I am very new to html and have a question regarding the hr tag (

   ---

   ). Is there any possible way to have multiple

   ---

   's on a page with different widths? For example, I have 2

   ---

   's dividing content on the leftside of my page. on the right side of the page i have a chart and an image and i would like to divide the chart and image using an hr with a smaller width than the

   ---

   's on the ;eft side is there any way to do that?
   Again keep in mind i am only 16 and just starting html and css any help would be appreciated, thank you.

   here is a screenshot of my page

   • Untitled.jpg 243 KB
   • Edit

8. 8 Posted by Jackson on 13 Aug, 2012 09:52 AM

   

   I am very new to html and have a question regarding the hr tag. Is there any possible way to have multiple hr's on a page with different widths? For example, I have 2 hr's dividing content on the leftside of my page. on the right side of the page i have a chart and an image and i would like to divide the chart and image using an hr with a smaller width than the hr's on the left side is there any way to do that?
   Again keep in mind i am only 16 and just starting html and css any help would be appreciated, thank you.
   here is a screenshot of my page
   (Repost sry)

   • Untitled.jpg 243 KB
   • Edit

9. Support Staff 9 Posted by Brett on 13 Aug, 2012 01:01 PM

   

   It's possible with custom markup, but it would require adding classes and custom CSS that goes beyond the support that I can offer as part of Marked. By default, Marked cannot do this, and neither can any standard Markdown.

   • Edit

10. Brett closed this discussion on 26 Aug, 2012 08:03 PM.