MyBB Community Forums

How to make this css work with IE Firefox and Chrome? It works great with Firefox but ain't working with Chrome neither with IE10.

.testing1 {
    background: none repeat scroll 0 0 #388694;
    font-size: 11px;
    padding: 3px 5px;
	color: #f5f5f5;
	border-top: 1px solid #388694;
}

What do you want to achieve? This line is a little bit strange for me, because either you want a background color of not.

background: none repeat scroll 0 0 #388694;

Here some examples for several background properties.

No background:

background: transparent;

One color background:

background: #000000;

CSS gradient background:

background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

Background image:

background: url(imagepath) top left no-repeat;

(2014-02-02, 09:08 AM)Real Kenny Wrote: [ -> ]What do you want to achieve? This line is a little bit strange for me, because either you want a background color of not.

background: none repeat scroll 0 0 #388694;

It says "background: none repeat scroll 0 0 #388694;" because that is the way Firebug from Firefox interprets it.

In the raw CSS file it should be just: "background: #388694;".

(2014-02-01, 08:41 PM)marcus123 Wrote: [ -> ]How to make this css work with IE Firefox and Chrome? It works great with Firefox but ain't working with Chrome neither with IE10.

.testing1 {
    background: none repeat scroll 0 0 #388694;
    font-size: 11px;
    padding: 3px 5px;
	color: #f5f5f5;
	border-top: 1px solid #388694;
}

Hi Marcus, try explaining what isn't exactly working in Chrome or IE10.

Thanks guys very much IE and Chrome shows 1px less of padding!

this is enough for Firefox padding: 3px 5px; but for IE and Chrome it requires padding: 4px 5px;!!!


I use these codes but I am feeling they aren't the answer?

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 .testing1 {
    padding: 4px 5px;
}
}

@media screen and (min-width:0\0) { 
    .testing1 {
    padding: 4px 5px;
}
}

You can try to "reset" your Browser with this little Code Snippet.

* {
margin:0;
padding:0;
}

Put this into your global.css before body {........}

Thanks man very much help is very appreciated!!!