|
CSS - Css Media Alternate In Mozilla
What i am trying to do is when the user tries to print out the HTML document, then the printer prints out what is in this:
<link rel=alternate media=print href="printthis.doc"> It works in IE but it doesn't work in Mozilla Firefox. Does anyone know a way on how this is done in Mozilla Firefox or even both...?? Cheers, Jackson Similar TutorialsHi 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 all, i have sum problem in css, want to create alternate tr(row) color appear in dynamic table creation , and it shoul be pure css code. hlp me if any one ! tanks Hi All, I'm rejigging an intranet site to make its display context specific. So when you log in from Branch Office 1 you see one thing and from Branch Office 2, you see something else. Part of the rejig is to give each Branch Office its own colours and icon set. I'm using a set of alternate links, (e.g. <link href="branch1.css" rel="alternate stylesheet" type="text/css" title='B1' /> ) for the non-structural css. These contain all the new colours and background images. However, the main css still contains the original colours and images. My intent is for the alternate stylesheets to override the main css. To be sure this happens, they are included after the main.css Mostly things work fine. But I have an odd problem with html element that have multiple classes. Code: <div class=" gateway gwWarmfuzzies "> <h3><a href="warmfuzzies/">Warm Fuzzies</a></h3> <p>Help celebrate some of our colleagues' achievements.</p> </div> This is in main.css: Code:
div.gateway {
padding-left: 95px;
width: 195px;
float: left;
background-color: #fff;
background-repeat: no-repeat;
background-position: top left;
margin: 1em 5px 8px 0;
height: 67px;
}
.gwWarmfuzzies {
background-image: url(../i/gf/warmfuzzies.gif);
}
.gwWarmfuzzies should be overridden by one of the alternate stylesheets. Code:
.gwWarmfuzzies {
background-image: url(../i/gf/ BRANCH1 /warmfuzzies.gif);
}
The alternate version of gwWarmfuzzies is completely ignored. I've tried removing the main.css version of gwWarmfuzzies. When I do that, no background-image is applied at all. This does not happen when the element has a single class, only with multiple classes. Advice? Dear all, I want to add a print icon to my pages, which would print an alternate page (a printer friendly version). I have the following code: <link href="print.php?cli_id=2" rel="alternate" media="print" /> This works fine if I use the print icon in my browser, but if I use javascript:window.print(); within the page, it seems to ignore the alternate printer friendly page. My page appears in frames, and I plan to remove the browser toolbar and replace with a custom one in the page once the application is complete. Any ideas anyone? many thanks, Mark From what I see, I can do the samething without it. So when exactlly would I used it? Thanks. Hi, I am trying to serve another menu than my hover dropdown menu to touchscreens, and I am trying to do it using @media First I tried to only add a max-width using display none, it worked when I clicked but sometimes when the next page opened the page opened with the menu open, so I added an @media for the min-width also, and I think, not 100% sure that it works now. So I wonder If I want to have a diferent style for a class or div do I have to put @media on all classes or should it be enough to do only on one of them. Also Im not sure if the max-widht is to high, I did as I wanted to include tablets in non hover, but dont want to exclude pcs.... Well this is what I got so far, the css for the menu: Code: @media screen and (max-width: 1025px){
#menu ul ul .level2{ display:none}
#menu ul ul .level3 { display:none}
#menu ul ul .level4 { display:none}
#menu ul ul .level5 { display:none}
#menu ul ul .level6 { display:none}
#menu ul ul .level7 { display:none}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: none;}
}
@media screen and (min-width: 1025px){
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;} }
Thanks I put together the following site ... http://www.themax.co/ I am trying to create a style sheet for the PRINT pages, but I ran into some problems (the main site looks fine, but the print page doesn't). First, go to the page... http://www.themax.co/?page_id=6 When you go to print, and look at the print preview (in Firefox). most of the content is pushed to the second page. I assume this is because of the style .pagesidebox (which is a column that spans the entire page) ... I think this is causing the rest of the content to go to the next page. Any idea how to fix this? Second, I have a logo that goes against the black background (on the website) and a white logo that is supposed to appear on the print page. So, in the print.css stylesheet, I called the background-image to point to the new image. However, the new image is not showing up when printing. I assume this is because the image is a BACKGROUND image, and the print settings are set to NOT show backgrounds. Is there a way around this (using CSS)? Since there are two logos (one on white, and one on black), I can't place the image inside the html page (I have to use CSS). Please let me know. Thanks! I've set up a simple responsive design at [redacted] (my first such attempt at responsive design). The media queries seem to work fine when I resize my browser. However, when using my phone it seems to work with Opera Mini but not Opera Mobile or Androids built in browser. Ok, I guess I can't post the URL so hopefully this is something that someone has experienced before and can point me in the right direction. Hello, I understand that there are at least 7+ media types for CSS and more may be added later. http://www.w3.org/TR/REC-CSS2/media.html I want a special stylesheet for print but all other media should use the same stylesheet. Code: <style type="text/css" media="print">@import "print.css";</style> <style type="text/css" media="all except print">@import "main.css";</style> The following is a bad idea because it does not cover media that may be added in the futu Code: <style type="text/css" media="aural, braille, embossed, handheld, projection, screen, tty, tv">@import "main.css"; <style type="text/css" media="print">@import "main.css"; Is there a way to detect whether someone is using a mobile device, and write specific CSS according to whether the viewer is using a computer or Iphone/ Blackberry or other mobile device? Any links or info is appreciated. thanks - In the media=print style sheet I want to change the location of the div containing the material to be printed. Using this in the print style sheet does not move the div. #divname {position: absolute; left:50px; top:100px; width:200px;} Can a div be moved with a new style sheet. Hi Apologies if this is in the wrong forum but it stradles CSS, HTML and PHP. Is it possible to use @media within a style tag in html like so: <div style="@media screen { background-image: url(<?php echo $imageurl; ?>); background-repeat: repeat-x; background-position: left bottom;}"></div> The reason I am not not using it in the stylesheet directly is because I echo out all my template images dynamically with php. It seemed to work initially but then stopped. Anyone done this before? Garrett Basically I'm trying to create a word processor feel on a web page. I need a contentEditable div/iframe that will display as legal paper size sections, like a word processor would. So that when the text starts to over flow page 1, it would move to page 2, etc... Any ideas? I'm willing to pay for a good solution at this point... Hi, For some reason my css sheet for printing is producing huge text on the printouts in the main section of the page and I can't figure out why. style sheet included by: <link rel='stylesheet' href='print.css' type='text/css' media='print'> section in question: .pr{color : #000000; font-family: verdana; font-size: 10px} for some reason the font size is being ignored and the text come s out massive. the whole code for the page is too long to post but the section in question has a lot of tables enclosed in: <span class='pr'> </span> I know the stylesheet is being included properly cos it is hiding lots of other sections. Anyone got any ideas? Thanks I've got a pain of a problem. Firstly I've got my styles as Code: <!-- styles that need applying in all browser (including IE/NS 4.x) <link ... /> <!-- styles that need applying in modern browsers (IE 5> etc.) --> <style type="text/css" media="screen"> @import "/screen.css"; </style> <style type="text/css" media="print"> @import "/print.css"; </style> The problem is that IE 5 & 5.5 seem to ignore the media attribute on the style blocks so they include all the styles. I read somewhere that using @media will solve this problem, so I did: Code:
<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css">
@media screen {
@import "/screen.css";
}
@media print {
@import "/print.css";
}
</style>
This works fine in IE 5.x and IE 6, but now for some reason Firefox (1.0.7) is not including ANY of the imported sheets. However if I add normal rules within the @media ... {} sections then they are applied. Can anybody verify this, and does anyone have a solution? Thanks in advance, -D Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way? Will this work as I hope? Code:
div.news {
width:690px;
padding:10px;
margin:0;
float:left;
background-color: #DDDDDD;
}
.button_div {
width:180px;
padding:10px;
background-color:#953956;
cursor:pointer;
}
.body_text {
color:#284186;
line-height:130%;
font-size:11px;
}
@media print {
div.news {background-color:#EEEEEE;}
.button_div {display:none;}
.body_text {color:#000000;}
}
Also, is it ok to do this? Any issues I should be aware of? Code:
// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}
// HTML
<p class="italic large">Italic and large.</p>
Thanks, I'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 all, I am developing a website and kiosk display hardware. I want to target the kiosk display using a specific stylesheet. What is the best way? @media display and height:??px and width ??px or using @media ???kiosk??? etc. What other specifics can I target to define which style sheet is used? Thanks for any help. Dale. Hi, Opened a new post as its better. I am trying to do things for smaller devices such as mobiles and tablets. If I add something very simple in the stylecheat to the @media query such as background color of the body using this: @media screen and (max-device-width: 2000px){ body { width:766px; margin:auto; background-color:#00FF00;}} Or if I do this wich seem to have the same affect: @media screen and (max-width: 2000px){body { width:766px; margin:auto; background-color:#00FF00;}} I dont get the green background on the body, I only get it on my pc, on my samsung mini, on blackberry I dont get the green background and using adobe advice central on samasung tab and ipone 4 and maybe some more I get it, on the rest no background color. This is so strange, I imagen all have greater width than 2000px. If I set to max-width to 500 px I dont get it on my samsung mini either...????? it have a very small resolution, only 240 x something. I just dont get it I dont have any background color declared except the one in the @media query |
|||||||