|
| |
|
|
Nicole
Posts: 2855
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
Image overlapping text - 9/1/2005 3:37:17
Strangely I have two templates the same as each other, both of them feature an image right aligned and both have print style sheets attached to them.
Viewing the print preview for one of them is fine, yet on the other template, the right aligned image wants to overlap the text.
My code in the print style sheet for the right aligned image reads:
img.content1 {
margin: 5px;
border: 1px solid #000000;
float: right;
}
The page where the overlapping is occurring is here (Just click "Print Preview" to see the right aligned image overlapping the text)
The example with it not occurring is here tthe code for this in the print style sheet is the same as the other one.
Any ideas?
Nicole
_____________________________
|
|
|
|
caz
Posts: 3626
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Image overlapping text - 9/1/2005 9:12:17
Often people change font sizing for print styles to points, but ems are print friendly and maybe changing your border measurements to ems would help?
You might also want to look at an !important rule to establish the width in order to allow room for printing as it should - width: 100% !important;
There is the alternative of using - float: none !important; so that the image will be printed in the normal place. This was from A list apart
I normally don't use images for the print version, but in your case they are important. I can't see why there is a difference between the two pages either.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
dpf
Posts: 7126
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Image overlapping text - 9/1/2005 11:24:56
quote:
Go with the flow?
_____________________________
Dan
| |
|
|
|
caz
Posts: 3626
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Image overlapping text - 9/1/2005 13:45:41
Don't get silly on Nicole's thread children.
quote:
maybe if you didn't specify a width and just let it go with the flow then maybe it'd behave
ie make use of the document's natural flow (for anyone reading this thread later).
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
Nicole
Posts: 2855
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: Image overlapping text - 9/2/2005 4:05:18
Okay, after a day of sorting out this particular problem and the other problem mentioned in my previous post, I think I've fixed them, but would appreciate if those who looked at this problem yesterday could look again now to see if all is well in print preview view on their computers.
Now, assuming that the images aren't now overlapping the text, the problem seemed to have been simply a lack of margin width (for want of a better term) for images aligned to the right in Firefox. I'm aware that Firefox and IE interpret the margin property differently, and to counter this, I've made the margin-right property greater in the Print Style Sheet so that it prints okay using Firefox.
I also stumbled upon a number of other issues regarding margins/borders/padding with these templates which I also believe I've solved, and from now on I think I'll be adding a border to any image using Paint Shop Pro rather than styling an image border with CSS or inline styling. I think it'll just eliminate the hassle of having to worry about how these different browsers are going to treat a border.
The other thing I've learnt is that unless you have many images like thumbnails that are all going to appear the same, don't bother styling images with CSS if you intend to create a Print Style Sheet also, as you'll be forever adjusting the margins. (I do believe I've been told that before" )
Thanks all for your help, appreciate it very much, but also please let me know if the print preview image overlap still isn't working.
Nicole
_____________________________
| |
|
|
|
caz
Posts: 3626
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Image overlapping text - 9/2/2005 6:30:43
Fine in IE and Opera (8.0 Windows 2000 ) OK in Fx, but a little close to the text; however if I readjust
my right margin to 10 instead of 12.2 in print preview it looks better and hey the text reflows! I am inclined to say that now it is up to the user to know their printer and it's settings.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
The only other thing I would suggest trying (for no logical reason) is to re-name the offending image and see if that makes any difference.
