|
CSS - Separate Screen, Handheld And Print Css Files?
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. 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. 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. Hi, I have a style shete which contains multiple styles for differnet devices - however i am habing problems with the "handheld" media type - it wil lonly display the 1st style of the sheet (if you know what i mean). I have enclosed my code Code:
@media handheld
{
.frmInput
{
width: 1em;
height: 1.3em;
border: 0.1em solid #00004F;
background-color: #F2F2FF;
color:#000000;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.2em;
font-weight:bold;
background-color: #000033;
color:#000000;
}
}
If testing it using visual studio.net 2005's pocket pc 2003 emulator. Can anybody help ?? thanks in advance Andy 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 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? Greetings I'm using wordpress, and the theme I've selected displays English in a reasonable font size. But it displays Arabic in a very tiny font. I'm wondering, if its possible to maybe create a child or separate css file for Arabic language, where I can increase the font size, while keeeping the main css file to handle English language? Is that at all possible? and if so, how to do the switch that tells the script to use the Arabic css file when it handles Arabic text, and use the default css when it handles English text? I hope that my post is not confusing, as I'm newbie to css and I would highly appreciate any help given (in details please) Many thanks. i try to follow this tutorial but the result is not what i have expected. nothing happened at the index.asp.http://www.maxdesign.com.au/present...rial/roll09.htm default.css Code: #cell td
{
margin: 0;
padding: 0;
list-style-type: none;
}
#cell a
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}
#cell a: hover
{
background-color: #369;
color: #FFF;
}
index.asp Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="200" border="1" align="center">
<tr>
<td colspan="3" align="center"><img src="images/background_raw.jpg" width="750" height="94"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<table width="200" border="1">
<tr>
<td class="cell">Home</td>
</tr>
<tr>
<td class="cell">About Us </td>
</tr>
<tr>
<td class="cell">Services</td>
</tr>
<tr>
<td class="cell">Contact Us </td>
</tr>
</table></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
I need some help. I am a relative beginner with CSS and have a problem that is eluding me. Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves. I do not want this behavior and I am not sure what is causing it nor what to do to correct it. Can you help? Thanks, Bob Ross I have a problem separating css for different links throughout my site. For example, my navigation tab links and links inside the text have the same design. I just started learning css so I would appreciate any help. Thanks I have a form with several input and option fields, can I apply a separate background color to an individual input field possibly by name or id ? Code:
#form1
INPUT, OPTION {
background-color: #999999;
}
I have the following css at the top of a phpbb3 template page that works perfectly fine (phpbb3 properly assigns the {MAX_SURVEY_HEIGHT} variable to the template before it gets parsed by the browser): Code: <style type="text/css">
.survey_max_height {
max-height: {MAX_SURVEY_HEIGHT}px;
overflow: auto;
}
</style>
But now I need to move that css code to a separate style sheet that phpbb3 does not pass variables to. So my question: is there a way when you call a css element in an html page - i.e. in this example when you use <div class="survey_max_height"> in an html page - to somehow pass a parameter (in this case whatever is in {MAX_SURVEY_HEIGHT}) to the css stylesheet? I know how to do this using Javascript, but I'm not sure if it can be done using CSS itself. I have a bunch if div tags and some anchor tags on my page. By default, the div tags are hidden, and when I mouseover an anchor, I would like a specific div to be displayed. Again, I can do this in Javascript, but would like to see if there is a CSS-only approach to this. Example HTML: Code: <div id="div1">Option1</div> <div id="div2">Option 2</div> <div id="div3">Option 3</div> <a id="link1" href="somepage.html"></a> <a id="link2" href="someotherpage.html"></a> <a id="link3" href="someotherpageentirely.html"></a> Example CSS: Code:
div#div1 div#div2 div#div3 {
display:none;
width:50px;
height:50px;
background-image: url(divimage.png);
}
a#link1 a#link2 a#link3 {
display:block;
width:100px;
height:100px;
background-image: url(myimage.png);
}
a#link1:hover a#link2:hover a#link3:hover
{
display:block;
width:120px;
height:120px;
background-image: url(myotherimage.png);
}
So in this instance, when one of the anchor tags is hovered over, I would like to change the associated (link1 -> div1, link2 -> div2, link3 -> div3) div CSS to change to be something like this: Code:
div#div1
{
display:block;
}
I realize I've generalized these CSS definitions and on my actual page I have individual CSS definitions for each anchor and div separately as they all differ slightly. Is there a way to do this using straight CSS or am I bound to Javascript in order to do this? Thanks! - skubik Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors. A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid. Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures. Here's the HTML involved: Code: <div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
</div>
And the CSS as well.... Code: .node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
}
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0;
I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??). Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well..... Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
Hi everyone. I have a header with a menu div inside of it with the following settings: position: absolute margin-left: 250px margin-right: auto and height... Now, below that menu, I have a sub menu - it uses the same settings, with a bigger height of course, but it is styled completely different. The idea is, I want the sub menu to be different for every page the user is on. The main menu may change, I.e., have an extra menu item in it for specific pages. So, this is what I am trying to achieve... If MAIN MENU is a longer length then SUB MENU, I would like the sub menu to be the same width. Keeping in mind that the main menu is fluid and width is not set. Now, alternatively, if the SUB MENU is longer than the main menu, I would like the main menu to be the same length as the sub menu, again, keeping in mind that the sub menu is also fluid and will change width depending on the number of menu items. I mean, I know I could just set some arbitrary width for both, something I am sure will be wide enough despite what is inside of each menu, but I'd really rather avoid doing that, I don't want them both to always be X width, rather, I want the width to be able to change, but both at the same time, not one or the other. I hope that explains what I'm trying to accomplish here, if not, please feel free to ask any questions that would help you understand what I mean better. Thank you much. How do I get a seperate scroll bar for the text on my website? |
|||||||