Webmaster Sun Login
Not a member yet? Sign up

bad print layout due to HTML main element in one website

  • HOME
  • FORUMS
  • BLOGS
  • MARKETPLACE
  • ADVERTISING
  • SPECIAL OFFERS
  • WEB HOSTING
  • QUICK MENU
  • REGISTER HERE - Join us for FREE
Results 1 to 18 of 18
    Stick this thread
  1. #1
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts

    bad print layout due to HTML main element in one website

    The layout for printing is defective if the HTML main element is present, but browser display is fine either way. Even printing is okay in one browser but not in another and both are well known. The basic layout is 3 columns plus header and footer. The print fault is that the middle column's text overlaps past the right column and the middle-column text's right edge is so far that most lines get cut off so text won't all be printed. I tried setting CSS to "display: block" and setting the ARIA role to main, presentation, none, and 4 combinations thereof and no set role (the role main is the default and desired so it should not be set). A div element includes the main element but also includes more that has no problem, so the div is not at fault. The only fix I've been successful with is commenting the main tags out, but I'd rather have the tags, because I think they help accessibility for people with disabilities. The problem is probably true of the whole website but not of any other website of mine, all of which are based, with variations, on the same template of mine. Suggestions, please? Thank you.

  2. #2
    Join Date
    May 2016
    Posts
    640
    Thumbs Up/Down
    Received: 70/1
    Given: 763/2
    Thanks
    48
    Thanked 51 Times in 50 Posts
    Can you send codes or screenshots where are the problems and how you want to fix it? It is hard to imagine to help you by reading your explanation via words.

  3. #3
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    In the browser that is printing wrong... Check the printer margins. Set them smaller and see what happens.

  4. #4
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hopefully I can submit snapshot.png as an attachment with this reply. You can see that the article's headline is truncated on the right even though it's wrapped; "Honoring Living People" is truncated into "Honoring Li People" ("People" is wrapped to the next line).

    Margins either can't be set (which surprised me but they can't in one well known but somewhat outdated browser) or, in another well-known browser, don't make much difference.

    I applied a kludge in that I commented out the "main" tags on the whole site, so visiting the site live likely won't show the problem.

    I'd like to decomment the main tags, because they support accessibility, but decommenting requires some solution other than my kludge. The source code is visible.

  5. #5
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    Exactly what browser are you having the problem with?

  6. #6
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I doubt it matters, since I want most people to have the proper experience, but the complaint came from someone who seems not to be a geek, so is likely using whichever browser comes with Windows these days, and I had the problem with Firefox 47.0 (kind of old). Google Chrome is okay but I don't want to ask everyone to install that. By the time I tried FF 52.2.0 and IE 11, I had already put my kludges into my HTML.

  7. #7
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    Quote Originally Posted by Nick_Levinson View Post
    I doubt it matters, since I want most people to have the proper experience, but the complaint came from someone who seems not to be a geek, so is likely using whichever browser comes with Windows these days, and I had the problem with Firefox 47.0 (kind of old). Google Chrome is okay but I don't want to ask everyone to install that. By the time I tried FF 52.2.0 and IE 11, I had already put my kludges into my HTML.
    So it's really a page that the user needs to print out? If that's the case, don't use HTML. Create a PDF for them to download and print out.

  8. #8
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I need HTML.

    A PDF solution is too geeky for the individual case and way too geeky as a general solution. People use browsers and give Print commands and expect something they can read in full. Most people don't have the confidence to try more complicated methods. And I don't want to be creating a PDF every time I create new content or revise it in addition to creating the HTML pages so people can see them after Googling for what they're interested in (which I hope is my content). And all of my websites are in HTML (with a little PDF content for scans) but this problem is occurring with only this website. Plus I want accessibility, which the "main" element is supposed to support.

    Any ideas? Thanks.

  9. #9
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    Quote Originally Posted by Nick_Levinson View Post
    No, I need HTML.

    A PDF solution is too geeky for the individual case and way too geeky as a general solution. People use browsers and give Print commands and expect something they can read in full. Most people don't have the confidence to try more complicated methods. And I don't want to be creating a PDF every time I create new content or revise it in addition to creating the HTML pages so people can see them after Googling for what they're interested in (which I hope is my content). And all of my websites are in HTML (with a little PDF content for scans) but this problem is occurring with only this website. Plus I want accessibility, which the "main" element is supposed to support.

    Any ideas? Thanks.
    In that case..... Redisign the site so it works the way you want. You already know your current design is not going to work the way YOU want. So scrap it and start over with a different design and layout.

    If you have a site that works fine.... Mimic it.

    Did you check the HTML to make sure it is 100% valid? No missing div tags or closing tags etc??? Run the page through a HTML validator and see if it shows any problems. Also make sure ALL HTML you are using is valid for all browsers. Not all browsers support all of HTML. Or support it in their own way.

  10. #10
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Total redesign is overkill. Three sites work fine. All four sites came from the same template, which I made and update. A whole new layout would mean rethinking a lot of issues, mainly user experience, in order to shun the old way, which mostly works even on this site, but not knowing where this problem is originating (except it surely seems to be the "main" element) would mean spending months that I'd rather use for other things, like creating content and getting more visitors.

    I did mimic. This site is the third; it mimicked the second, which was fine. The fourth site mimicked this one; the fourth is fine. But each mimic is in some ways different, mostly because I learn things or make improvements that I don't always apply retroactively (sometimes I do). Redoing this site by mimicking the fourth backwards would be a huge undertaking, likely costing months.

    I have done validation, including checking for stray tags (I sometimes copy the open tag id/class value into a comment next to the matching end tag to check for strays.)

    I don't think it's possible to check that all HTML and associated languages (e.g., PLS) are fully and properly implemented in all browsers, although a few websites try to support that possibility such as by listing compliant browsers according to feature. If MS IE is noncompliant, and IE is infamous for that, doing only what IE is compliant for likely means writing a rather bad website (many designers use hacks and kludges, which get messy quickly). My problem arose with a recent version of Firefox and FF has long had a good reputation for compliance with specs like HTML. I read and use the specs for HTML and some other languages hosted at w3.org although one could legitimately use the HTML Living Standard spec (I don't).

    I can believe that I've made a mistake that's stupid, and maybe if and when I discover it I'll send myself to bed without dinner. But I want to discover it and eat breakfast the next day.

    Better to find a narrow solution with respect to the HTML "main" tags or whatever is causing the problem. What should I try next? Thanks.

  11. #11
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    Quote Originally Posted by Nick_Levinson View Post
    Better to find a narrow solution with respect to the HTML "main" tags or whatever is causing the problem. What should I try next? Thanks.
    This can't be helped without more information. It's like blind leading the blind.

    1. Provide the HTML page that is having issues.

    2. Provide the exact steps to recreate the problem.

    3. Provide the HTML to the page you used as a template that does not create the problem.

  12. #12
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't supply the page URL with the printing problem, since I already made a kludgy repair (commenting the main tags out) and that made the printing problem go away, but the kludge gives me an accessibility problem and I don't know how to demonstrate that except to say that I'm not following the HTML spec on that point (I'm supposed to have the main element but I effectively don't). I also don't want to revert the kludgy repair just for a demonstration, because other visitors might come across it at the same time. The printing problem used to be at this site (Webmaster Sun says I can't post links basically because I'm new): for the domain type the word "law" then the word "slip" then a dot and a com, go to Humorous, and go to A Postage Stamp on the Constitution Accidentally Honoring Living People.

    Back when the printing problem could be reproduced, here were the steps: 1. Open the page in your browser. 2. Give the Print Preview command (or perhaps simply Print). 3. Observe that the main text, which occupies the middle column below the page header and above the page footer, overflows the entire width of the right-hand column and tries to go farther than the right edge of the viewport (here the printable area on the paper), so that, on most lines, text gets truncated on the right, meaning that a fraction of the article text is missing altogether and the overlap with the right-hand column makes reading of either column harder. 4. You can try changing page margins, etc., but the goal is to have it work in the commonest way so that ordinary non-geek users can get a readable printout.

    The template is a separate offline file of mine but the preceding website made from the same template has the domain formed from the word "slash" followed by the word "sleep" followed by a dot and a com.
    Last edited by Nick_Levinson; 05-08-2018 at 08:29 PM. Reason: substantive error & minor spelling corrections (deleted statement actually true of 4th site)

  13. #13
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    I see what you are talking about when using Firefox. The middle column is just way to wide for the page. If I click shrink to fit page it prints fine. If other pages work, then it's an element on the page that is causing the problem.

    Try removing all elements and adding them back one at a time.

    Possibly try something like...

    <style type="text/css" media="print">
    body {
    zoom:75%; /*or whatever percentage you need, play around with this number*/
    }
    </style>

  14. #14
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Interesting; for me, Firefox defaults to Shrink to Fit and has the problem anyway (using an offsite page that has the "main" tags active), even if I go away from Shrink to Fit and back again. I also validated; nothing there explains this. The problem was likely with all of the pages at that site although not with my other 3 sites. But I like the CSS idea and plan to try something like it (I use *.css files) soon.

  15. #15
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    Quote Originally Posted by Nick_Levinson View Post
    Interesting; for me, Firefox defaults to Shrink to Fit
    I believe Firefox saves the last state of the shrink to fit checkbox. So once you check the shrink to fit box, it stays that way until you un-check it.

  16. #16
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Menu on mine but I should upgrade soon anyway and you're likely right about last-state storage. I should get to the CSS this weekend, I hope. Thanks.
    Last edited by Nick_Levinson; 05-11-2018 at 01:57 AM. Reason: Added content.

  17. #17
    Join Date
    May 2016
    Location
    USA
    Posts
    1,531
    Thumbs Up/Down
    Received: 470/1
    Given: 27/1
    Thanks
    13
    Thanked 192 Times in 176 Posts
    Quote Originally Posted by Nick_Levinson View Post
    Menu on mine but I should upgrade soon anyway and you're likely right about last-state storage. I should get to the CSS this weekend, I hope. Thanks.
    I'm using Firefox Quantum 59.0.3

  18. #18
    Join Date
    Mar 2018
    Posts
    9
    Thumbs Up/Down
    Received: 0/0
    Given: 0/0
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I solved it. This is tentative; it may be a while before I take the time to put into fixing and testing it (and maybe I'm wrong and will have to roll my changes back and try again).

    It wasn't about zoom anywhere in CSS. Two problems were present.

    One was that I had CSS for main with display as block for this website and not for the other 3 websites and that coincided with the problem occurring with this website and not with the other 3 websites. I don't remember why I set display as block in the first place, likely when the site went live long ago. I think I can take the setting out.

    The other problem is that for the @media rule for print I had set CSS for main with width at 1300px but 600px works. That's puzzling because for other websites 1300px is my setting and it seems to work and all of the websites use 3-column layouts at those horizons of the page. But maybe I get to use the main element again and I can live with 600px for this site.

    I haven't decommented the main element, the website having a great many pages and all would need that editing, but I think I'm on the right track now.

    Firefox: I upgraded past your version and I still have a menu, not a checkbox, for Shrink To Fit. But I'm looking at what I guess is a toolbar (File > Print Preview > toolbar (?) > Scale menu > Shrink To Fit) while you probably were using the Print dialog that's inside Print Preview (File > Print Preview > toolbar (?) > Print > Options tab > Print Frames > Ignore Scaling and Shrink To Fit Page Width checkbox). (FF version 60.0.2 (64-bit) fedora - 1.0 (Quantum) (upgraded since).) I don't program frames, which are deprecated.

    Thanks.

Newer Threads

  1. amelia88
    simicartan
    Replies: 6 | Views: 683
    Last post by simicartan, 08-31-2018, 03:46 AM
  2. SIG
    SIG
    Replies: 2 | Views: 883
    Last post by SIG, 07-01-2018, 10:39 AM
  3. venkatweetz
    venkatweetz
    Replies: 0 | Views: 237
    Last post by venkatweetz, 05-03-2018, 05:17 PM
  4. airwolf
    Marc van Leeuwen
    Replies: 4 | Views: 313
    Last post by Marc van Leeuwen, 05-05-2018, 12:33 PM
  5. ebookpool
    Hey You Guyys
    By ebookpool in forum New Member Introductions
    DarranD
    Replies: 4 | Views: 560
    Last post by DarranD, 05-09-2018, 10:42 AM

Older Threads

  1. SenseiSteve
    SenseiSteve
    Replies: 2 | Views: 392
    Last post by SenseiSteve, 05-01-2018, 04:29 PM
  2. Namoh
    Namoh
    Replies: 0 | Views: 415
    Last post by Namoh, 04-30-2018, 04:19 PM
  3. Castro_Mike
    Castro_Mike
    Replies: 0 | Views: 404
    Last post by Castro_Mike, 04-29-2018, 09:22 AM

Latest Threads

  1. hynds
    hynds
    Replies: 0 | Views: 33
    Last post by hynds, 10-19-2018, 10:12 AM
  2. andrewsmith02914
    andrewsmith02914
    Replies: 0 | Views: 68
    Last post by andrewsmith02914, 10-17-2018, 09:14 PM
  3. Swiftnode
    Marc van Leeuwen
    Replies: 1 | Views: 110
    Last post by Marc van Leeuwen, 10-15-2018, 09:43 AM
  4. joyceburrou
    Fredrick
    Replies: 4 | Views: 135
    Last post by Fredrick, 10-16-2018, 04:34 PM

Similar Threads

  1. WebsiteIntegrations
    WebsiteIntegrations
    Replies: 0 | Views: 834
    Last post by WebsiteIntegrations, 12-06-2017, 10:04 AM
  2. Joseph_Hill
    web2bizz22
    Replies: 9 | Views: 3253
    Last post by web2bizz22, 11-24-2014, 12:31 PM
  3. webdesign
    abebi123
    Replies: 11 | Views: 4136
    Last post by abebi123, 10-04-2013, 10:22 AM
  4. KellyLC
    KellyLC
    Replies: 0 | Views: 1318
    Last post by KellyLC, 06-20-2013, 01:56 PM
  5. Openworld
    kangalina
    Replies: 1 | Views: 2887
    Last post by kangalina, 01-07-2013, 12:13 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Internet Marketing Forum

Webmaster Sun is a forum where you’ll find in-depth discussions and resources to help you succeed on the web whether you are new or experienced. You’ll find it all here. With topics ranging from internet marketing, search engine optimization, social networking, make money online, web hosting, affiliate marketing as well as hands-on technical support for web design, programming and more. We are a growing community of like-minded people that is keen to help and support each other with ambitions and online endeavors. Learn and grow, make friends and contacts for life.

Come Hang Out With Us

    Facebook Twitter Webmaster Forum Google+

    Webmaster Sun Logo
Copyright ©2012 - 2018, WebmasterSun.com. All rights reserved. Internet marketing forum for internet marketers, webmasters, web hosting providers, designers and affiliate marketers.

Welcome to Webmaster Sun

The World's Number 1 Webmaster Community, SEO and Marketplace

Log in!

Continue with Facebook
Continue With Email. By signing up you indicate that you have read and agree to the Terms of Service and Privacy Policy.

Sign in Manually

Need an account? Sign up now!