CSS - Combine Import And Media Statements?

From what I see, I can do the samething without it. So when exactlly would I used it? Thanks.

Hi, I am importing a Word Press blog to a web site, but it looks kind of sloppy. You can see it here :

What I need to do is just present the title, and maybe the first 100 characters, then have a "read more" link. Once this link is clicked, the full article will show on the same page.

I think I might need to use a JavaScript library as well, but I know I will need some CSS.

If someone could give me a general idea of how to go about this, I would appreciate it. Links and resources are also welcome.

thanks

Hello all,

Is it ok to add the following on the same htm page???

The reason I think, and corrcet me if i am wrong, is that Netscape wants the IMPORT one as opposed to IE wanting the LINK one.

Code:

<link href="scripts/CoffsCoast.css" rel="stylesheet" type="text/css" />
<style type="text/css">@import url("scripts/CoffsCoast.css");</style>

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!

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

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

I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox.

Not sure the best way to solve this?

Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which?

Thanks

I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css).

Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file?

Am I being too persnickety about the look of my code and just use multiple <link>s?

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

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

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.