HTML & CSS
My website is http://plantspages.com
It is displaying properly in all browsers expect IE7 and below. What should I do..? I tried different options...
I validated the website at w3.org and home page is now without errors.
I included java script code for ie6 and 7 and also did some debugging the floats. There was some improvement but not fully corrected.
You're suffering from incompatible box models, for IE that is.
The CSS Forum is where you'll find experts at dealing with those issues.
To kick things off though, they have a sticky FAQ thread, that includes:
Why doesn't this work in ie5 / broken box model?
You can also go to http://www.positioniseverything.net/explorer.html for more about IE CSS rendering issues.
Your website looks fine with IE8. I barely think that more people are using older versions of IE, or Firefox right now, than the newest versions. Even though, try to create reset.css file for your website. A known perfect-working reset is the Eric Meier's reset. http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/.
Phyxas, I hate to dispute you, but there are some errors in your statement. There are many, many people using older versions of IE, particularly in some corporate settings (where IE6 still reigns supreme in many environments). Not everyone updates their Firefox, Opera, and other browsers, so you can't count on that, either. But the biggest issue is IE6 and 7, and the consensus seems to be that if you're appealing to a wide audience, you have to do something to work with those two browsers.
Secondly, there's a lot of controversy over using global resets. Until recently, I've been using a variant of Meyer's reset, and it's caused me more trouble than it's been helping. Gary has a good summation of why resets aren't always a good thing here. Certainly you can't just ram a big fat reset like Meyer, or YUI, uses into your pages and not have some unforeseen, and likely unwanted, ramifications. No reset, not even Meyer's, is "perfect" for every situation.
you have to do something to work with those two browsers.
Of course you have to, - building a website that is compatible with all browsers is possible, If you use the right techniques.
No reset, not even Meyer's, is "perfect" for every situation.
You can of course, change values. Meyer's his example reset helped me with almost everything, that has to do with fixing errors in the newest browser versions of Opera, Firefox, IE, and Safari.
But the biggest issue is IE6 and 7, and the consensus seems to be that if you're appealing to a wide audience, you have to do something to work with those two browsers.
Sure. Do you have any idea on how?
Don't bother supporting IE6. If everyone stops supporting it then the others will be forced to upgrade. They held a funeral for IE6 and even Google has stopped supporting IE6.
Thanks for all the suggestions..I am working on it.
I did some debugging using http://www.positioniseverything.net/explorer.html
I had several float problems before..that got rectified by using instructions from above site.
From another forum, I got some help. He helped me create a separate css styesheet for IE and now the search button is coming out nicely.
So now in ie7 and 8, it is alright, but in ie 6 the top menu and header is not rendering correctly.
I am attaching images of my progress..
And thanks for all the suggestions.
Hi, in the future use the CSS forum. I just happened to notice this thread becuase I just went here to search for other problems to solve . THe thread title got me.
The problem is that you are falling short to the double float margin bug. The cure is display:inline;
The menu positioning is because IE doesn't apply top margins to <ul>'s but others do. So as a result IE needs that top margin set.
Using a reset would have alerted you to this
Thanks Ryan, for your help..
I did what you suggested and my top menu and logo are coming out correctly..
Now some very very minor appearance issue that's all. Thanks once again
Glad to help :). You're welcome.