I was looking into MDN Docs for media queries and it says that:
The #media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
Then I tried to test that with the following code:
#media (min-width: 375px) {
.main {
border: 5px dashed lightcoral;
}
}
.main {
height: 500px;
border: 5px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
<div class="main"></div>
</body>
</html>
It just works when I set the media query after the .main class. I understand this happens due to the cascade flow in the document, but if that, why the docs says to place it at the top level of my css code?
The #media at-rule may be placed at the top level of your code or
nested inside any other conditional group at-rule.
Top level code means the code is not nested inside a CSS class.
That statement from MDN docs means the media queries can be nested in the class or just at the bottom of the file to ensure cascade flow (Top level).
I found a very odd problem printing in Google Chrome for Mac that I am trying to fix. When using "Print Using System dialog" option the #page inside the print styles are ignored, which causes the page to be incorrectly printed. When printing via the built in chrome print dialog it seems to work ago.
In windows Chrome, the system dialog and the regular dialog both ignore the #page properties.
The only reason I am even defining #page properties because my version of bootstrap defines these and I want to overwrite them.
here is the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0 !important;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Working example:
http://blastohosting.com/chrome_bug/
I've tried several approaches and found one that works with my version of Chrome (32). You have to set the value of the #page margin inside the print media query to 0 without !important, any other value will trigger the bug:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Recently I've made custom CSS only (imageless) checkmarks and radio buttons.
I've used this piece of CSS code for checkmark content: "\2714";, but I have issues with sizing that checkmark, it stays "small" no matter what, any idea how can I make it bigger?
font-size seems to work just fine for me in FF 10:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
p:before {
content: "\2714";
font-size: 30px;
}
</style>
</head>
<body>
<p>Hello there</p>
</body>
</html>
EDIT: Chrome and Safari also seem to work with no issue.
I have a screen that displays two flot graphs side-by-side quite happily.
I want to be able to print the graphs so I've set up an #media print clause with CSS like this:
#media screen
{
div.plot {
float: left;
font-family: arial;
width: 575px;
height: 300px;
}
}
#media print
{
div.plot {
float: left;
font-family: arial;
width: 300px;
height: 300px;
}
}
My HTML looks like this:
<div id="graph" class="plot"></div>
<div class="plot" style="width:50px"></div>
<div id="graph2" class="plot"></div><p></p>
As far as I can see, the printed version should produce two graphs, each 300 px wide.
What happens is that I get two graphs which still have the larger 575px width which then run into each other.
Is my understanding that CSS width controls the width of the graphs correct, or do I have to use another CSS control to fix the width of the graphs?
Your problem is likely that when you call $.plot, it creates canvas elements inside your #graph placeholder. Those canvas elements use the size of your placeholder, when plot is called, to set their own width and height. When you hit Print, that changes the stylesheet to the print version, but you would also need to re-call $.plot or use the flot resize plugin.
this work perfectly for me :
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test </title>
<style type="text/css" media="screen">
div.plot { float: left; font-family: arial; width: 575px; height: 300px;border:1px solid red; }
</style>
<style type="text/css" media="print">
div.plot { float: left; font-family: arial; width: 300px; height: 300px;border:1px solid red; }
</style>
</head>
<body>
<div id="graph" class="plot"></div>
<div class="plot" style="width:50px"></div>
<div id="graph2" class="plot"></div><p></p>
</body>
</html>
Your error probably lies where/how you defined your #media print.
Else it might be your div id="graph/2" that cause the problem... (if you have an img inside it that is too big for example) (try to add overflow:hidden!)
PS : for easy switching between media and print css, I use the web developper toolbar.
position:fixed that doesn't work for Internet explorer 6. I can't really understand the fixes found on google. I need it to work in IE6, IE7, IE8 & FireFox 3.0.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
The result isn't super-smooth, but it does work.
UPDATE
I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.
yes IE6 sucks. here's the hack...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
that basically tells IE6 to keep it absolutely positioned in the top left even as it scrolls.
this should go under the rest of your css for the element so it over-rides it in IE6.
here it is for your left bar...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
I just tested this on IETester's version of IE6 and it worked great and... No Jitter, Whoo!
Let say you have a element with a class of box for example...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Replace the opening <HTML> tag with conditional IE statements...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
and
<!--[if !IE]--> <html> <!--[endif]-->
Then like MatW & mitchbryson suggested use 'expression' to simulate position fixed.
Note: This code goes after the original element's styles in the CSS.
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
The problem is that on any page scroll the element will jitter, this is one way to compensate...
Note: This code goes at the top off your CSS or after your styled 'HTML { }' in your CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
According to Thomas Aylott # SubtleGradient.com ,
"... This forces the processing of the CSS before the page is redrawn. Since it’s processing the css again before redrawing, it’ll go ahead and process your css expressions before redrawing too. This gives you perfectly smooth position fixed elements!""
article link: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
For example, all together...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
Found this solution which I tweaked ( Basically the lines I changed was: $('#sidebar_left').css('top',document.documentElement.scrollTop); ):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo#gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
It jitters and looks bad, but work on all browsers including IE6.
I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.
If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.
http://code.google.com/p/fixedposition/
Something like this may work for you:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.
It is possible to do it with CSS expression, but with some extra hack to get a smooth scrolling:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}