CSS - @media, When To Use It?

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,

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...

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

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.

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

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

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 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

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

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
-

I've been running into a problem where iPod Touch and iPad are applying styles from media queries they shouldn't be. This seems to be a bug, but maybe I'm doing something wrong. Here's a simple test page:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mobile test</title>
<style>
	@media screen and (max-device-width: 480px){ 
		/* ipod/iphone */
		BODY {background: orange;}
	
	}
	@media screen and (max-device-width: 1024px){ 
		/* ipad */
		BODY {background: green;}
	}
</style>
</head>

<body>
</body>
</html>

This shows green on the iPad, and green on the iPod.

If I change to something crazy:

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mobile test</title>
<style>
	@media screen and (max-device-width: 480px){ 
		/* ipod/iphone */
		BODY {background: orange;}
	
	}
	@media screen and (max-device-width: 6000px){ 
		/* ipad */
		BODY {background: green;}
	}
</style>
</head>

<body>
</body>
</html>

iPod: green
iPad: green

If I switch the order:

Code:

	@media screen and (max-device-width: 1024px){ 
		/* ipad */
		BODY {background: green;}
	}
	@media screen and (max-device-width: 480px){ 
		/* ipod/iphone */
		BODY {background: orange;}
	
	}

Correct.
iPad: green
iPod: orange

Back to crazy:

Code:

	@media (max-device-width: 60000px){ 
		/* ipad */
		BODY {background: green;}
	}
	@media (max-device-width: 4800000px){ 
		/* ipod/iphone */
		BODY {background: orange;}
	
	}

iPod: orange
iPad: orange

I COULD go back and refactor my code to put all the iPad specific stuff first, but I'm hesitant to do that with a system that seems broken.

Is it actually broken, or am I doing something wrong? Both devices are running iOS 4.3.

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

I have a legacy site which is laid out in tables, and rather large. There is a cell holding a table which holds, amongst other things, a link to a couple of js scripts which generate a dynamic menu.

I have been trying to use a media=print stylesheet to set display:none on that cell (which I have given an ID). This works fine in terms of the static content in that cell - the adjacent 100% width cell 'expands' leftwards to fill the gap, which is what I want, but the menu is still being generated over the top. The links to the two scripts are within the <td> which has been hidden by the css, but the menu is still being generated.

I would convert the whole site to css pos if I had the time...

Hello! 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.