|
CSS - Newbie-css Screen-ok, Ugly Print In Ie
I have 2 columns of CSS and it looks OK in IE.
When I do the "Print Preview", only part of it prints out. Here is what it looks like URL( I put a blank before the "." aims .uaex .edu/testpidm2 .htm Code:
/*****======== ***4-25-11 added below Unable to print with this style sheet.
However it looked good on screen.***/
#dminMax {width:90%;
margin:0 auto;
background:#e0e0e0;
}
#dheader {background:#a31e39;
}
#dLeftGoal {float:left;
width:20%;
background:#d0c0c0;
}
#dLeftGoal {padding-bottom:32767px;
margin-bottom:-32767px;
}
#dLeftOut {float:left;
width:100%;
background:#00ffff;
}
#dLeftOut {padding-bottom:32767px;
margin-bottom:-32767px;
}
#wrapper {overflow:hidden;
}
#dViewMessage {width:80%;
float:left;
background:#d8d8d8;
}
#footer {clear:both;
background:#455c5a;
}
h1 {font-size:20px;
margin:0;
padding:10px 0;
color:#fff;
}
h3 {font-size:18px;
margin:0;
padding:8px 0;
}
h4 {font-size:3px;
font-size:1em;
margin:0;
padding:8px 0;
font-weight:bold;
}
h5 {font-size:3px;
font-size:1.2em;
margin:0;
padding:8px 0;
font-weight:bold;
}
.dmessage {padding:10px;
text-align:left;
}
.dsubtitle {padding:10px;
font-weight:bold;
text-align:left;
}
.d2subtitle { padding:10px;
font-weight:bold;
background:#00ffff;
}
.dindent {
margin-left:50px;
}
.d72indent {
margin-left:50px;
text-align:left;
}
dsubline{ text-indent:-3px;}
p { text-align:left;
font-size:1em;
line-height:1.5em;
margin:0;
padding:5px 0;
}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
Any suggestions? I know this must be something simple. TIA. Similar TutorialsHello! Newbie back again. I'm rolling along on using CSS for the first time (hooray!) including that wonderful bit of coding in order to center a #Container. The threads here have been *very* helpful. Due to printing problems with having everything centered at a fixed width (text on the right getting chopped off), I've created a style for media="screen" AND media="print" which works just fine in Netscape and IE. Question: When I pull the style out of the page so that I can reference it as an external css, do I need to create TWO files? Also, I would appreciate any/all comments about my first attempt so far. Is there a better way I should be designating font-family and margins for my elements? <style type="text/css" media="screen"> h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold; margin:0.4cm 0.4cm} p {font-family:sans-serif; font-size:85%; margin:0.4cm 0.4cm} ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%; margin:1cm 1cm} a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none} html, body {margin: 0; padding: 0; text-align: center; /*for IE stupidity*/} #container { position: relative; /*The container must be positioned /*in order to contain positioned /*elements*/ margin: 0 auto; /*This is the proper way to center an element*/ width: 700px; border: 1px solid gray; text-align: left; /*corrects for IE hack*/ padding: 0px; } </style> <style type="text/css" media="print"> h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold} p {font-family:sans-serif; font-size:85%} ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%} a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none} </style> And here's the page I'm working with so far: http://www.accd.edu/sac/lrc/librns/celita/design/linktest.htm Thanks so much for all your help. Hi all, I'm using this code for separate CSS style sheets for screen, handheld and print. <link rel="StyleSheet" href="css/style.css" type="text/css" media="screen" /> <link rel="StyleSheet" href="css/style_handheld.css" type="text/css" media="handheld" /> <link rel="StyleSheet" href="css/style_print.css" type="text/css" media="handheld" /> I'm trying to view these using the Firefox Developer Toolbar and 'Display CSS by media type' options, but it's not working. However, when I do a print preview or actually print the document, it does work. Can anybody tell me why this is and how I can get it working? Cheers. I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table. I'm new to CSS and any help would be greatly appreciated. Here's the code I'm using: <style type="text/css"> <!-- body { background-image: url(images/polkasky.jpg); background-attachment: fixed; } .greentable { background-image: url(images/cloud-back.png); vertical-align: text-top; } .cloudfoot { background-image: url(images/cloudbottom.png); background-attachment: fixed; display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; } #Layer1 { width:100%; height:158px; background-image: urlimages/grass.gif); background-repeat: repeat-x; background-position: bottom center; background-attachment: scroll; } --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/cloud-head-tongue.png')"> <table width="850" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td> </tr> </table> <div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" /> </map> </div> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellpadding="0" cellspacing="10"> <tr> <td> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td> <td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td> </tr> </table> </td> </tr> </table> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td width="636" valign="top"> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script> </div> <div align="left"> <script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td> <td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td> </tr> </table> </td> </tr> </table> <img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" /> <div id="Layer1"></div> </body> </html> Hi I have some css styles that work like I want when displayed in a browser but when I print the screen to a PDF, almost all the info is lost, reverting to a single long column of text. Do you need to define separate 'screen' and 'print' versions of a style? If so, how do you include them in a page? Do you have to jump through any special hoops to insure the browser uses the correct media type (screen/print) for the correct media? TIA Hi guys, could anyone take a look at this and tell me whats wrong? why is that top border still there? the black line at the top... img156.imageshack.us/img156/4616/whyfc7.png I just spent an hour putting this together and previewing it in IE... then when i go over to my mac and preview in safari.. UGH!!! UGLY!... Then in firefox.. UGLY!.. Any help would be appreciated. Page is: reston.com/RESTON20/ Code:
@charset "utf-8";
/* RestonCOM 2.0 CSS */
/* 10/04/2008 */
/* Main Container Code */
#container{
height: inherit;
width: 1000px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px double rgb(74,77,144);
border-left: 1px double rgb(74,77,144);
border-right: 1px double rgb(74,77,144);
}
/* HEADER CODE */
#header{
height: 149px;
width: 1000px;
background-image:url(COM20-BANNER.png);
}
/* NAVIGATION CODE */
#navi{
height: 25px;
width: 995px;
background-color: #44478a;
margin-bottom: 1px;
margin-top: 0px;
margin-left: 2px;
padding-left: 2px;
padding-top: 2px;
color: #FFFFFF;
}
/* LEFT SIDE PANEL CODE */
#leftbar{
height:inherit;
width: 270px;
background-color:#FFFFFF;
float: left;
margin-left: 1px;
}
/* LEFT-BOX CODE */
#leftbox{
height:inherit;
width: 281px;
background-color: #FFFFFF;
float: inherit;
border: 1px double rgb(74,77,144)
}
/* LEFT-BOX-TITLE CODE */
#leftbox-title{
height:inherit;
width:281px;
background-color: #44478a;
float: inherit;
color: #FFFFFF;
}
/* MIDDLE CONTENT CODE */
#content{
height: inherit;
width: 712px;
background-color:#FFFFFF;
float: right;
padding-left: 1px;
}
/* MIDDLE-CONTENT HEADERS */
#content h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:16px;
color:#000000;
font-weight: bold;
display: inline;
}
#content h2{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:12px;
color:#44478a;
font-weight: bold;
display: inline;
}
/* NEWSFLASH - BOX */
#newsflash{
width: 700px;
background-color:#000000;
}
/* NEWSFLASH - LEFT */
#newsflash-left{
width: 349px;
background-color:#44478a;
color: #FFFFFF;
float: left;
padding-left: 1px;
}
/* NEWSFLASH - LEFT - BOX */
#newsflash-left-box{
width: 345px;
background-color:#FFFFFF;
color: #44478a;
border: 1px double rgb(74,77,144);
float: inherit;
}
/* NEWSFLASH - LEFT - IMAGE */
#newsflash-left-image{
width: 50px;
height: 50px;
background-image: url(NEWSFLASH-LEFT-IMAGE.png);
float: left;
border-right: 1px double rgb(74,77,144);
}
/* NEWSFLASH - LEFT - TEXT */
#newsflash-left-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT (EVENTS) */
#newsflash-right{
width: 357px;
background-color:#44478a;
color: #FFFFFF;
float: right;
padding-left: 1px;
margin-right: 1px;
margin-left: 1px;
}
/* NEWSFLASH - RIGHT (EVENTS) IMAGE */
#newsflash-right-image{
width: 50px;
height: 50px;
float: left;
border-right: 1px double rgb(74,77,144);
background-image: url(NEWSFLASH-RIGHT-IMAGE.png);
}
/* NEWSFLASH - RIGHT (EVENTS) TEXT */
#newsflash-right-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT - BOX (EVENTS) */
#newsflash-right-box{
width: 357px;
background-color:#FFFFFF;
color: #44478a;
float: inherit;
border: 1px double rgb(74,77,144);
}
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=utf-8" /> <title>Reston.com (2.0)</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="navi">Navigation</div> <div id="leftbar"> <script src="http://arestravel.com/js/_default/ARESbot.js?bundle=reston&ro=1" type="text/javascript"></script> <div id="leftbox"> <div id="leftbox-title">Sponsored Advertising</div> <script type="text/javascript"><!-- google_ad_client = "pub-8246327012745782"; /* 250x250, created 10/4/08 */ google_ad_slot = "2128673963"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </div> <div id="content"> <div id="news-flash"> <div id="newsflash-left">Newsflash <div id="newsflash-left-box"> <div id="newsflash-left-image"></div> <div id="newsflash-left-text">This will be a description of the latest news article on our website. This will be a description of the latest news article on our website. <br /><strong>More</strong> </div> </div> </div> <div id="newsflash-right">Upcoming Event <div id="newsflash-right-box"> <div id="newsflash-right-image"></div> <div id="newsflash-right-text">This will be a description of the latest upcoming event in Reston Virginia. This will be a description of the latest upcoming event in Reston Virginia. <br /><strong>More</strong></div> </div> </div> <br /> <br /> <strong><h1>Your guide to working, living, and playing in Reston Virginia!</h1></strong> <br /> <br /> <h2>Reston Hotels</h2> - Stay in Reston! The hotels in the Reston area offer a full range of accommodations including luxury hotels and options for those on a budget. Conveniently located right off the Dulles Toll Road, just 15 minutes from Dulles International Airport, Reston is nearby most businesses in the area and within driving distance to Washington D.C. <br /> <br /> <h2>Reston Restaurants</h2> - Dine in Reston! Reston offers some of the best dining alternatives in Northern Virginia. Whether you're planning a romantic dinner, hosting a business gathering, grabbing an afternoon snack, celebrating a special occassion, or having a night out with the family, Reston's restaurants can meet your needs. <br /> <br /> <h2>Reston Town Center</h2> - Reston's famous "downtown" includes many shops and restaurants, ice skating, a multiplex movie theater, and a luxury hotel. Reston Town Center hosts outdoor festivals and concerts throughout the year, and features outdoor ice skating during the winter months. <br /> <br /> <h2>Village Centers</h2> - Explore Reston's village centers! Reston's community village centers each has its own special character and include shops, parks, lakes, walking and bike paths, art galleries, restaurants, museums, theaters, and much more. <br /> <br /> <h2>Reston Real Estate</h2> - Reston is a world renowned planned community and was recently ranked one of the top 100 Best Places to Live in America by Money Magazine. Reston's diverse selection of housing includes condos, apartments, townhomes, and single-family homes. Lakefront properties are also available.</div> </div> </body> </html> Hey, for a while I've been developing a site, just to improve my skills in php etc. I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome. This is how my site SHOULD look: This is how it looks in chrome: My site URL is http://www.pokerbrothers.net The HTML for the entire page: The parts that effect the 2 bars that are broken in chrome are highlighted 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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" />
<meta name="robots" content="follow,index" />
<title>Home :: PokerBrothers.net</title>
<link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Globs
var session_id = "pjpennan89o2m1dn6kjh4n48d7";
var session_userid = 0;
var session_username = "Guest_";
var session_location = "http://www.pokerbrothers.net/";
var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F";
var session_location_last = "";
function pageOnLoad () {
setTimeout("pbhttp_Session_Exit(true, '15')", 900000);
}
</script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script>
</head>
<body onload="pageOnLoad();">
<div id="container" align="center">
<div class="bar_container">
<ul id="bar_header">
<li id="bar_header_left"></li>
<li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li>
<li id="bar_header_fill"></li>
<li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li>
<li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li>
<li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li>
</ul>
</div>
<div class="bar_container">
<div id="bar_navigation">
<div id="bav_navigation_top">
<div id="bar_navigation_top_left"></div>
<div id="bar_navigation_top_fill">
<div id="bar_navigation_top_fill_loginarea">
<form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()">
<div id="bar_navigation_top_fill_loginarea_usernamearea">
<input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" />
</div>
<div id="bar_navigation_top_fill_loginarea_passwordarea">
<input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" />
</div>
<div id="bar_navigation_top_fill_loginarea_submitarea">
<input type="submit" id="navlogin_submit" name="navlogin_submit" value="" />
</div>
</form>
</div>
<div id="bar_navigation_top_left_text">
Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a>
</div>
</div>
<div id="bar_navigation_top_right"></div>
</div>
<div id="bar_navigation_bottom">
<div id="bar_navigation_bottom_left"></div>
<div id="bar_navigation_bottom_fill">
</div>
<div id="bar_navigation_bottom_right"></div>
</div>
</div>
</div>
<div class="bar_container">
<table id="bar_body" cellpadding="0" cellspacing="0" border="0">
<tr id="bar_body_top">
<td id="bar_body_box1_top_left"></td>
<td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td>
<td id="bar_body_merge_top"></td>
<td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td>
<td id="bar_body_box2_top_right"></td>
</tr>
<tr id="bar_body_middle">
<td id="bar_body_box1_middle_left"></td>
<td id="bar_body_box1_body">
Welcome to PokerBrothers.net, bleh.
</td>
<td id="bar_body_merge_middle"></td>
<td id="bar_body_box2_body">
Load ad here
</td>
<td id="bar_body_box2_middle_right"></td>
</tr>
<tr id="bar_body_bottom">
<td id="bar_body_box1_bottom_left"></td>
<td id="bar_body_box1_bottom_fill"></td>
<td id="bar_body_merge_bottom"></td>
<td id="bar_body_box2_bottom_fill"></td>
<td id="bar_body_box2_bottom_right"></td>
</tr>
</table>
</div> </div>
</body>
</html>
And the CSS... Direct links: Some CSS that effects both bars: http://www.static.pokerbrothers.net...de?load=6&x=571 The top bar's css: http://www.static.pokerbrothers.net/css/headerbar.css the other bar's css: http://www.static.pokerbrothers.net/css/navbar.css I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail. Any help on anything related to this will be appreicated, thanks . Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy 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. Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? Hi, All the content of my web page is in a table which is 760 pixels width. This is fine on the screen, but when printing, the right part is cut. I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working. I tried to change the margin and padding, but there is no change. I still have the same problem. I tried many different configurations, but none of them worked... I did probably something wrong. I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed? Could someone help me? Many thanks Hello all, I have been trying to get my website to comply with googles page speed and yahoo's yslow. I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else. <link href="style.css" rel="stylesheet" type="text/css" media="screen, print" > NOTE if I make it media="all" print does not work here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed. @media screen { /* all screen CSS goes in here */ } @media print { /* all print CSS goes in here */ } U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen. Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed. How do I in the print.css file tell it NOT to print this frame.png file? I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it. Thanks in advance for any suggestions or help whonoes Hi All, This is my first post in CSS forums. I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements). Note: User may have scrolled down the screen. I hope this is possible with CSS I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances thanks JT I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve. I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this? <html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. In IE 7.0 Why is the text displaying the way it is in this screen shot: http://www.larreamma.com/screens/lmma.png It should display like this: http://www.larreamma.com/screens/lmma_ie8.png (I do not have access to IE 7 to readly test various options). Thank you in advance. how can i get a div in the middle of the y-axis of the browser window? |
|||||||