CSS - Preview Multiple Browsers

I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview.

Help ?

to add:
This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table.

When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area.

I think this is a css issue, but I can't figure it out.

http://alpineec.com/TEST/index.php

Any thoughts?

CSS
Code:

*
{
padding: 0em;
margin: 0em;
}

body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}

body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}

h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}

.contentarea
{
padding-top: 1.3em;
}



img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}



.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

ul.linklist
{
list-style: none;
}

ul.linklist li
{
line-height: 2.0em;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}

#outer
{
	z-index: 2;
	position: relative;
	/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
	border: solid 1px #fff;
	background-color: #fff;
	margin: 0 auto;
}

#header
{
position: relative;
width: 100%;

background: #5a5a5a;
}

#headercontent
{
	position: absolute;
	bottom: -56px;
	padding: 0em 2.0em 1.3em 2.0em;
	left: 274px;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}


#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}

#menu ul
{
	position: absolute;
	top: 2px;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}

#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
	position: absolute;
	left: 191px;
	bottom: 1.2em;
	z-index: 10;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}


pre {
 padding:10px;
 border: 1px dotted #eee;
 background-color:#f9f9f9;
}


#photodiv {
  background-repeat: no-repeat;
}

#aboutBLOCK{padding-left:40px;}

/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none; 
left: 10px;
padding:0; 
margin:0; 
position:relative; 
float:left;
}
#pg ul li {
display:inline; 
float:left; 
margin:0 0 8px 8px;
}
#pg ul li a {
display:block; 
width:90px; 
height:90px; 
	text-decoration:none; 
border:1px solid #000;
}
#pg ul li a img {
display:block; 
width:90px; 
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal; 
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute; 
left: 290px;
top:110px; 
width:300px; 
height: 300px; 
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute; 
left:9px; 
top:110px; 
width:270px; 
height:auto;
font-size:12px;color: black;
}

http://typetester.maratz.com/

I am not the author, but this is sweet!

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?

While previewing my project I'm working on in Opera, I can't see the ' Background Color ' . I can see it fine in IE and Firefox, but darn if that Opera isn't giving me a hard time.

I had checked my code twice to see if it's correct, it's seems fine. by the way, I am using Dreamweaver as my editor.

Can anyone help me out on this issue?

Thank you

I am using XAMPP, my project is not online. Here is the following code >>>>>

Code:

<body>
<div id="mainBody-wrap" class="clearfix" >
	<div id="social-container"> 
		<div id="social">
    		<div id="socialNav">
        		<ul id="socialList">
            		<li class="rss" title="Subscribe by RSS"><a href="#" target="_self"></a></li>
                	<li class="delicious" title="Bookmark us using Delicious"><a href="#" target="_blank"></a></li>
                	<li class="facebook" title="Join us on Facebook"><a href="#" target="_blank"></a></li>
                	<li class="twitter" title="Follow us on Twitter"><a href="#" target="_blank"></a></li>
            	</ul>
      		</div>
        	<div id="googlePlus">
        		<!-- Place this tag where you want the +1 button to render -->
				<g:plusone size="small" annotation="none"></g:plusone>

				<!-- Place this render call where appropriate -->
				<script type="text/javascript">
  					(function() {
    					var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   				    	po.src = 'https://apis.google.com/js/plusone.js';
   				    	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 				 	})();
				</script>
        	</div>
        	<div id="infoNav">
        		<ul id="infoList">
            		<li><a href="#" target="_self">Message Board</a></li>
                	<li><a href="#" target="_self">Help FAQ</a></li>
                    <li><span>[&nbsp;</span><a href="#" target="_self">Rules</a><span>&nbsp;]</span></li>
                	<li><a href="#" target="_self">Contact Us</a></li>
            	</ul>
        	</div>
    	</div>
	</div><br style="clear:both" />
    <div id="hdr-container">
    	<div id="hdr">
        	<div id="searchBox">
            	
            </div>
	 	</div>
    </div>    
</div>
</body>

Code:

html, body {
	height: auto;
	width: 100%;
		
}

body {
	background-color: #161616;
	font-family: " Lucida Grande ", " Verdana ", sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;	
}

		/* Begin #mainBody-Wrap */
		
#mainBody-wrap {	
	width: 100%;		
}

		/* begin #social-container */
		
#social-container {		
	width: 100%;
	background-color: #0F0F0F;
	border-bottom: 1px solid #000000;
}		
		
		/* end #social-container */	

		/* begin #social */
				
#social {		
	width: 810px;
	height: 27px;	
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}		
		
		/* end #social */
		
		/* begin #socialNav */
		
#socialNav {
	width: 95px;
	height: 27px;
	float: left;	
}

		/* end #socialNav */
		
		/* begin #socialList */
		
#socialList {
	width: 95px;
	height: 16px;
	position: relative;
	top: 5px;
}

#socialList li {
	position: absolute;
	top: 0;
}

#socialList li, #socialList a {
	height: 16px;
	display: block;
}

.rss {
	background: url(../images/sprite-ln1.png) no-repeat scroll 0 0 transparent;
	width: 16px;
	left: 0;
}

.delicious {
	background: url(../images/sprite-ln1.png) no-repeat scroll -16px 0 transparent;
	width: 16px;
	left: 27px;
}

