print-preview problems with my site. (Full Version)

All Forums >> [Web Development] >> Expression Web Help



Message

paul1912005 -> print-preview problems with my site. (12/10/2007 15:30:12)

Most likely because I am using ab instead of floats again but just wondering if it is or not.

My page is displayed fine in FF-IE and Opera. In print-preview mode IE7 displays correctly but slightly wrong in FF and very wrong in Opera. What would be causing the problems if not AB?

I have tried different layouts such as using tables or floats and the print-preview gives the same display wrong. The web-site is made via expression web.

I can not upload my site yet dew to its a company based web-site. So I will make another test-page and post the link here. One layout by using tables the other using ab and last using floats.

You then will be able to see the difference in different browsers.

any suggestions to my problem? Just to make things -clear- I am not -using- free space.


First Link = Floating version = Floatingversion

Second Link = Using absolute positioning = AB

Just like to say thanks to Tailslide for your help earlyer on, I really appreciate it.



jaybee -> RE: print-preview problems with my site. (12/10/2007 15:44:14)

I'm looking at this on my Mac at the moment so it might be different on the PC but what works here is:

.style10 {
margin-top: 47px;
clear: both;
float: none;
margin-left: 21px;
}



paul1912005 -> RE: print-preview problems with my site. (12/10/2007 18:06:01)

Yay, Fixed and sorted by using floats and a few other things. Like you said Taili using ab is hard work.

One thing though, I noticed that you can make a div or what ever element run the whole width of the page of to what ever its in by getting rid of the width just by deleting it.

Thing is when I do this with the height it dosen't do the same thing, the div or element just shrinks to nearly nothing.

any suggestions?



Tailslide -> RE: print-preview problems with my site. (12/11/2007 2:39:19)

That's correct - a div will either be a specified height or the height of it's content. Specified heights aren't generally a good idea (unless all you've got in them is photos) as text can break out of the div when text-size is increased. Also, if you have a div which only has floats within it then the container div shrinks to nothing (as it can't really "see" the floats within it and thinks there's nothing there).

There are several things you can do depending on exactly what the problem is and the effect you want.

1. To get around the containing div disappearing when it's just got floats within it you either add a clearing float after the floats within the container (for argument's sake lets say a paragraph which has the style clear:both) OR try adding overflow:hidden to the rule for the containing div. You have to be slightly careful with that solution because although it's good because there's no extra markup - it can sometimes cause clipping of content (just check especially in older IEs and if you get clipping, change the method).

2. If you want the div to appear longer than it is for aesthetic reasons then you can give it a min-height rule which will specify the minimum height the div will appear at but it will expand where necessary. Slight fly in the ointment is that IE6 and older don't recognise min-height so for them what you need to do is add in an IE6 specific CSS rule (via conditional comments) which will have a height:whatever rule in it. IE incorrectly expands divs to the content's height so effectively using height in IE is like using min-height in IE7 and modern browsers.

3. If you want to achieve 100% height of the main container in the viewport then there are several more solutions - it'll take me hours to type 'em all out so here's a link to a list of solutions: Linky



paul1912005 -> RE: print-preview problems with my site. (12/11/2007 16:04:17)

Ok something odd is now happing in print-preview. I am using the correct way by floating things to left and using divs etc. Works fine in FF OP and in there print-preview but in IE7 the borders arent displayed correctly some are some arent.

Exsample for a 100 width div I would add a border all the way around it. It displays correctly on the page but in print-preview the left and right border disapper. I have the print-preview set to shirnk to fit. Same settings in FF and OP work fine no problem but in IE7 some of the borders are missing. Here is a exsample code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css"></style>
</head>

<body style="margin: 1px">

<div style="position: relative; width: 749px; height: 469px; z-index: 1; left: 0px; top: 0px;" id="div1">
<div style="border: 1px solid #000000; position: relative; width: 100px; height: 100px; z-index: 1; margin-left: 14px; margin-top: 14px;" id="div2">
</div>
</div>

</body>

</html>



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625