CSS - Floated Elements And Print Preview

I noticed that in IE6 when I go to print, or even look in print preview, it cuts off the right side of my page. Is there any code to avoid that? Or even any tips?

Hi all,

Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print.

A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method.

Any thoughts on how to do this?

Thanks,
AJ

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not.

This is the .css code for the logo div:

#logo {
float: left;
margin-left:1px;
width: 200px;
background:url(../images/mm-logo.jpg) no-repeat;
height:50px;}


Any ideas or suggestions?

Hello DevShed CSS Help Forum,

I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag:

(Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL)

http://www.spidersend.com/new_site/newsite4/test6.html

However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before?

I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd.

Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS:
Code:

body
{
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	font-family: "arial";
	background-image: url('images/bottom_slice.png');
	background-repeat: repeat-x;
	background-position: bottom center;
}

div#header
{
	background-image: url('images/header_slice3.png');
	background-repeat: repeat-x;
	height: 198px;
	width: 100%;
}

div#header-content
{
	width: 680px;
	margin: 0px auto;
}

div#top-navigation
{
	width: 680px;
	margin: 0px auto;
	position: relative;
	bottom: 16px;
	color: #FFFFFF;
	font-family: "arial";
	font-size: 16px;
	padding: 0px;
}

div#content
{
	width: 850px;
	float: left;
}

div#content-header
{
	background-image: url('images/content_bg_top.png');
	width: 850px;
	height: 30px;
}

div#content-footer
{
	background-image: url('images/content_bg_bottom.png');
	width:850px;
	height: 32px;
}

div#content-area
{
	background-image: url('images/content_bg_slice.png');
	padding-left: 18px;
	padding-right: 18px;
}

div#adbar
{
width: 157px;
float: right;
}

div#adbar-header
{
	background-image: url('images/sidebar_top.png');
	width: 157px;
	height: 30px;
}

div#adbar-footer
{
	background-image: url('images/sidebar_bottom.png');
	width: 157px;
	height: 26px;
}

div#adbar-area
{
	background-image: url('images/sidebar_slice.png');
	padding-left: 5px;
	padding-right: 5px;
}

div#sidebar
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	color: #0c577a;
}

div#sidebar2
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	margin-top: 20px;
	color: #0c577a;
}

div#content-wrapper
{
	width: 1007px;
	margin: 0px auto;
}

I am trying to create a print-friendly page using css and as well as formatting the background and font i want to remove the other 3 frames on the site. I have tried to assign them class="noprint" so i can remove them using ".noprint { display: none; }" but they still appear on the print preview in ie6 & ff1.0. The background and font are correctly formatted to the instructions in the css file so i know that some of it is working. Could it be that the class is not being correctly assigned, what is the proper technique to assign a frame a particular class? Do i have to assign a class to all the elements within the frame too?
Any help would be hugely appreciated as i'm tearing my hair out here!

SalP

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

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

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

Aaaah!
another problem...

now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div.

when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value).

what now?
thanks

Hi, I'm having a familiar problem:
with this page

The the content on a contained and floated div is over running it's containing div.

I have had this problem before and using something like: Code:

#innerwrap:after {
	content:".";
	display:block;
	clear:both;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Has worked before, but this time it's not.

I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this.

Can anybody advise me what to look into please.

Thanks
James

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

Hi All,
Is there a site where I can simply type in a URL and have it give me screenshots in multiple browsers for FREE please?
Thanks in advance,

Ziffa27

I am creating a top nav with links that are turned into floated blocks. I have 2 issues that I can't seem to figure out.

1. How do I keep the elements from wrapping?
2. How do I make the set of floated items centered?

Here is what I have so far (see code below). Because the items are floated to the left, they stay anchored to left and aren't centered. I tried giving the nav div a width. That did allow it to be centered, but I don't know what the exact width of the combined link blocks would be, so if it is too short, it wraps, and if it is too wide it doesn't center evenly.
Code:

#nav{
text-align:center;
padding-top:24px;
}
#nav a{
display:block;
float:left;
padding:13px;
text-transform:uppercase;
color:#9BA047;
background:#FFF;
line-height:1em;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
color:#85231C;
}
#nav a#logo{
float:left;
padding:0px;
}

<div align="center">
<div id="nav">
<a href="/" id="logo"><img src="images/logo.gif" alt="Associated Group" border="0" /></a><a href="/about-us.html">About Us</a><a href="/exterior.html">Exterior</a><a href="/interior.html">Interior</a><a href="/display.html">Display</a><a href="/employment.html">Employment</a><a href="/location.html">Location</a><a href="/contact.html">Contact</a>
<div class="clear"></div>
</div>
</div>

I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would.

Here is the basic code I have so far: Code:

<html>
<head>
<style type="text/css">
div.box1 { 
	border: 1px solid red;
	background: #afafaf;
	padding: 2px;
	float: left;
}
div.box1 table { 
	float: left;
	border: 1px solid blue;
	margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
   <table>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
   </table>
 </div>
</div>
<h1>Next Text</h1>
</body>
</html>

I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code:

div.box1:after {
	content: 'clear me';
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables?