Solved

Align vs Float IE Print

Posted on 2007-11-25
6
940 Views
Last Modified: 2008-09-26
Hi all, something strange here. I know that most people use IE so I'm hoping to get this issue sorted.

I have re-written my complete site so to be complete CSS and have come across yet another problem with IE 6.

THe site is written to comply with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And it passes so I'm very pleased.

The problem is that if I have an image float left, and <p>CONTENT</p> to the right, and try to print the page in IE6 the <p>CONTENT</p> drops below the floated image.  If I use align left, all works fine but then I am not complying with the rules of xhtml strict so the page fails.

I've also noticed that I seem to have no problem with <h1> and <h2>.

Now the question is, am I doing something wrong or is this yet another bug up the bum of IE?

Any ideas would be appreciated.

AJ  
0
Comment
Question by:jezella
  • 4
  • 2
6 Comments
 

Author Comment

by:jezella
ID: 20345979
Perhaps a bit of my code would help.

<div id = "MainContent">
<img src = "/site-images/home-page/welcome-page-header.jpg"
alt = "Ashley Wedding Cars where Quality Still Matters"
width = "477"
height = "295"
class = "MainImageTL"/>

<h1 id="H1AlignR" class="InitialHeading">Wedding Cars for Surrey, Sussex, Berkshire, Bucks, Kent, Middlesex
                                    and the London Boroughs.</h1>

<h2 id="H2AlignR">Specialists in Wedding Transport</h2>
                                    
                                    
<p class = "FirstPara">
            <img src = "site-images/fonts/a.jpg"
                         width = "56"
                                           height = "45"
                                           alt = ""
                                           class = "CapitalImage"/><span class = "NeverShow">A</span>shley Wedding Cars                  
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20346054
If you just float the image to the left, the other elements doesn't have to the floated, they would just flow around the image.

Try if that works better.
0
 

Author Comment

by:jezella
ID: 20346080
Hi GreenGhost.  Everything works fine on screen in IE6, FF and Opera.  Print is ok in FF and Opera.  The problem is in IE.  Have a look at how print preview look in IE6 with this link.

http://www.website-design.org.uk/about-us.php
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
LVL 29

Accepted Solution

by:
Göran Andersson earned 500 total points
ID: 20346239
Yes, I know. It looks the same in IE7.

Upon examining your code closer, I see that you don't float the elements to the right, your are using an incorrect value for display:

display: right;

This has no effect what so ever (other than preventing the css from being valid). You should validate the css anyway, there are some more mistakes in there...

http://jigsaw.w3.org/css-validator/

I don't know exactly why, but when IE does the layout for the print, it thinks that there is not enough room for your text. If you make the image smaller (I think it's too big in the printout anyway), it works just fine.

Add this to the #MainContent img.MainImageTL style in the print css:

width: 400px;
height: 220px;
0
 

Author Comment

by:jezella
ID: 20347522
GreenGhost, the display:right should read text-align:right; All the messing with the code and I made a mistake.  Apart from that, I have tried making the image smaller but this does not help as the <p>text</p> still does not flow around the image.  However, the <h1> and <h2> does.

Any other ideas.  Anyone.

AJ
0
 

Author Comment

by:jezella
ID: 20347618
OK fixed it.  If I take out  text-align:justify; from my print style sheet I no longer have the problem.  It seems that IE can't justify text around floated element in print mode.

AJ
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Botom of page is wrong color 5 17
CSS: How to get responsive tables to not be so spread out on desktop 5 42
Why a span is lower 2 26
Center div containing a script 6 22
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question