I'm running into a problem with background image of an <li> loading in firefox.
my original code was:
background: #bdcad7 url(../images/navbg.png) repeat-x;
which works well in chrome and IE but not in FF.
background: #bdcad7 url(images/navbg.png) repeat-x;
also works in IE and chrome but not in FF
The only way to get it working in FF is if I include the next directory level
background: #bdcad7 url(/includes/images/navbg.png) repeat-x;
but that doesn't work in other browsers.
I've tried all variations I can think of ./, ../, include quotes, double quotes, use background-image etc and can't get it to work in all browsers. The relative path just seems to read different in FF (something I've never seen before)
What works in all browsers is having the full url of the image or an absolute path, but eachtake 3 lines on the text editor so I'd like to avoid it if possible.
Any insight as to why firefox is giving me a hard time would be appreciated.
I appreciate all the input.
To the best of my abilities I figured it's a problem coming somewhere on the server side along the directory path.
I've doubled and triple checked the css, tried every variation possible and can't duplicate the error on a test document.
I think the only option is to go for the full absolute path in case someone else runs into the same problem.
background:#F1F1F4 url(/dir1/dir2/dir3/dir4/includes/style/images/background.png) top left repeat-x;
The correct syntax would be
background: #bdcad7 url(../images/navbg.png) repeat-x right top
So you may have to add the last 2 arguments for it to work.
It would help a lot if you gave us the site structure.
Make sure the div containing the background has some height to it. Also, make sure the image filename is relative to the path of the CSS file.
More possible solutions can be found here - Background image is not displayed in Firefox
Try url('../images/navbg.png') with ' '. I do it anyway, and it doesn't seem to hurt, so maybe it will help? Worth a shot.
background: url("../images/navbg.png") repeat-x scroll right top #BDCAD7;
Related
This should be really easy and basic but I can't for the life of me figure it out...
Very simple web page #1 is here:
http://www.lowhandicapper.com/ytlp04
I am trying to make a copy of it on a new domain with just minor changes to the link urls.
Here's the new page:
http://perfectimpactsystem.com/lp027
I can't seem to get the background image to appear on the pefectimpactsystem page! In chrome dev tools it shows the background link but it is crossed out with a yellow warning sign next to it.
Also in firefox the formatting is all messed up.
Please help!
In the background rule the first apostroph in the URL is actually a backtick (`). Replace it with an apostroph and it works fine.
In practice you can delete both the backtick and the apostroph since they're not required in a url(link) value.
This line is in your new site's CSS file:
background: url(‘http://perfectimpactsystem.com/wp-content/uploads/2014/09/bgTomIron.jpg') no-repeat center top;
Notice the odd characters at the start of the URL where the apostrophe should be.
Change your code to this, and you should be set:
background: url('http://perfectimpactsystem.com/wp-content/uploads/2014/09/bgTomIron.jpg') no-repeat center top;
Good luck!
I was looking at a friends website and noticed most of the text has the bottom cut off but only when viewing in chrome. I poked around in the css but couldn't seem to find the issue.
Can anyone help me out?
The site is http://www.customcasez.com/
The same issue exists here, Bubbler+One font (at least for me in chrome).
here is an image about how it looks at my place.
So, I guess the issue is not with your website but with the font itself.
Try replacing the font-family with some similar font or try to download it from another source
I've had the same issue. Text in input box looked fine in Firefox however it was cut off from bottom in Chrome.
Check with padding of the input box, it is smartly managed in Firefox but not in Chrome!
I gave padding as padding:0px 6px; (or whatever you intend to give!)
Okay, I have used reset CSS files for quite a while and they have usually worked, but since I have started using CodeIgniter (I don't think that has anything to do with it) there has been whitespace around div's that are unaccounted for and persistent across Firefox, Safari and Chrome. I took a screenshot of what I am talking about (the orange arrow is pointing to it):
Any help would be greatly appreciated. Like I said, CSS reset's don't appear to be working.
add display: block; to the img it will remove the extra white space check the result
and i also try the firebug and mozilla webdeveloper tool that they are great tool
I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
MAJOR UPDATE:
I have a PNG fix working on the site. When I remove the PNG fix the red cross and border disapear. What's odd is that the problem only seems to do it with this particular image. There are other Alpha Blended PNG's on the same page that render fine.
The image is not broken (you can see it) nor is it a link. But IE6 and 7 both put a box around it and a red cross on it. It also strips the styling.
UPDATE: The image is NOT a background image, and the image is definitely not broken. You can actually see the image, works fine in Safari, Firefox, Chrome and Opera.
It's a plain old regular image tag
<div class='container'>
<img src='../images/leader_concierge.png' class='page_leader' width="917" height="257" />
</div>
here's the css
.page_leader { margin: 10px 0; }
and here's the exact same thing in safari
You are missing the replacement gif.
All PNG fix methods require that a transparent gif be available to replace the png image, it's part of how the substitution works. If that gif is missing, then you get this broken image appearance even tho the PNG draws fine.
In the case of iepngfix.htc, it expects the file to be at /images/spacer.gif
In firefox with the Web Developer Toolbar you can view broken images. In firefox the image would still be broken but you wont see anything like IE6 and IE7 show.
Note, that in xhtml (well, you closed the img tag) you should use " instead of '.
If you are using iepngfix.htc you need to open it up and set the blank image path. The image needs to be a 1x1 .gif.
Looks like I was just barely beaten to the punch.
Yes, I had the same problem, and it was also with iepngfix.htc which allows transparency in IE6.
Yes, the required accompanying gif image was on the images folder, as instructed.
So I went into the htc file and entered the exact link and now everything works perfectly!
Firefox and 'the other browsers' handle broken images more elegantly, but the image almost certainly is broken - they just aren't rendering it. Perhaps try to get in the habit of regularly checking your site logs for 404s, as it's not always obvious that you have a broken image in a contemporary browser.
Edit: Given your recent discovery, perhaps open the pngs in question in something like TweakPng - you may find that there are chunks causing this behaviour that you can safely remove. Compare the effected pngs with pngs that work properly and remove the offending chunks.