Chrome and Safari Hack - html

I have the following style:
table.jqTransformTextarea td#jqTransformTextarea-mm textarea{
margin:0;
}
This works as expected in Firefox, Opera, Internet Explorer 7,8 and 6.
However, to make it work in Chrome and Safari I need to do:
table.jqTransformTextarea td#jqTransformTextarea-mm textarea{
margin:10px 0 0 10px;
}
How can I set this style to Chrome and Safari only?
I would prefer not to use JavaScript (or jQuery) to get this effect, and get the solution with CSS only, or HTML (but I don't know if there is a tag like: <!--[if IE]> that selects this two browsers).

Just solved my own question:
#media screen and (-webkit-min-device-pixel-ratio:0)
{ table.jqTransformTextarea td#jqTransformTextarea-mm textarea { margin:10px 0 0 10px; } }

Related

Printing a HTML page without page information

I am trying to print a webpage without page information.
With page information I mean: The of the page, URL of the page and the print pages and the date of the printing.
I am using the following code for it:
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin-bottom: 0mm; /* this affects the margin in the printer settings */
margin-top: 1mm; /* this affects the margin in the printer settings */
}
</style>
This code seems to be working on Google Chrome. But in Mozilla Firefox I still get the 'page information'.
So my question is, why is this code not working on other browsers (Mozilla Firefox) and how can I fix this so it will work on Mozilla Firefox and other browsers?
These are more browser settings than website settings. Yet you can use #page rule. Right now it will work only with Google Chrome (just like you wrote).
#media print {
#page { margin: 0; }
body { margin: 4mm; }
}
About the #page on W3.
For Mozilla Firefox you can try:
<html moznomarginboxes mozdisallowselectionprint>
See this.
Although in many cases this is determined by browser side settings, you might be able to have it behave more as you wish by using:
#media print {
#Header, #Footer { display: none !important; }
}
Source

IE and Firefox Overflow issue/bug?

I am trying to create a semi-responsive header for a website i am building, however i am running into an overflow issue with IE and Firefox. Chrome, however works perfectly.
I have created a JSFIDDLE to demonstrate what i mean.
In chrome, you should see something like this:
However in the same Jsfiddle on Firefox and Chrome, there is no red border on the bottom like this:
One way i tried to fix this was to change my css to this:
.header .header-image {
position: absolute;
overflow: hidden;
top:0;
bottom:1px;
left:0;
right:0;
}
This worked perfectly, BUT left a white space on Google Chrome (above the border and below the image)
What is causing this and how can I fix it and still get my desired effect?
In order to show the red border, just change your header declaration for the .header to be like this one:
.header {
min-width: 1100px;
position:relative;
overflow:hidden;
width: 100%;
height:350px;
border-bottom: 1px solid #FF0000;
}
As you can see I've deleted the "display: table;" declaration and it works fine.
I think it may have something to do with prefixes for Chrome and Firefox.
an example of a prefix is:
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Width not applying for class container in IE 9

I am trying to apply width for .container class but ie is not taking any changes of css.If any body have any idea let me know.Bellow is my code.
<!-- [if ie 9]>
.nav > li > a{
padding-left: 20px !important;
}
.container{
max-width: 1350px !important;
width: 1350px !important;
}
<![endif]-->
My website link
Conditional comments are meant to be used in the html markup, not the css. (See here for usage)
There are hacks for css to target ie9, such as as /9 or ... this:
/* target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width:0\0) {
/* ie9+ code here */
...
}
Check this example FIDDLE in IE9+ and other browsers

IE9 conditional statement not working?

I have created a very simple Wordpress theme for my university for Blackboard news/updates/mtc.
The theme looks great in the latest versions of Chrome, FF, and IE10. However there is a weird glitch in IE9. The reason I must support IE9 is because that is the browser that Blackboard recommends using for functionality purposes (when someone insists on using IE). My supervisor wants the blog to look the same in IE9.
So, my main menu looks fine, padding is fine, and no collapse when resizing the window; here is the class that is causing me problems in IE9 ("Home" menu padding is cut off; the menu collapses):
ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
So I try to add a conditional statement of:
<!--[if IE lte 9]>
<style type="text/css">
ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
</style>
<![endif]-->
However the conditional statement, even though nothing has changed, messes everything up in both FF and IE9.
Even if I mess with some of the elements in the conditional statement ideally to trial/error a fix/hack, it still looks like nonsense and is messed up.
What am I doing wrong? And can anyone suggest a possible fix?
The link to the live blog, (I am working on fixing this on my local machine):
http://blogger1.uhcl.edu/UCT/blackboard/
TIA
The two most obvious problems are:
a) You need a space between IE and the version number, e.g.
<!--[if IE 9]>
While you're at it you may as well make it less than or equal to IE9, i.e. <!--[if IE lte 9]> as it happens in (at least) IE8 too.
b) You need to close the style tag within the conditional.
That said, the -15px left margin seems to be the cause of the issue; not quite sure why that's required.

Webpage Cross Browser CSS

I'm having a problem with my form that looks okay in Firefox but it goes lower than I want it to on Chrome and IE. Also footers go higher in IE when there perfect in Chrome and FF.
I just want to know if there is any way I can make the CSS specific to each browser so if I opened my page in FF, IE or Chrome it would use the CSS specific to it.
Thanks
Update:
I have found this code to make a separate style sheet for IE:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Is there one I can make for all the other browsers?
In IE you can add a specific stylesheet using conditional comments:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For Mozilla and Chrome you could use vendor specific tags.
In Chrome you would use something like this (As Chrome is webkit based, you add -webkit before tags):
#foo {
-webkit-border-radius:5px;
-webkit-box-shadow: 5px 5px 5px #000;
}
And in Mozilla you would use (add -moz before tags):
#foo {
-moz-border-radius:5px;
-moz-box-shadow: 5px 5px 5px #000;
}
You have to remember you cannot do this in all tags.
List for Mozilla:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
List for Chrome:
http://qooxdoo.org/documentation/general/webkit_css_styles