The following page looks good in Firefox, Safari, Chrome, IE6 and IE8... but it looks bad in IE7. I don't have IE7 but I need to fix this issue because someone seen it in IE7 and it looks bad. Does anyone has any idea why this page renders different in IE7?...and what is the solution to make it display correctly?
http://www.aetna.com/2009annualreport/mainBoard.html
Problem:
When you click on the "Board of Directors" or "Management Team" link and the listing table panel opens up, the far right third of the panel is getting cut off. Also some information appears to be missing in the cells.
Thanks,
Attila
Yes.. use a css-reset
But also... use the validator.
http://validator.w3.org/
I used the validator and found this:
Polo Ralph Lauren Corporation</p></li>
Notice the misplaced li ?
Also add this to #boardPanel
{ width: 990px; }
This problem disappears when I remove overflow: hidden; from the .boardSlider class.
Look like another hasLayout bug.
All browsers render web pages differently. There is no one solution that will always make everything look exactly the same across all browsers. The best option is to start with a browser such as firefox or safari when you are testing and then tweak your css for internet explorer as you go along. One common technique is to use a CSS reset to try to abstract differences between browsers.
If you don't have IE7 on your machine you can test in it using http://spoon.net/browsers to see what your page will look like or see this question for more suggestions.
Check out Adobe Browser Lab. Very cool and very efficient and the best part is it's free (not anymore thanks for the headsup). It not only has various browser options but also OS options.
HTH
Just a thought - why not use DIVS and floats - you should never really use tables for layout purposes (particularly as it's 2010). Especially dynamically changing layouts. Tables are cross-browser hell, particularly when expanding / contracting using JavaScript and, from a purist's point of view, you are not displaying tabular data, so why use a table?
Related
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.
While creating a site I've noticed that IE places things slightly differently from Chrome or Firefox.
I mean I have one thing below another and in Firefox and chrome there is a 15px space between them. But in Ie its more like 25px. I keep reading about designing for all browsers. But how do I do that because If I make it look right in one browser it will always be different in another.
Do I move it to suit IE? Because then it will look wrong in Chrome.
You can keep tweaking your code untill it looks good for all browsers
Another option would be to have a seperate style sheet for IE. this would allow you to design for IE as well but you would need to keep in mind that you have 2 style sheets and would need to work on both when you make changes to your site
First of all welcome to web development!
What you can do is load a "Conditional stylesheet" which will only load in IE,
Chris Coyier from CSS-Tricks does a great job of explaining this so take a look here
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
That should help you out, but it is a tricky task getting everything cross browser compliant but not impossible, just keep at it and you'll get there.
Good luck man!
Try using a css reset first in your style sheet. The reset will customize all the attributes which you can define as per your needs. The main purpose of the css reset is acheiving complete control of all the attributes and defining a generic behaviour for the browsers. Tweaks will help, but in long run, a balanced solution has to be implemented for major things to work out well.
Below are some popular CSS Resets that you can use.
Eric Mayer Reset
Yahoo Reset
Hope this helps.
I may not have enough information to generate a complete question here but I am going to give it a shot if anyone has ideas or needs more info ask in comments and i will try to get as much information as I can.
I am dealing with an issue in some code that I did not write. The page uses a javascript date picker and puts that date into an input box. Tracing through the code and hitting f12 I changed the property from
style="color:transparent"
to
style="color:black"
and i am able to see the date that is entered into the input field.
The transparent text only occurs in IE9 though, and show correctly in IE7 and IE8.
So I have a solution to the problem but my question is if anyone has run across this issue before what is causing this. If the differences between IE version are to blame is there a way with a stylesheet to make it work correctly across all versions, because changing the source code is dangerous at best I am trying to find a way to make changes to this wihout changing the page.
Thank You for any comments or suggestions.
The cause is that IE7 and IE8 apparently don't support color: transparent and IE9 does. As far as I can tell, IE9 is the one that is acting correctly and IE7 and IE8 are wrong, not the other way around.
To me the "best" fix is to change the source. I'm not really sure how you want to fix anything "without changing the page", you have to change something.
If you really won't change the source of the datepicker you could use !important as a last resort.
<some selector>{
color: black !important;
}
This is the first time I will be implementing for IE9 and since I've installed Windows 7 which came with IE9, every site I have checked that we've built has some issues in IE9.
What I'd like to know is:
Is there a way to absolutely use minimal CSS to sort out all three browsers or will there always be the need for conditional css for the different IE versions?
Is there a specific doctype I should be using that will sort a lot of this out?
Many thanks,
James
It depends on your needs and requirements. My personal website has exactly one style sheet that works across all major webbrowsers. But my personal website is very simple.
Nope. But please, do pick and include a doctype. This article explains how it will effect rendering in IE.
1) 8 and 9 are pretty similar, 7 has a few things missing. Yes, you will always have to take into account all 3. This may be by removing any problems with the browser BEFORE you style with a CSS reset, although this doesn't solve everything, or use conditionals.
2) Not really, the browser will automatically select one if one is not defined. Either way, it won't change how the page renders.
The best way to minimise the problems is to use an initial CSS Reset file to bring as many of the differences back into line as possible.
Also, consider using a well established CSS framework such as 960 Grid or Blueprint. This will at least mean you are adopting a well used / contributed to framework which will minimise the cross browser inconsistencies that you are unaware of.
The CSS reset idea is a good one if you are just starting out but will hide differences between browsers that may confuse you later.
The best doctype to use now is <!DOCTYPE html> which puts all browsers into standards mode.
A design is a very important part of a web site. But making a layout cross browser compatible is very tough task.
What is the easiest way for this?
You may want to read about browser inconsistencies if you have a reason to be concerned. Other than that, I would not assume you have a problem unless you observe your pages being rendered differently across browsers. You should follow ANeves' advice and design in a browser other than IE and then test your pages as you develop.
You can use the tools located here in an article entitled "Cross-Browser Testing: A Detailed Review Of Tools And Services" to test that your pages in fact function correctly in different browsers.
The way I do it is by writing it and testing in Firefox, and each change I make I run it in IE. A lot of the times it will be different, but if you keep the changes small and isolate them then each one should be work-aroundable.
After it is completed, I check it in Safari and Chrome, and 99% of the time it's fine.
Also try to avoid tables if you can, learn to use CSS properly and it will save you a lot of time in the future.
I actually think it´s not that big of a problem. A very good starting point: CSS Mastery
Don't recrate the wheel. Try finding a website example that works in all browsers and check out it's code. It might help you out a lot.
For instance, if you want to develop just a layout (header, footer, sidebars, content, containers, menus and things like this)...I sincerely suggest you try different options available online.
For example:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://layouts.ironmyers.com/
You can find a lot of help for this online. That's only for a LAYOUT. I'm not sure about Visual Effects, I have to fight with each design every time I create a new one.
What works for me is to re-use the things that have worked for me in the past.