/    Sign up×
Community /Pin to ProfileBookmark

Inherited <h#> attribute messing up Print

Copy linkTweet thisAlerts:
Mar 11.2003

I have a <div> controlled two column layout in my site ([url]www.robvantol.net[/url]). 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

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_O_BMar 11.2003 — 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
Copy linkTweet thisAlerts:
@robvantolauthorMar 11.2003 — 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
Copy linkTweet thisAlerts:
@Paul_O_BMar 11.2003 — 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
Copy linkTweet thisAlerts:
@robvantolauthorMar 11.2003 — 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
Copy linkTweet thisAlerts:
@cdxrevvvedMar 15.2003 — 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...
Copy linkTweet thisAlerts:
@robvantolauthorMar 17.2003 — 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
Copy linkTweet thisAlerts:
@nkaisareMar 17.2003 — 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.
Copy linkTweet thisAlerts:
@robvantolauthorMar 17.2003 — 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
×

Success!

Help @robvantol spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...