I am adding class="noPrint" for elements to hidden them
It is working fine in chrome but when I browse in Mozilla and IE, by default elements are not visible.
I need those elements to be hidden on print not by default.
Only with chrome it is working but in other browsers it is not
Here is my CSS Code :
<style type="text/css" media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
You can use media queries to style things differently for print.
Something like this:
<style type="text/css">
#media print {
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
}
</style>
Related
i am using following css code for displaying flash text in my website. Flash Text Displaying in Chrome Browser nicely but not in Mozilla Firefox Browser. if i add this code width:650px; position: absolute; in css, displaying flash text in mozilla firebos nicely but not in chrome browser again. what should i do ??
.flash_text { padding-left: 50px; margin-left: 50px; }
Chrome Browser
Flash News : Training Programme on Personality Development
Mozilla Browser
Flash News :
Training Programme on Personality Development
how to make it proper display in both browser
the following css code working nicely for chrome browser
.flash_text { padding-left: 50px; margin-left: 50px; }
but not to Mozilla Browser
if i add this coding width:650px; position: absolute; displaying nicely but again chrome browser not displaying properly
what to do??
<html>
<head>
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
All 3 browsers
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
I have a CSS similar to the one below.
.ui-icon {
font-size: 6em;
height: 180px;
width: 180px;
}
.ui-icon .ui-icon-label {
padding-top: 15%;
}
The top padding doesn't display the text in IE9 (i.e. ui-icon-label).
HTML is also given below.
<div class="ui-icon-color ui-icon">
<div id="icon-1">
<i class="icon-cog"></i>
</div>
<div class="ui-icon-label">My Label</div>
</div>
But the same code works well in Chrome and Firefox. IE9 displays the ui-icon-label till the padding is 13.4%. Till the value, when I increase it gradually the text moves downwards a bit. Above that value it suddenly disappears. But For me 15% looks the best position to place the label. I went through different solutions provided in the suggest like 'clear:both' or using the W3C validator. But they didn't help.
FYI, the icon-cog class comes from font-awesome.
Have you considered using a IE9 targeted stylesheet with media queries to solve that issue?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
// In the CSS:
#media (max-width: ???px) {
.ui-icon .ui-icon-label {
padding-top: 30%;
}
}
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
I have to apply width to a div. The width value is need to be varied across browser. I cant apply conditional css . So can there be any hack for doing this.
FF
.apply{
width: 720px;
}
IE8
.apply{
width: 690px;
}
Can these be combined using some hack so that the respective properties will be applied automaticaly as per the browser.
For Firefox and IE specifically:
In CSS:
#-moz-document url-prefix() {
//Firefox-specific CSS here.
}
In HTML:
<!--[if IE 8]>
<style type="text/css">
//IE8-specific CSS here.
</style>
<![endif]-->
For IE8 and below:
.apply{
width: 690px\9;
}
I found this link, hope its useful to you.
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
Is the width for FF different from other browsers? (except for IE of course). If not, then set your CSS to:
.apply {width: 720px;}
For IE8, use conditional statements in HTML.
<!--[if IE 8]><style type=text/css>.apply {width: 690px;}</style><![endif]-->
Apply CSS Classes based on Browsers like FF and IE & IE Edge.
Use below sample css code.
/* This is for Firefox Browser */
#-moz-document url-prefix() {
.divColor {
color: red;
}
}
/* This is for IE Browser */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.divColor {
color: blue;
}
}
/* This is for IE Edge Browser */
#supports (-ms-ime-align:auto) {
.divColor {
color: green;
}
}
I have a background that I would like to change depending on which browser the user if using. If the user is using IE7 or IE8 I would like to change the background to a totally different image.
Can this be achieved by editing the CSS below as it seems pointless to create a new stylesheet for one item.
Thanks in advance for any help.
.navigation{
background: url("images/navigation.png") no-repeat;
}
Pretty sure there's no way to do it without extra markup.
You could just do this in the HTML:
<!--[if gte IE7]>
<style type="text/css">
.navigation{
background: url("images/navigation.png") no-repeat;
}
</style>
<![endif]-->
Isn't exactly the sexiest bit of code I've ever written, but it does the job without adding a whole separate stylesheet file. Though you might as well give in and make an iehacks.css file.
This code should only select the background if you're using IE 7 or greater. Other ways of using conditional HTML can be found at http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/.
<!--[if gte IE 7]>
<style type="text/css">
.navigation{
background: url("images/navigation.png") no-repeat;
}
</style>
<![endif]-->
<body onload="setBG()">
<h1>Welcome to my page</h1>
<script>
function setBG(){
document.body.style.backgroundImage=((!!document.all || window.opera) ? 'w3bg.jpg : 'iebg.jpg') // delete the second ! and switch the jpgs
return
}
</script>
This means if the browser does not support document.all (which is supported only in IE4+) or is Opera then display the background iamge w3bg.jpg. If the browser does support document.all then display the background image iebg.jpg.
There is but keep in mind this is not valid CSS. Your best bet is to create the second stylesheet with a conditional statement.
IE7 will interpret this
*+html .navigation { background: url("images/navigation.png") no-repeat; }
IE8 will interpret this
#media \0screen {
.navigation { background: url("images/navigation2.png") no-repeat; }
}
.navigation{
background: url("images/navigation.png") no-repeat;
/*all browsers*/
}
*+html .navigation {
background: url("images/navigation_onlyIE7.png") no-repeat;
/*only IE7 valid css*/
}
#media \0screen { .navigation
background: url("images/navigation_onlyIE8.png") no-repeat;
/*only IE8 NOT valid css*/
}
I would probably use IE CSS hacks that target the element: http://paulirish.com/2009/browser-specific-css-hacks/. It eliminates the need to create a new style sheet.