I believe this question has been asked a lot of times, and I have managed to overcome this problem before whenever it occurred. Just now, I feel stuck with it and can't find a proper solution to make it work in all browsers: it does work properly only in Firefox, while in IE and Safari its elements are somehow apart from each other. You can see the result here:
http://img813.imageshack.us/img813/8393/firefox.png
http://img812.imageshack.us/img812/8041/10990669.png
This is the code I use:
http://pastebin.com/n6KEjazp
Thank you very much in advance!
In addition to the padding misspelling (invalid CSS), those other browsers calculate the cell heights differently. In IE, the height is added to the padding.
Change this:
.top_menu {
background-image: url(images/header.png);
background-repeat: no-repeat;
height: 155px;
font-family: LilyUPC;
padding-left: 184px;
padding-top: 120px;
}
To this:
.top_menu {
background-image: url(images/header.png);
background-repeat: no-repeat;
font-family: LilyUPC;
padding: 120px 0 1em 184px;
}
Related
.googlePic{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
This is an example of my class googlePic in my css file. It works out and prints out nicely on google chrome and safari. however, it doesn't work on firefox. Nth gets printed out. Please help :)
The content property works with ::before and ::after.
googlePic::before
{
content: url('../../img/googlePlusIcon.PNG');
}
Read this:
http://www.htmldog.com/reference/cssproperties/content/
IE8 only supports the content property if a !DOCTYPE is specified.
I know this may be a late response, but i came across the same problem.
I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.
What worked for me, was creating an empty 'content' and using a background to show the image:
it works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
edit: forgot to put the :before after the classname
you have to write two css class in style
.googlePic
{ /*this for crome browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
.googlePic: after
{ /*this for firefox browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
and its works for me :)
The best way to handle images throughout all web browsers is to use the background css property with the background-size.
However, IE8 and lower version won't support it (represent 2% of viewer in 2014)
.googlePic{
background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
background-size: contain;
float:right;
height: 19px;
}
I simply added 'alt' and it was working with without using Pseudo classes
If you change the tag to a div and not a img , content should work in firefox.
This saved me. Remember to remove alt attribute from the img or you will find the alt and the actual image in Firefox.
.googlePic, .googlePic:after{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
Adding the alt attribute to the img tag and then using content="url('...')" will work in firefox. For e.g.:
<img class="my-image" alt="myImage" />
.my-image {
content: url("...");
width: 10px;
height: auto;
display: inline-block;
}
I had the same problem recently and none of the solutions above worked for me. I have resorted to the following work-around.
I included Bootstrap in my projects and used its img-responsive class.
After that, I simply include the image using the <img class="img-responsive"> tag. It displays and scales beautifully on every browser and every viewport size.
Hopefully this is helpful to someone.
I came across the same problem, in my case I was not able to show the image using content:url(). I wanted to display waiting gif in one div. I don't know the details of Mozilla support. But it is resolved in my case by the following code.
.img_div{
background-image: url("wait.gif");
height: 20px;
width: 20px;
background-size: contain;
border: none;
}
It is working on Chrome 73 and Firefox 66.
worked for me this way.had to put file/// and then url.
file///C:/user/s/desktop.......jpg
You can experiment with setting height and width to 0, add a padding and set the background image. You will have to make it display: block or display: inline-block for the height to take effect.
Here is an example: http://jsfiddle.net/zBgHd/1/
I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.
There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.
I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”
This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.
Any suggestions?
That affect can be achieved using CSS 3 image masking. However, at the moment, only webkit supports the property. I would implement something like this, then use a fallback for other browsers until everybody catches up to speed.
As a side note:You can also increase the CSS adoption be using ChromeFrame, or something similar
An Example from that link:
SVG images can be used as masks. For example, a partially transparent
circle can be applied as a mask like so:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
I ended up using two images without any holes or transparency. It's a hack but works in all browsers.
html5 or something like a gpd as php gui. But html5 doesnt work with ie8 or before, at least if the client doesnt have the chrome frame of google inc.
If you can play with mix-blend-mode property, there is simple solution that work on all modern browsers.
http://codepen.io/sajijohn/pen/OXEgkj
HTML
<h1>SUPER-FLY</h1>
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
background-size: cover;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: raleway, sans-serif;
font-size: 80px;
line-height: 60px;
text-align: center;
padding: 20px;
/*/////////MAGIC//HERE////////*/
background: #fff;
color: #000;
mix-blend-mode: color-dodge;
/*////////////////////////////*/
}
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
When I declare this style for a div:
#fbInner{
position: absolute;
margin: 11.2% 9.7% 0% 26.4%;
width: 63.5%;
height: 54.6%;
overflow: visible;
/*max-height: 190px;
max-width: 490px;*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #FFF;
/*border: solid 2px gray;*/
}
Chrome sets every margin right except of the margin top, which is set much smaller than in other browsers ... strange, all other margins are displayed like it should ...
What is the reason for that?
Is there a workaround that still uses percentages?
Seeing as this is an x-browser css question, resetting the css styles would be a valuable first step - maybe even the solution. You haven't disclosed any HTML code, so I can't know what other tags or styles are affecting #fbInner
In any case, here is the "meyerweb reset" stylesheet: http://meyerweb.com/eric/tools/css/reset/
Link it topmost in your HTML file. It will probably break your site, but that's a good thing. At least it should be equally broken in all browsers now. When you've fixed the look of your page, it should work properly in most/all browsers.
I have the following CSS class defined:
.box .login {
border: 0;
float: right;
clear: both;
height: 48px;
background: url(../images/submitr.gif) no-repeat right;
line-height: 20px;
padding: 12px 42px 16px 23px;
margin: 8px 22px;
color: #FFF;
font-weight: bold;
}
The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?
(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)
Thanks for the help! I really appreciate it :)
Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)
Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.
I have my site working perfectly in IE 6+ but it looks weird in IE 6 or IE 5.5, as I can't ignore the users with IE6 because still around 6% of traffic occur from this version. I am looking forward to have the alternate.
With my some research I came to know that by setting haslayout property, I can solve out formatting issue, but I consider myself extremely poor in CSS and hence I need a help of yours to rectify this issue.
You can find the URL below& you can see it's behavior in IE6, just in case if you are unable to test you can check it by viewing the source, please share your suggestions.
URL: http://anujtripathi.net/BlogListing.aspx?Id=2
Your code (default.css):
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
Try shrinking down 95% to like around 92%.
You can use a IE6 hack like so:
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
* html .bg1 {
width: 92%; /* Star Html Hack IE6 only */
}
*+html .bg1 {
width: 93%; /* Star Html Hack IE7 only */
}
But I highly recommend learning the right way and looking at the link below for organizing CSS for cross browser compatibility:
What is the best way to deal with IE compatibility issue?
I would look at your border widths, margins and paddings. It looks like your content is being pushed down because there isn't enough horizontal space. For a quick check, make your main container a little longer and see if the content shifts up.