.facebook {
	background: url(../images/sprite-ln1.png) no-repeat scroll -32px 0 transparent;
	width: 16px;
	left: 52px;
}

.twitter {
	background: url(../images/sprite-ln1.png) no-repeat scroll -48px 0 transparent;
	width: 16px;
	left: 78px;
}

#googlePlus {		
	float:left;
	margin: 6px 0 0 8px;
}						
		
		/* end #socialList */		
		
		/* begin #infoNav */
		
#infoNav {
	width: 370px;
	height: 27px;
	float: right;
}		
		
		/* end #infoNav */
		
		/* begin #infoList */
		
#infoList {
	margin: 5px 0 0 0;
	text-align: right;
}	

#infoList li { 
	display: inline;
	margin: 0 0 0 18px;
		
}

#infoList li a {
	color: #FFFFFF;
}

#infoList li a:hover {
	color: #DDDDDD;
}

#infoList li span {
	font-weight: bold;
	color: #990000;
}
	
		/* end infoList */		
		
		/* begin #hdr-container */
		
#hdr-container {
	width: 810px;
	margin: 0 auto;
}		
		
		/* end #hdr-container */		

		/* begin #hdr */
		
#hdr {
	width: 100%;
	height: 155px;	
}		
		
		/* end #hdr */
		
		/* begin #searchBox */
		
#searchBox {
	width: 421px;
	height: 37px;		
	margin: 5px 0 0 0;	
	display: block;
	float: right;
}




		
		/* end #searchBox */		
		
		/* End #MainBody-Wrap */
		
		/* Begin ClearFix */
		
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	display: inline-table;
}

		/* Hides from IE-mac \*/

* html .clearfix {	
	height: 1%;
}

.clearfix {
	display: block;
}

		/* End hide from IE-mac */	

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.

Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink)

Thanks for your help

Hello,
With following css for header

Code:

div#header{
	height:75px;
	background-color:#ffffcc;
}

I am getting three different views in IE, FF, Opera. In IE entire background color is pale yellow, In FF only the line is pale yellow. In opera line and area below it is pale yellow.
Here goes goes html.
Code:

<div id="header">
  <h3 align = "center">Welcome to <b>Your Space</b></h3>
</div>

What is going wrong here?
Thank you.

I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding.
It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at.

Thanks

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-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css"><!--

html, body {
	margin:0;
	padding:0;
	height:100%;
}

div {
	margin:0;
	padding:0;
}

div#holder {
	margin:auto;
	margin:auto;
	width:800px;
	height:100%;
	background:black;
}

div#links {
	width:auto;
	height:30px;
	background:pink;
}

div#page {
	width:auto;
	height:100%;
	background:white;
	border:2px black solid;
	padding:2px;
}


div#left {
	float:left;
	background:red;
	width:180px;
}

div#right {
	float:right;
	background:blue;
	width:610px;
}

div#footer {
	clear:both;
	width:auto;
	height:30px;
	background:green;
}


--/></style>

</head>
<body>

<div id="holder">
	<div id="links">1</div>
	<div id="page">
		<div id="header">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="divider">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="content">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="footer">1</div>
	</div>
</div>

</body>
</html>

I'm in the process of revamping my website and am trying to use css to position things. I've used browsershots to view what the website looks like in different browsers and platforms. All is well with one exception, IE6! Grrr.

Now I'm a total css newbie so what I'm doing wrong is probably painfully obvious to you guys, but I've been beating my head against this for a while now and would appreciate it if someone could take a look over my shoulder and see if they can spot the problem.

If you use IE6 you'll notice that the featured products are listed below the last 'service ad' image instead of at the top of that 'column' even with the first 'serivce ad' image.

Again, any help in diagnosing/fixing this issue is greatly appreciated!

Here's a link to the page:

http://www.decaldepot.net/zencart/index.php

Hi all,

I seem to be stumped on something that is probably simple. At this test site you'll notice the left nav area as well as the text content area.

I am trying to set it up so that both are 6 pixels below the header image. Obviously, then they would be even with each other.

Everything I've tried has come close but never right in both FF & IE. Could someone please give me a hand with this?

Thanks!

Chris

I have a small box displayed at the top of the page for an "anouncment column". Opera and IE show it properly, sort of, and NEtscape/mozilla show it further down the page. I want it to be at the VERY top of the page, IE/Opera show it a few px down and mozilla/netscape show it a good 10+ down. I have tried playing with padding and it made no difference. These browsers are the new versions.

any ideas?

Code:

<div style="position: absolute; left: 617px; top; 0px; width: 147px; height: 30px; background-color: transperant; padding: 0px;">
<h5>text is here</h5>

</div>

the style sheet
Code:

  body {
    color: #000000;
    background-color: #ffffff;
    font-family: Georgia, "Times New Roman",
          Times, serif; 
}
}
  h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
  h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4 
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 15px }
h5 
{ 
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6 
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
    color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center } 
.left {text-align: left } 
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
	COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
	COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
	COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
	COLOR: #2C31FF; TEXT-DECORATION: underline
}

I have been searching/googling and whilst i have found people saying there is a difference in how browsers (IE, FF etc) display fonts, i have yet to find an answer that works.

I have tried the giving body tag "font-size 100%;" method but it doesnt work... some people have said to use px as disabled people will probably override this with their own stylesheets...