www.webdeveloper.com
Results 1 to 9 of 9

Thread: Inherited <h#> attribute messing up Print

  1. #1
    Join Date
    Mar 2003
    Location
    UK
    Posts
    5

    Question Inherited <h#> attribute messing up Print

    I have a <div> controlled two column layout in my site (www.robvantol.net). The Right hand column is an alternating set of <h2> and <h3> tags, to create a stripped effect.

    This works fine, except for a bug in Printing (you can look at it using Print Preview). In IE6 the column runs on and on for pages, overlapping the two tags. In NN6/Moz the column is rendered OK, but stops at the bottom of the first page. And in Opera 7, is prints properly.

    Obviously these Browsers (except Opera) are adding properties to these header tags that I haven't set in my style sheet. Anyone have any idea which attributes I have to set to zero to override the Browser's own style sheet? Or a URL that describes the attributes the Browsers add-on for "free"?

    Cheers, Rob
    Last edited by robvantol; 03-11-2003 at 03:55 AM.

  2. #2
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    I must be looking at the wrong thing but I couldn't see much difference in Print Preview between IE6, Mozilla and Opera.

    They all looked the same at 4 pages long and the printout's looked the same.

    Perhaps I misunderstood you.

    Paul

  3. #3
    Join Date
    Mar 2003
    Location
    UK
    Posts
    5
    Thanks for looking Paul. Couple of things

    One I forgot to mention: the problem only occurs if the right-hand column goes over one (print) page in length. To see a good example, see my links page:

    http://www.robvantol.net/html/rvt-l2-links.htm

    And one I didn't realise, on the homepage I'd added media=screen to the <link rel="stylesheet" type="text/css" href="rvt01.css" /> line. I wondered what that did! I didn't realise this would change the homepage's print behaviour. Which offers an alternate possibility to fiddling with the <h#> tags attributes, preparing a separate style sheet for print media. (I've taken it off for now).

    cheers, Rob

  4. #4
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi Rob,

    I can see the problem on the other page.

    I was going to suggest you use media="screen" anyway and then use media="print" in another stylesheet to control the print layout.

    If you use media ="screen" your page will print out without css formatting and you can just set up a few simple formats in the print stylesheet. You can hide images/elements/divs etc by using display : none in your print stylesheet.

    I think you've probably realised this anyway.

    Paul

  5. #5
    Join Date
    Mar 2003
    Location
    UK
    Posts
    5
    Thanks Paul. I'll give the media=print styel sheet a go.

    This links looks like it will sort me out: http://www.webreview.com/style/2000/01_07_00.shtml

    Rob
    Last edited by robvantol; 03-11-2003 at 06:11 AM.

  6. #6
    Join Date
    Dec 2002
    Posts
    39
    PS: Ie 5.5, win nt at 1280 res, cant read a single thing on the page without using the font size buttons in IE. Normally because fo work pages, I have it defaulted to small.. Well, your page, the fonts are now so small they are unreadable..

    Course if I adjust the font size in IE medium, its fine..

    Just an fyi...

  7. #7
    Join Date
    Mar 2003
    Location
    UK
    Posts
    5
    Well, if you're using 1280 AND the smaller view in IE, you've either got good eyes, or many websites set their fonts to fixed sizes, or both!

    This discussion group is mainly fixed font, for example - flicking between Meium - Smaller and even Smallest views have almost no effect. But then using Larger and Largest views have only a small effect too.

    Fixed fonts are a bad thing for people with poor eyes. My CSS uses ems for font size, with allows the range of font sizes to be much greater - so that Largest view is GIANT SIZED

    That said, I think I've over done the difference between the main body text, and the text in the side panels, and that needs tweaking to make the panel text larger. Then it probably would be viewable in the Smaller view.

    Cheers for the comment

    Rob

  8. #8
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    You should NOT use <h#> for layout. Structurally, <h#> mean headings, you seem to be using it just for layout. What stops you from using <div class="myh3style"> and div.myh3style{... /* CSS info */ }

    Anyway, I am not sure what exactly is the error and why its being caused. So sorry if the reply wasn't much of a help.

  9. #9
    Join Date
    Mar 2003
    Location
    UK
    Posts
    5
    Well of course, the sadness is, I did use <div> for layout, till someone advised me to use <h#>. So the next version of the site will swop them all back - what a bore.

    But of course, <h#> do have layout properties, thanks to their inheritant properties in the broswers - so if you use them at all, but do not override the inheritant browser style sheet, then your content will still have structure. Which is one of the guidelines of the W3C for level 2 accessibility - it allows your CSS to be switched off and the page to still have some meaning.

    Oh well. You live - code wrong - and learn.

    Rob

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles