So I have stumbled upon this problem, CSS just doesn't work on my computer, and what is more interesting, it doesn't work only for files that I create and it doesn't work only for me. So when I go to any webpage, CSS will work perfectly, however when I go to websites created by me, it wont work only for me, but it will work for other people.
Things I've done so far:
Tested other browsers (didn't work on chromium and firefox)
Checked from other computers (CSS worked on them)
Told other ppl to check it(worked for them)
Some people said that it might be because of adblock, disabled it
everywhere, still no results.
I have Linux Mint 15, and I either suspect that it might be something to do with either my OS or the way I save files, but I'm clueless of what to do to be honest, I've never had a problem like this before.
The link to your stylesheet is bad. Stylesheets have type text/css.
Solution: change type="style/css" to type="text/css".
There are other errors in your page as well, such as the missing > after <ul, so you should validate your source, for instance with the W3C Validator. But the above one is the problem you're after.
Related
I am working on a Wordpress site (a modified 2012 theme) for a client that is rendering incorrectly in IE8. Everything looks great in IE9+, as well as current versions of Chrome, FF, Safari, etc. I have looked around at some of the suggestions posted to fix the problem but I'm not quite sure where mine begins. The whole page is considerably broken. If anyone can provide me with some clues it would be a huge help. Thanks!
My Site
Edit: I'm noticing some of my styles are not being applied, specifically to top-nav and my footer. Others appear to have most if not all styles mostly intact. I've read that media-queries are not supported in IE8, but I don't see how that could be related. I am also reading that only 31 stylesheets can be applied, but I don't believe I am using nearly that many.
I had a project a while back where I have built an intranet and was nearly finished with the strap when I realized that most of the users rely on IE8; it was a shocking experience, can tell you that. That just as a preamble, so I know what your into.
I have wasted a lot of time so to safe yours (maybe), here what I would look for and probably do:
Install IE8 if you haven't already. There's a lot of tools which can help you with that like IE Tester as well as an integration installation from Microsoft directly to switch between versions
Eradicate the current errors first before you start working on the specific IE8 issues (as #markratledge already mentioned)
If you want to have HTML5 elements working as well then I recommend the HTML5.js Enabling Script
You have definitely too many HTTP Referrers (even for modern browsers), in IE8 (especially on a slower machine) it's sometimes deadly (Your page may load fast, however the rendering time is extremely long (+/- 6-20 seconds))
Combine and minify CSS and JScripts
There are a lot of services around the net where you put in your raw data and it compiles you a minified version, or server-side like Minify for PHP5
Move most scripts to the bottom to counterfeit rendering issues in IE8
Make a unique .css only for IE8 or use hacks, if really needed in your main, however you prefer (quick'n'dirty solution though)
IE8 and the X-UA-Compatible situation
How IE8 Determines Document Mode
I'm not too sure, but I think Mootools and jQuery together may create a conflict in older IE's (assumption)
Fix your code errors, in particular the JS call above the doctype. Anything above the doctype throws IE into quirks mode
Especially IE8 will get really hard on you for little mistakes inside the code, I have even seen script-includes not working because of being positioned lower than another in the code (while any other browser doesn't really care). It will take you at least a good bunch of hours to fix/erase all those errors and to make it compatible for IE8< users.
Beware that most clients (at least from my experience) don't (want to) understand browser compatibility issues like this one (It has to work!) or if really needed then make them understand that some features may be jeopardized/incomplete in the specific browser, herein.
There's plenty more you can do, but that depends on the deadline/timespan you have.
Fix your code errors, in particular the JS call above the doctype. Anything above the doctype throws IE into quirks mode
See [Invalid] Markup Validation of delindesign.com excellence - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Start fixing the code errors and revalidate.
I've just recently downloaded dreamweaver cs6. I've been following tutorials online, and I've run into a bit of a snag. I'm almost embarrassed asking this question, because I know I must be missing something obvious, but here it goes:
I'm following a tutorial right now on making a drop-down menu out of pure CSS. After implementing the first few lines of CSS code I was losing all of my sub menus in the drop-down. After pulling my hair out trying to figure out why for the better part of 2 hours, I finally preview in Firefox. (can't believe I didn't try earlier.)
It all seems to work fine in my browser, but I was wondering: Is there a way I can look at it in Dreamweaver? Its really inconvenient popping in and out of my browser everytime I want to check something. Like I said, I'm basically (not really basically, I just am) a complete noob at all things web-design. Thank you for your time.
Dreamweaver is just an IDE and it is not a browser. It doesn't execute :hover events and JavaScripts. You need to preview what you have done using F12 and check it out. :)
Short answer: no. At least, there's no reasonable expectation that you should. The problem with web-design is that the only real way to do things properly is to code by hand and preview it in a browser in another window - this does come as a culture-shock to "designers" who are used to WYSIWYG programs like Photoshop and InDesign, but the web is a completely different media where the underlying markup matters the most and is open to re-interpretation by browsers.
Dreamweaver has historically had good WYSIWYG rendering (thanks to their partnership with Opera years ago) but ultimately it's still not the best way.
I note that Microsoft's "Expression Blend for HTML/JS Applications" (there's a mouthful) does actually have first-class design-time WYSIWYG support because it works directly with an instance of IE, so you can test things like :hover and client scripts at design time - unfortunately it isn't suited to actual "web" sites - just "desktop" HTML, which is a shame.
This is very strange. I'm the main developer of www.inspirastudios.com.mx. I use cufon font replacement for the main navigation menu. I develop in Linux, so I use Internet Explorer in wine to test my site. The problem I'm getting is that cufon substitution is not working in my IE7 version. It works OK for other IE>7 versions and in any modern standard compliant browser. The strange thing is that, using some online testing sites, like http://ipinfo.info/netrenderer/ and http://browsershots.org the site looks OK, while in some others (like http://www.thumbalizr.com) it doesn't. What the hell is going on?
The issue with online testing sites is that you don't know how they're set up. I'm betting that some of those sites use IE7 straight, while others might be using IE8/9 with the render mode forced to IE7, or some other similar chicanery. Never trust those sites if you actually care about your results.
Now, on to the results of your personal testing. In IE-over-Wine, I've had a lot of weird stuff happen and I'm not convinced that it's truly comparable to actual Internet Explorer. This goes double if you're using IES4Linux or similar, because you (again) really have no idea what's been done to it to make it run. Always use a virtual machine (or actual Windows machine) if you possibly can.
I can confirm, though, that cufon appears to be functioning properly in IE7 as far as my copy of IE7 is concerned. :)
I am using HTML 5.
I have included following line to cufon code:
<script type="text/javascript">Cufon.replace('.mid_body h1');</script>
the <h1>tag doesn't get cufon font
but when I convert it to:
<script type="text/javascript">Cufon.replace('h1');</script>
it works!
I'm doing css for a website. I send the html and css to a guy, he puts it into ASP.net. The problem is that the transfer didn't end well for my code and it needs some fixing. The problem is that when I look at it in Chrome, or Firefox, or IE8, I get three completely different renderings. I spent a good amount of time trying to fix a drop-down menu that is supposed to appear while hovering over a link. The one he had in place from ASP.net worked in IE, kinda worked in Firefox, and was completely broken in Chrome (I haven't tested Safari or Opera.) Just getting it to look basically the same in firefox and chrome was a struggle. The html source is showing me two completely different pages as well.
Does anyone have experience with this? I know nothing of ASP.net, and it seems like the guy is modifying my layout with a wsyiwyg (I found tables used in random places, which I did not put there.) Faced with this, what is my best option? Is this fixable, or am I in over my head?
Many times WYSIWYG programs don't generate code that results in reliable, consistent renderings. However, there are a few things you can do to check your site's consistency.
You can use a program like Adobe BrowserLab (there's a free trial right now) to automatically render your page in multiple browsers side by side
You can use the w3 Validator to make sure that your code is standards compliant. If your code isn't standards compliant, then you will likely have issues across browsers.
Note that you can force asp.net to generate XHTML Transitional- or Strict-compliant code (if that's the standard you choose to implement) via the web.config file. Use the directive
<xhtmlConformance mode="Transitional"/>
if you want to enable this behavior.
Was your code rendering fine in those browsers before you sent it off to the .NET guy? If so, the programmer is doing something to muck up your work. ASP .NET won't change the way your code renders... it's simply the Windows equivalent of PHP (simply put).
I would suggest (if you haven't already) testing your code before hand-off to verify proper rendering. Take some screenshots, and if after sending your code to this developer things break, you can point out that it was working until he started messing with your markup. If that ends up being the case, at least you know it wasn't you. If it was, then we have more work to do. :)
Can you provide any samples?
The html source is showing me two completely different pages as well.
That sounds like your asp.net guy is doing something wrong there. You can use asp.net to do browser-dependant rendering, but it sounds more like his job is to just make the site render what you gave him, and it's usually better to get your html and css right to begin with.
My site roofcommunityservices.org I am being told has some div shifting issues in IE6. We do not have IE6 here at the office, but I do use the Firefox render tool to view a screenshot si I get the general idea. I am on a Mac and can't see the same issues as my client.
Could someone take a look at the site in IE6 PC and tell me what they are seeing, particularly on the donation page?
Thanks much.
You can see all kinds of browser setups by using browsershots.org
There is some shifting on the donations page.
Also, transparent .png files are not supported in IE6.
I haven't tested it in IE6, I don't have that either. But Generally the first thing I do when trying to see why something isn't working is run it through a validator. Sadly, your page really doesn't work well on a validator, and it runs lots of complaints.
Stating "XHTML Strict" and then using non-strict html really isn't a very sensible idea.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Froofcommunityservices.org%2Fdonations.html
If you are lucky, fixing your 226 validation errors might help IE6.
People who disagree with me, try changing the closing tag of "title" to "titel" , and see the miracle occur where IE renders a completely white page but firefox doesn't mind.
As for getting Flash elements to validate, see here:
http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
http://www.alistapart.com/articles/flashsatay
This has also been useful in the past, but its a bit dated now:
http://jquery.lukelutman.com/plugins/flash/
Take a look here: http://www.stalebrew.com/2008/browsers/stand-alone-internet-explorer-6/
You can download a stand-alone version of Internet Explorer 6 for doing such testing.
Another option is to use http://browsershots.org to see screenshots of your website with various OS and browser options.
Everything was fine except for the banner you had at the top. When I checked in ff, all the sub-links were available. When I checked in IE6, none of them were shown.
It looks like your navigational menu is missing entirely in IE 6.
http://tinypic.com/r/35l7pc6/5
It might be prudent to have a virtual machine running XP with IE6 for testing your layouts. And, as other have mentioned, running your website through a validator (w3) and solving those validation errors can give you a good starting point with pinpointing some random display issues. Particularly if you have a lot of non-closed tags.
In addition to the solutions already mentioned, there's a javascript library called IE7 (nowdays also IE8), that claims to solve IE6 ja IE7 related CSS/PNG-problems. In my experience, it does solve some, but not all of them. It's very easy to use, you just need to include the javascript file.
http://code.google.com/p/ie7-js/
Here's some basic info about running windows on Intel Macs.
http://www.macwindows.com/winintelmac.html
Microsoft provides images of XP SP2 with IE6 and IE7 for free (for testing purposes). See http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-single-machine.aspx
There's a handy program called IEtester (only for windows i'm afraid, but remember the virtualisation/bootcamp) that helps you see your pages in IE5.5, 6, 7 and 8.
http://www.my-debugbar.com/wiki/IETester/HomePage
FORGET ABOUT IE6
we're already on IE8, people. it's like supporting IE4 when IE6 came out...