I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
Related
It has been brought to my attention that a website I'm helping out with sometimes has problems with span elements being injected. Those spans will break the whitespaces and make the text hard to read. Those spans look something like this:
<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>
The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.
Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.
I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.
So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.
Any ideas how to nail this down and find out what causes it?
Browser plug-ins are usually given permission to modify page source at run time. I would guess the culprit is a cross-browser extension like Night Eye or Dark Reader.
In general, adding a <span> shouldn't mess with your layout unless your CSS is changing span properties away from the browser defaults.
Option 1
You might be able to fix the issue by adding CSS to control how the layout looks:
span[data-contrast="auto"] {...}
That will select all spans that have that data attribute. Then add styling to counteract the layout issues you see. That said, since the extension is adding the code after the page renders, it may override whatever you do.
Option 2
A better solution would be to create your own dark mode. Most plugins/OS night modes won't mess with your code if you provide your own theme options. A "dark" theme is the 2020 version of being mobile responsive; you should provide it in your code or live with the consequences when users, browser makers, and operating systems make their own decisions.
If you need help creating an alternate theme, CSS Tricks has a good write up.
Since it's not clear what software they are copying from, I've personally experienced this when copying from a Word Doc that's been opened in Microsoft Teams or in SharePoint, and then pasting directly into a website's editor (our site uses the TinyMCE text editor, a commonly utilized free text editor).
My recommendation: copy directly from the desktop version of Word, then paste into the editor and that prevents the "data-contrast" spans.
I assume there must be some hidden spans in non-desktop versions of Word Docs that they add to ensure the document displays the same way as the desktop version. The text editor doesn't know what to do with it, so it strips out everything, but the "data-contrast" portion.
Hope this helps someone out there as the original post was as asked some time ago.
For a big site renovation project I am looking for a way to find all elements in a website to which a certain css rule applies. This site has been extended for 6+ years, so CSS rules are not systematic/logical at all.
For example: I want to know on which pages form input[type='text']{} is mentioned on the entire site.
I cannot do this with a simple 'find text' search, because there are a LOT of CSS rules that are specifically set to a certain element (e.g. #login form input{} or form textarea.forminput_small{}), so there probably is quite some overlap. Furthermore there are a LOT of pages, so I really don't want to do this manually.
My desired output would be:
input[type='text']{} is on: /index.html, /search.html, /contact/form.php etc
For me a solution like a browser plugin, external website tool or PHP script would be fine.
Hope someone has a nice solution for this problem!
Edit 9 August 2018: digging up an old thread. However, still not found a good solution, but I did find the element-finder plugin for Atom. Unfortunately, it doesn't work anymore. The GIF image in the description shows what the purpose of this plugin (i.e. my question) is. Any ideas for an alternative?
I am in a collaborative work of generating a website for disabled people, mostly will run on limited number of educational centers-offices that will donate tablets and old-notebooks to attendants. I am telling you this because i want to give you an idea about the possible users and different OS and browsers.
I want to generate CSS code that will be compatible with all possible browsers; older and newer browsers..
I am writing from scratch and i build it by visiting http://browsershots.org/ each time to see if there is any compatibility issues, but it takes time. Also i use http://jigsaw.w3.org/css-validator/ but again too many manual work..
What i would like know is: do you happen to know any tool that you feed your CSS file that is compatible with, say IE at the beginning, and hands you the extended version of the CSS file that covers many of the compatibility issues?
Any help is greatly appreciated..
In simple words there is no easy way to generate one CSS for all browsers.
For details, It highly depends a lot of over how extensively are you using the CSS, what version of CSS is that etc plus there are many places where different browser renders same CSS property in different ways, so its not really simple enough for all the situations.
But, for a little help, with the time passing there are different tools and scripts that can make your task of achieving CSS compatibility for all browser easier, I would recommend you go through the following tools they can be useful to you while trying to maintain your CSS.
15+ techniques and tools for cross browser CSS coding
Some CSS-preprocessor/helpers to help you in maintaining your CSS throughout:
Less: The dynamic stylesheet language.
Sass makes CSS fun again.
Compass is an open-source CSS Authoring Framework.
I'm not sure such a tool exists. That said, there are some advices to write cross-browser CSS:
Use a reset stylesheet (e.g. http://meyerweb.com/eric/tools/css/reset/);
Use IE conditionnal comments such as <!--[if IE]><![endif]-->;
Practice a continuous coding: open few browsers (e.g. IE, FF, Chrome) and check the run-of-river display they provide;
Use IETester to check IE5.5+ rendering, depending of the IE versions you want to cover;
Use absolute positions and specify widths and heights (especially when using floating elements) whenever you can;
If you want to try CSS3, use PIE;
Try to write pure, simple CSS, avoid exotic layouts.
Netbeans IDE has a feature which helps you to construct CSS from simple tick boxes and drop downs. I haven't confirmed the validity against W3 yet though, but the code generated looks good.
Also a useful resource to check use is http://www.w3schools.com/cssref/default.asp. It does take time to reference the properties you wish to use, but it is always worth confirming their compatibly if your going to experiment with layouts, and a must if using CSS3.
W3 Schools gives a clear indication of which browser supports a stated property. See example image below which is shows the compatibility for box-pack.
Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozilla based browsers.
My questions to you are:
What are the important rules you use before hand, when developing across multiple browsers to save you time?
How do you prevent yourself from writing incompatible tags?
What is the best way to avoid hacking your code?
Where do you find research on browser compatibility, do you use any tools?
Finally, when do you cross the line/where do you draw it?
I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.
Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.
Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.
LitmusApp
There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.
I would say to start with standards-compliant code. Always test in a standards-compliant browser first like Firefox, or Safari/Chrome. I prefer Firefox for the addons (such as Firebug, HTTPFox and the Web Development Bar). Then work your way DOWN (and by down, I mean all versions of Internet Explorer).
Try to stay away from temporary fixes per situation or site and generalize your code as much as possible. For example, as Justin Neesner said in his answer, using conditional comments and a general style sheet for IE6 , 7, and 8 will knock out most of your problems with layout and formatting, without using (too many) hacks. You can reuse the IE stylesheets, and just place the site-specific code in it.
Use a testing platform like browsershots, netrenderder or LitmusApp so you can see what your site is doing in as many versions of browsers out there. Studying browser compatibility deeply will make you pull your hair out, but any great resource like quirksmode.org can give you information on the little gnats of incompatibility, so you don't go crazy, and bald.
As far as when do I cross/draw the line, it's 99% Internet Explorer issues, and if it's close enough to looking like FF or Chrome/Safari, I'm done. Almost like art, it's not when you're finished adding, it's when you're done removing the crap you don't want to see; that's when you know it's done.
I say there is not that much you can do except sticking to the basics:
Code standards compliant HTML
Validate early, validate often
For Javascript, use a framework like JQuery, Prototype or Dojo
Pick one "main browser" you optimize for first.
in every project, there will be a number of issues, but if you stick to these points, not too many.
I find it extremely helpful to build 100% W3C valid code. Not because it matters - much of what the W3C validator complains about will not make any difference in real world browsers - but because being able to run a validation, and getting a green light and knowing that all is well on that end is very helpful.
To test multiple IE instances at once, you can use IETester. It's not perfect - conditional comments won't work in it for example - , but mostly usable in everyday development work.
use a doctype like html 4.1 transititional which makes ie6 render in standardsmode. You can also use a reset stylesheet.
Use strictly compliant HTML and CSS markup and do not use browser proprietary extensions to CSS.
IE 6 does not implement CSS correctly beginning with its absolute ignorance of the box model.
IE 8 on the other hand has a test suite to prove they implement every aspect of CSS 2.1 correctly (which no other browser does).
Develop for Firefox as stated above and make a decision about supporting IE 6 & 7 or not. Frankly, I no longer develop separate style sheets for those browsers. They don't have enough market share (at least on my site.)
Given the interest in HTML 5 and the lack of interest in XHTML 2, develop HTML 4.01 Strict and follow these practices: (which are recommended in HTML 4, and required in HTML 5 and XHTML 1.1)
all elements and attribute names must appear in lower case,
all attribute values must be quoted,
non-Empty Elements require a closing tag,
no attribute minimization is allowed,
In Strict mode, all inline elements must be contained in a block element.
Why to learn HTML 4.01 Strict with references.
Also see the CSS 2.1 Test Suite
So I have been running around for a while now, 26 days later I think I am ready to give some feedback to my findings.
Coding:
First of all, I found that column systems seem to cut down the amount of HTML and CSS written. They are also very cross-browser friendly. Although there are many of them, I found that the 960 Grid System works the best for me: http://960.gs
Next up I found that Ruby has a cool extension for CSS called, LESS. This has been ported over to .NET and can be found at: http://www.dotlesscss.com. It is easy to setup, and is very powerful when used right.
Javascript, can be tricky but I found out that avoiding certain selectors and shortcuts in languages like JQuery will not only speed up the performance of your application, but exhibit less awkward behavior.
Testing the browsers:
Here comes the interesting part. Without any software I found that testing my applications against Internet Explorer 6 and Safari at the same actually helped increase the speed of my development. Firebug and Firefox actually cause me to develop around the problems and this is what causes a lot of extra code. When developing simple code against IE6 and Safari I found that going back to Firefox and IE8 is incredibly easier. Most problems I have had were with border widths, which were easy fixes.
The best software solution I found that was accessible to me was Expression Web with Superpreview, if you ever wonder why Microsoft releases a bunch of version of IE, its probably so they can sell you tools like these.
Anyway, that's my 2 cents for right now.
Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it all. What I do know is, when it comes to designing (not back end dirty work) I understand basic CSS properties and I also understand HTML and I can usually throw together a sloppy web page with the two and a couple bazillion DIV tags.
Anyways..
The problem I always have encountered is that when I design a website in a browser such as IE7 (and then it looks perfect on IE7), and then look at it on IE8 or IE6 or Mozilla (etc.) it gets all spacey and ugly and looks totally different than the way it should look on IE7.
Question one:
Basically, what I am asking everyone is what route should I take to learn how to properly build the website? Build as in put it togehter with CSS standards and HTML standards that will make my site look the same on every brwoser. (Not only learning standards but where can I learn to properly write my code?) Where is a strong free resource I can use to learn how to these things?
Question two:
How do I properly code my website? Do I use all external style sheets to make dynamic page design simplistic or do I hard code some things into the DIV tags on each page? What is proper?
Oh, and if anyone has any tutorials on how to properly design a complete layout feel free to throw it in a response somewhere.
Thank you for taking the time to read my questions, and hopefully you will understand what I am trying to get out to everyone. I need to get on the right route of the designing side of web programming so that I will know how to create successful websites in the future.
Thank you,
Sam Pardee
First, I recommend NOT starting with IE as your "development" browser. Start in Firefox, say (which gives you the advantage of tools such as Firebug and the web developer toolbar), and then get it right in IE afterwards.
Second, definitely user external style sheets; it results in much cleaner code and a much simpler way to make style updates. Definitely recommended. Also external CSS files can be cached by the browser, so they won't increase the page download size as users go from page to page in your site or application.
Lastly, start by defining your content using simple HTML, basing the structure on the meaning of the content (often called "semantic" HTML), not on how you want it to look. Use a <ul> tag for something that is a list of items, for example, even if you don't want to display it as a "bullet list" (the default styling for <ul>). Then start adding styles to make it look right. This will result in very clean HTML that can support a variety of formats and layouts (take a look at CSS Zen Garden to see what I mean) and will also help push you towards a layout that reflects the structure of your content, which will be easier to read and comprehend.
In terms of books, you can't go wrong with Eric Meyer. HTML is easy, of course, and I don't recommend doing fancy stuff with HTML, so put your learning effort into CSS (Eric is the CSS guru).
Cross-browser compatibility is always an issue. It's a staple of web development, sadly, and there is no magic bullet. Luckily, the main offender, IE6, is finally starting to fade.
A1.
When starting work on a new site, first take every piece of content that needs to be on the page and paste it into a text file. Then put it in a rational order (thinking "If I had to use a text browser to use this page, how would I want it to be arranged...").
Then start wrapping HTML tags around each piece of content. For each piece, think "What type of information is this?" A heading? h1/h2/etc tags. A paragraph? A quote? A table? p,quote,table. Essentially, use HTML tags that describe what kind of information each piece of content is. When I do this, I pay no attention to how it actually looks in the browser at this point.
Once the content is all marked up, begin writing the CSS. If at all possible, try not to touch the markup during this step. Sometimes that isn't possible, though, and throwing a div or span around some elements is unavoidable. The less meaningless markup, the better.
In my experience, this approach keeps things very clean and tidy, and makes debugging layout issues a lot easier.
A2.
Building the styles into your markup using the "style" attribute is fine for prototyping, but beware, the temptation to leave them there once it works is strong. The best practice is to have all of your styles in external stylesheets. I'm interested to hear any alternative viewpoints.
Some great web standards/CSS resources:
http://www.csszengarden.com/
http://www.alistapart.com/
http://www.thenoodleincident.com/
http://www.quirksmode.org/css/contents.html (useful reference for selector-compatibility)
http://centricle.com/ref/css/filters/ (good reference for css hack compatibility)
http://www.zeldman.com/
http://meyerweb.com/
Hope this helps!
There are TOO many site out there that have really great tutorials for HTML and CSS. They will give you all of the information you are asking for. I would start doing some reading of the great gurus of HTML/CSS:
Simon Collison
Andy Budd
Molly Holschzag
Dan Cederholm
Jason Santa Maria
Eric Meyer
Jeffrey Zeldman
Cameron Moll
Any book or article you can fond from these folks will steer you in the right direction; you can't go wrong!
As for sites that will give you the proper methods/concepts/training for web standards compliant sites:
http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css-tricks.com/
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/
The one of the best books I've bought so far to help with HTML and CSS coding PROPERLY is Beginning CSS Web Development by Simon Collison. Great, easy to understand, and not too slow. Great examples to follow along. After that, buy CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll. This book gets you up to speed with some advanced techniques that you'll see on the many of the web sites right now, some of which were invented by the authors.