I have just created a website which looks fine on firefox PC but looks totally different on Firefox Mac.
On Mac I don't see a div background image.
On mac in the footer, an item that is floated to the left appears on the right and an item that is floated to the right appears on the left.
A facebook div that I have commented with <!-- appears on Mac but not on PC.
The site is: http://www.ruthrudin.co.il
Can anyone help with these problems?
I only briefly had a chance to look at the source, but did notice that on line 66 you illegally nest an HTML comment <!-- </div><!--. Your usage of <SCRIPT LANGUAGE="JavaScript"> is invalid and should match how you did the jquery <script type="text/javascript">your code here</script>.
Run your code through a validator. The browsers do differ in how they handle invalid markup across operating systems, even from the same vendor.
Related
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 am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:
Here is the page so that you can view the source:
Contact Page
I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.
-Noah
Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1
You can add this and it should work (at least it did just through in-browser modifications)
after your normal css
<!--[if IE]>
<style type="text/css">
#mainbox{padding-left:0;}
#servicesright{float:left;}
</style>
<![endif]-->
That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.
Issues I detected on your page structure so far (which are causing the display issue):
#main-container should not have width
you are using table for your form layout which is a big mistake (it's pushing the whole content together down)
as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).
Long story short, I'm making an HTML email (yeah, I know). I've got it to the point where it looks great in GMail, Yahoo Mail, Thunderbird and Outlook 2003 (haven't tested 07...). The only hiccup is Hotmail (Windows Live Mail). The fact that it doesn't support background images at all doesn't bother me with regards to my layout...it's that because of the layout, I need to set the width of the table to be a set value (550px) instead of a percentage (80%) or else my header image will just be floating in space and looks ugly.
So I now have two options as I see it - make a Hotmail-specific css rule to set the width as a static value (I don't know if this is possible) or to have my mailer template get modified on the fly based on whether or not the recipient belongs to '#hotmail.com'. I'd prefer the former rather than the latter.
Clarification: To keep it simple, imagine a 550px wide by 150px high div. It has a background image with repeat-x. Inside that div, I have an img which is 150px high and 550px wide. If the outer div is set to 80% of the viewport, it should expand to the left and thus expose the repeating background. This is what's expected. Since Hotmail doesn't show background images, it's just a blank white space.
Further clarification: Go here to see an example of what I mean.
Try putting this in every image tag:
style="display: block"
You can't have different CSS as it's all supposed to be inline. You should also be using tables (I know, I know). If you could post some source, I could help a little further.
In the end I had to modify my email right before sending based on a custom rules list (regex replace based on domain).
I know it's old question but it might be of use to people still struggling with web and windows outlook and windows mail.
I found a way to hide elements specifically from windows outlook and mail app:
<span style="mso-element:field-begin;"></span>
Content to hide from Outlook
<span style="mso-element:field-end;"></span>
reference this great blog.
also you could target all outlook apps (mobile, web, desktop) as:
<!--[if mso]>
<div> Your content that you want visible </div>
<![endif]-->
you could also invert it with other conditions and target specific versions,
something like:
<!--[if !mso]> Everything not mso (outlook or windows mail) <![endif]-->
<!--[if gte mso 16]> All mso versions that are greater than 16 <![endif]-->
more on that on this link.
As for displaying backgound images in desktop/windows versions of outlook (mail app and outlook ms) you can use VML and more about that you can find here.
I have a test site at capitalcitysc and right over the header there should be the soccer club logo named logo.png. Shows fine in Firefox, but IE and Chrome do not. I don't have an easy way to test the css as I use a Mac with Firebug and my test PC has IE6 installed but no developer tools. I have tried z-index and moving the div's position in the header file but have had no luck. Any suggestions? Thanks.
I think you’ve actually got an HTML error: you’re missing the closing > on the logo’s <a> tag:
<div id="logo"><a href="http://wms-clients.com/capitalcitysc/"<img src="http://wms-clients.com/capitalcitysc/wp-content/themes/twentyten/images/logo.png" /></a></div>
Stuff like this is where validation really helps.
So I'm attempting to figure out where my cross-compatibility issue is - From what I can tell, Firefox and Safari have been working great, however Internet Explorer (surprise?) has been giving me tons of issues. Take a look at the site below:
https://secure.promptpass.com/index.php?clinic=1
For some reason, the background image is over-extending itself on the top and bottom (if you open the website, you will immediately understand what I mean).
Beyond that, in the Select box next to the "Select a Time" label, to the right there is always a box filled with ":45 pm".
The last remaining issue is that the entire content of this on many versions of Internet Explorer, all of the content is shifted to the left - based on the CSS, everything should be centered
Again, I've poured over this (and I'm sure these are simple things that I have overlooked) however at this point, I'm at a loss as to what this issue would be.
Thanks for any and all help.
First, move this elsewhere:
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='2883663228',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
It makes the page render in quirks mode as opposed to standards mode so IE is rendering it in super-retarded mode and in this, margin:0 auto doesn't work in IE quirks. The doctype will make it render in standards mode.