No idea why this is happening... this is what it looks like in firefox:
And this is what it looks like in Safari:
A quick inspection with firebug for safari shows that its not picking up any style sheets except transmenu.css (for the menu - which isnt' even being used). I can't find ANY reason why this would happen.
Any ideas?
website: http://tradartsteam.co.uk
Thanks
#Thomas Clayson: Remove the extra </script> on Ln. 35 of your source-code.
Edit: It's two lines after <script type="text/javascript" src="/_common/js/mootools-1.2-more.js"></script>
Update:
#Thomas Clayson: The only way I could get the page to display just fine was to comment out the entire <script> element with $.noConflict(); inside until before <script language="javascript" type="text/javascript" src="/js/swfobject.js"></script>. Even just $.noConflict(); on its own breaks the page again. I'll do some more digging and update my answer again (unless someone else can find the solution before me).
Super Massive Update: #Thomas Clayson: After going a little batty that I couldn't see/find the problem, I set about making the document compliant for its DOCTYPE using the W3 Validator...that eventually and finally led me to the offending code hidden deep within the events of $('#calendar').fullCalendar!
<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning /> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPl...
Not only is it horrible, proprietary MS Word nonsense, it got truncated and well...it severely messed with your site in some unexpected (at least by me) ways. Ah, even though your comment below pointing out what I should have felt in my bones having had to deal with this very issue far too many times before myself came a little late, your question has ultimately given me valuable experience so +1 for that. ;-)
Safaris web inspector shows errors. Ignore the favicon, but I suppose it might have something to do with that.
In fact, just having looked more closely at your source code, I found a great number of mismatched opening and closing tags, especially within the abbreviated text strings in your jQuery javascript (the ones ending on "...") - whatever you did to parse those even cut some of the tags in half.
I don't know how Firefox tolerates this (quite amazing, actually), but you might want to check your document syntax from top to bottom and make sure your code is correct. I'm quite sure Safari is not the only browser bound to have problems with this page.
Link to your stylesheet before your scripts (even better - put your scripts at the bottom of the page.)
I'm not sure exactly what the problem is but you do have an awful lot of javascript and the errors look to be interfering with the page load.
Related
I'm using wordpress for months and everything worked until today.
In my header.php I have my !DOCTYPE html, however it doesn't appear in my page.
I'm using chrome devtools to debug my code and when I look the source file I see a red dot before the doctype then when I mouse over it I see /ufeff.
Furthermore, in my code I have  right after /head tag that's make a kind of blank space between my header and my body.
I tried to change the encoding to utf-8 with notepad++ without success.
I tried all day to fix this issue and now I looking for some help.
Sounds like it might be a byte-order mark.
There are lots of answers which might help you, such as this or this.
I have a search bar plugin (Wordpress) which I have modified by CSS to suit my design. The thing is that it gets displayed ok in my latest version of Chrome, but it doesn't in other versions of it or Internet Explorer.
Here is how it should be everywhere: http://i.imgur.com/eTpHgK2.png
Here is how it is displayed in iExplorer and some other cases: http://i.imgur.com/1WKwYWc.png
The URL is: impresionados.net
The CSS: http://pastebin.com/bjpLS3DM
After having a look it seems like the custom styles are being applied in the first situation, but not on the second one. I have looked for missing semi-colons or closing curly braces, but I haven't seen anyone missmatching.
Where could the problem be or which tools could help me identify the problem? Thanks!
You wrapped almost all your code in media-queries, that can only be interpreted by some browsers. You might want to think about implementing http://modernizr.com/ to create fallbacks for that scenario.
Have a look at http://caniuse.com/#search=media to check to what extend you can use certain CSS selectors.
My testing link is jcleung.com/m2g-test/
For some reason, the styling I have on my form is working on every browser (inclduing lower versions of IE) except for IE9!
Anybody else have this issue of know a fix?
Firstly, you have some validation errors that may be worth fixing.
Secondly, for some reason the element (on which you target your CSS) doesn't contain all the fields in ie9:
You have your <form> wrapped with <p> tag and I wonder if that makes it go crazy? Anyway, I'm pretty sure it's a html bug and I'll keep you updated if I find the problem.
EDIT:
Ok, I did some tests and I'm 99.9% sure it's because the form is wrapped with p
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).
I have a php file with 's and the things in the div should stay on one page,
for this possebillity i found this:
http://www.w3schools.com/css/pr_print_pagebi.asp
However like you can see its only compatible with opera and nothing more.
I dont want to demand my users to use opera so I was wondering if there was a alternative to the "page-break-inside:avoid".
Thanks
Matthy
Support for print specific CSS is pretty crappy. Have a look at the CSS discuss Wiki for an extensive guide (it also has a link to a browser support compatibility table). I have had some success with page-break-before: always when I was playing around with this sort of thing a few weeks back - as long as your div is less than a page long you may be able to just force a page break before it?