|
CSS - Print Styles - Ie Images Not Floating
Hi,
I have a series of divs, each of which contain some text and an image. The images are floated either left or write, so the text wraps around them. It works as intended in screen view, but when I try to print, the images lose their float in IE (the text no longer wraps around them). It works fine in FF. Any ideas? Thanks Similar TutorialsI've looked over my syntax a hundred times, but I can't get the print preview in IE to match the style declarations I've put in my css document. None of them work, so obviously it's something i've messed up in the overall structure of the code, and not minor errors. This is at the end of my .css document that I linked to my html: Code:
@media print {body {font-family: arial, helvetica, sans-serif}
a {text-decoration: none; color:pink}
img {border-width: 0px}
#hideprint {display: none}
#instruction {display: none}
#lpmap {page-break-after: always}
.notes {page-break-inside: avoid; margin: 30px 30px 30px 30px; }}
Thanks Hi, I've got a webpage that I need to print almost exactly as it appears on the screen. Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is: @page {size: A4 landscape;} however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}. The two style sheets look like this: for the screen: body {..... etc etc all works fine... for the print: @page {size: A4 landscape;margin:3cm;} body {.... etc ALMOST same as above the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape. What am I doing wrong, or am I completely misusing the @page and media commands? Thanks in advance. Andy I've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess). Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it! I've been restyling a legacy web app. the old app had height and width attributes for every image. So when you modernize you can create classes that chunk a whole bunch of stuff, one of which is height and width. In order for SEO analysis to like you do you have to keep the old fashioned height and width attributes on every single image tag? Is it OK to have both a style from a class AND height and width attributes? I assume if they conflict the local ones will win, even though strictly speaking they are not styles. Thanks, just curious. Gah. Internet Explorer is doing mighty funky things with my webpage. http://www.maths.tcd.ie/~icecube The floating images in the main posts work fine from firefox, but in the IE that I checked them out on, there are just blank spaces where the images/comments/bored should be - but even then you can still right click on the space where the image should be to save it and stuff. Anyone have any help/suggestions? I am at my wits end as I have tried and searched just about everywhere for some guidance. I'm currently changing my site to an entirely tableless markup. On the following page, I have an image floated right of my <ul> which is wrapped by a div with a dotted border on the top, right and bottom. When I float my image right, the bottom edge of my image runs below the bottom border of the div. This only happens in FF and NOT IE. Check out the following link: My problem Here is my xhtml markup: Code: <!-- Start Linear Template -->
<div class="contain">
<img src="/images/linearthumb.png" class="templatethumb" alt="Linear Template" />
<p>
Linear Template
</p>
<ul class="template">
<li><span class="rarr">→</span> Professional and sophisticated.</li>
<li><span class="rarr">→</span> Drop-down navigation menu.</li>
<li><span class="rarr">→</span> Information “boxed” for easy reading.</li>
<li><span class="rarr">→</span> Background can be “watermarked” with <br />
your logo or any color you wish.</li>
</ul>
</div>
<!-- End Linear Template -->
And here is my css for the div and image (forgive the roughness of it): Code:
div.contain {
padding-right: 5px;
margin-bottom: 10px;
border-top: 2px white dotted;
border-right: 2px white dotted;
border-bottom: 2px white dotted;
}
img.templatethumb {
float: right;
width: 168px;
height: 160px;
border: 2px outset #808080;
margin-top: 5px;
margin-right: 100px;
}
In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
Hi everyone. I have a strange problem which get's on my nerves for a long time and it usually makes me keep on using tables instead of css. It has to do with floating images inside another div or td. I have, let's say, a td which contains 2 pictures. I want the first picture to be at the left side and the other one at the right leaving space in the middle. So I just have the following code: Code: <td class=top width="936" height="52"><img src="images/left.jpg" style={float:left;}><img src="images/right.jpg" style={float:right;}></td>
I also have declared the following in the style definition: Code: td.top {background:url(images/back.jpg) repeat;padding:0;margin:0;}
td.top img {padding:0;margin:0;}
So I test my page and although it appears ok on firefox a strange thing happens on Explorer. Both pictures leave some blank space on their side just like if I had added 2-3 pixels of side margin. It is even more annoying that the float:left img leaves a space on it's left side and the float:right img on it's right one. Notice that the table has both cellpadding and cellspacing set to 0. Thank you in advance for your time. Hello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE. Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works: Code:
P
{
color: black;
font-size: 10pt;
font-family:tahoma;
}
myown
{
color: blue;
font-size: 10pt;
font-family: Tahoma;
}
<myown>This is my text</myown>
When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case. Thanks. Hi, I'm trying to create a PDF of my site, and I want it to look EXACTLY like the site. Right now the links are coming out blue (instead of the color I've defined in my CSS), and the fonts are not displaying according to what I've defined in the CSS. Someone once told me that I can overlay the pages with a transparent gif and that would preserve my original CSS definitions. But I can't get that to work. If I add a <div> to the html page, in an effort to overlay a transparent image over the entire page, and then I convert it to a PDF, then in the PDF the big transparent image just moves to the bottom, underneath the rest of the page. Thanks to anyone who can maybe help. Laura S. i imagine this has to be one of the easiest questions, yet i have looked at tons of css table pages and cant find the answer. All im trying to do is create different styles for my tables on my website for example: Code: <table class="table1"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <table class="table2"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> table 1 would have the following: black background white text underline text table2 would have the following: green background black text larger fonts the above colors are just an example, but my question is how would i do my CSS to support this if i wanted it to look this way? Thanks for any help. I understand how to write a print.css style sheet, but I am unclear on how to use it. I want to have a link on my page that says "Printer Friendly Version" that displays the printer friendly version and lets them hit the print button on the browser to print it. I think this is the most common way to print a web page, right? So I am displaying to the screen first and the printer if they hit the button. So how do I get the print.css formatting to display instead of the screen version? Obviously I want a single markup file for both purposes. |
|||||||