So, I've tried everything I can think of, or have found regarding how to make sure that IE 8 will work with the 'content' property in my page.
No matter what I try though, when viewing in IE9 using F12 dev tools to view in IE8 standards mode, the page simply won't load AT ALL. I get a "page error" when viewing in Adobe's browser tester as well.
As soon as I remove my "content" property line from my css, then it works fine, but of course, then I lose my cool drop-shadows that I'm wanting to use in all the other browsers.
here's the page: http://saks-jewelers.com (the featured product section towards the bottom).
Any thoughts on what I'm missing? (this site is run using magento CE 1.7)
The content property will not work in IE8 unless you specify a doctype. This is according to W3C.
Put this at the top of your code and let us know if it works:
<!DOCTYPE html>
Both people on IE8 are going to be disappointed! Did you try checking the inspect element in ie8 to see if the error is more specific?
Is your drop-shadow defined in the last CSS loaded?
Related
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I'm using jQuery's .css() method to set the background image of a div. The HTML in its final state is thus:
<div id="front-page-bg" style="background-image: url(http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg); display: block; "></div>
It works fine, however, I'm getting an error/warning in Chrome, where the background-image property is struck through as though it's being ignored due to bad input, even though it is obviously being applied. Why would this be? Is it a problem with Chrome, or on my end?
I've tested the page in FF and IE, where it also seems to work without any errors or similar warnings. Any ideas about why this might be happening, and perhaps more importantly, should I ignore it, since the page seems to be working?
EDIT:
By inspecting more deeply (ignoring the first misleading 404 problem with image), seems that developer tools is ignoring the style definition; infact it applies a
not-parsed-ok class which appends the warning icon, and an overloaded class which causes the line-through.
The overloaded class is not appended if using background in place of background-image css definition.
But to discover the reasons of this behaviour would be necessary to analyze the developer tools source code.
My guess is that is a developer tools bug/incomplete feature.
This is my own test:
as you can see the image used is local, and have apix. And this is the resulting inspection:
Testing with a non existent css property, it shows the identical behaviour:
Your referenced image has some strange web server issues:
infact it is returning a 404 error (maybe timeout?), then a redirect.
So you should check the image and the web server path, not your actual html code.
Even trying to put in actual html code, the error is the same:
This is the actual response of your web server, instead of your image:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
The problem is the DevTools/WebInspector bug.
DevTools UI code just shows the data not always correctly generated by the back-end part of DevTools.
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=70325
Chromium bug: http://code.google.com/p/chromium/issues/detail?id=100646
#IsaacLubow; Both Chrome & Safari developer tool show that warning error. Then question is
Why they show a warning ?
Answer:- Both Chrome & Safari developer tool show warning when the property is not understand & recognized by them.
for example:- write -moz-border-radius in the css. Then check the page in chrome or safari. It's shows the same error which you have.
Then the second raised question is
But background-image property is recognized by all browsers !
Answer :- Yes; background-image property is recognized by all browsers & the image is still shows in the website but the way we define the image is cause for that warning/error. In your example if you define background-image property inside the html tag instead of css. It's shows the warning/error.
Check this example the first div images show an warning but second div is not show any warning:
http://jsfiddle.net/sandeep/RDmRz/3/show
So; why that's happen ?
Because assigning attributes in html tag is a Deprecated method means
Those deprecated features can still be used, but should be used with
caution because they are expected to be removed entirely sometime in
the future. You should work to remove their use from your code.
Check what mozilla said about that https://developer.mozilla.org/en/JavaScript/Reference/Deprecated_Features
https://developer.mozilla.org/en/DOM/HTMLImageElement
So; Developer tool are updated as per the new html standards & after introducing HTML4 some properties deprecated & outdated.
Check this for more http://fantasai.tripod.com/qref/HTML4/deprecated.html
http://www.createafreewebsite.net/html_tutorial/body_tag.html.
It's good to write background-image in css instead of html tag.
http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg
Your image is not coming up, instead we are getting a 404 error. I noticed that you are using a wordpress site from the structure of your image url, what we might be looking at is not your image but the image included inside your 404.php page inside your theme.
The html that is returned is the following:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
And this is the image being loaded instead: http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png
I'm quite sure that if you check your 404.php page from your theme that is what you will find. So you might want to re-upload the image and use the new url.
Comment
I know the question was answered but wanted to chime in with my results as to what i found. I noticed that, for some reason, when you specify a background-image to an element it sometimes drops a warning in a webkit browser, which is the issue that the OP was having. But i noticed that the warning disappears when the background shorthand is used instead.
Like so:
background:#ffffff url('image.png') repeat scroll right top;
I modified #sandeep's demo to show how it works:
Here is the full fiddle: http://jsfiddle.net/RDmRz/7/
And demo page: http://jsfiddle.net/RDmRz/7/show/
Check the page with the developers tools and switch between the divs to show how it is working for the "works" images and not working for the others.
A couple of screenshots:
Works
Doesn't Work
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.
I'm stuck with a menu on a site I develop.
http://charlienutting.com
If you hover over the gallery at the top menu bar it should show you a drop down menu.
It works fine in Firefox but sucks in IE6 and IE7.
Really thankful if someone can help.
been about week now to fix this..
edit-
however if you can see there are drop down links which you can click, but those are not visible.
What happened when you debugged into it in IE? What error messages did you see and what have you tried?
I'm happy to help, but really, you haven't described a problem yet.
I guess transparency issue.
perhaps the line in js/dropdown.js that looks like
c.style.filter = 'alpha(opacity=' + ( 100 / c.maxh) + ')';
fire up the script debugger and see what the value of c.maxh is.
First let me say that you have talent as a designer :)
However, there are a few issues with the site's code as it is. I would recommend dropping that drop down code and implement your own using JQuery's effect library (I say this because you are already loading JQuery in your page). That is browser compatible so you wont have these issues with IE.
http://docs.jquery.com/Effects
Next, your header changes size between Gallery, resume and contact. You will probably want to get that fixed. Also, the resume page's links are positioned odd in FF 3.4... It would be best to make them without using absolute positioning. You can accomplish that by a mix of "float : right" and "position : absolute" (but not setting the "left" or "top" properties) :)
Your page is using a doctype, but doesn't validate.
Oh - and it's 2009 now, BTW :D (see copyright)
hint:
(C) 2008 - <?php echo date("Y"); ?>
Try setting a doctype. I know I've had issues in the past with hover events without a correct doctype. Your current page sets Internet Explorer to Quirks Mode.
Currently if, in IE9 I set my mode to IE7 and then switch the "Document Mode" from "Quirks Mode" to "Internet Explorer 7" mode, they show up correctly.
Put this at the top of your HTML files and see if setting your doctype will fix the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I really enjoyed using the Developer Toolbar with IE7, and recently upgraded to IE8 to take advantage of (what appeared to be) more full-featured developer tools.
The IE8 tool is really excellent (finally rivals FireBug), but I can't seem to inspect inside an iframe, which I could with the IE7 toolbar.
I'd prefer not to downgrade to IE7 because I like some of the other features of the IE8 tools, but the ability to inspect inside an iframe is a deal breaker.
Also, firebug is of limited utility to me because our site is an internally-deployed intranet app, which means "browser compatibility" is a very low priority, major functionality is often broken in FireFox.
Here's what the IE8 tools look like around the iframe
In firebug, I can see an <html> element under the iframe, which I can expand just like the rest of the page
The <iframe> in question has its src attribute set server-side (in the ASP.NET code-behind)
UPDATE:
I get the same result on this Iframe example page. If anyone can use the IE8 developer tools to inspect inside that iframe then I'd like to hear about it.
Install the final release of IE8 and you will easily walk through any element including iFrame and other container controls.
Unhelpful answer: it works for me here.
Inside the <iframe> I see an <html> inside of which is the normal content.
(This is RC1 under Win2k8.)
Does FireBug show the iframe having any content? Is the iframe being populated dynamically? If so try JavaScript debugging with a breakpoint on the point at which the iframe is populated.
Answering the question in the comment re. the iframe from http://www.htmlcodetutorial.com/frames/_IFRAME.html:
I see the content document in FireBug
I do not see it in IE8.
The one thing (compared to an internal example here) is that the iframe you pointed to contains default content... but since this is not shown in IE8's dev tools I can only think this is a defect and should be reported to MS.
this seems to be a bug with IE8 developer tools.
remove the <!DOCTYPE from the document referenced by the iframe and you are good to go.