sushilbengani Posted September 5, 2009 Report Share Posted September 5, 2009 Hi, First of all I apologize if this query has been repeated in this forum. I tried to find the solution in this forum, but did not find to resolve my problem. I've converted a webpage into tableless page. In the process I faced issues like positioning, and some how came over it by the help of such kind of forums. Now I am stuck in browser compatibility issue. Opera, Crome, Safari etc. are showing different result than what IE (8.0) or Firefox showing. I've put the webpage at http://www.little-hearts.co.in/new/index_new.htm Another thing- If you run this webpage in IE 8.0(and above) in compatibility mode, it position goes haywire. How can I resolve this issue, Please sugguest. Let me tell you that this is my first attempt at CSS. Whatever I've learned thru net and books I've implemented here. So please be a bit more explicit in your comments Thanks. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 5, 2009 Report Share Posted September 5, 2009 For me your site looks fine on Mac in Firefox, Safari and Opera and on PC in Firefox, Safari, Chrome, Opera and IE8, and congratulations for your first attempt. Your problem is with IE6 and 7 and for that you need to add a special stylesheet to target these browsers only, because they do not behave the same way. You can research this at the following links which will help you to understand the problem. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/ Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 6, 2009 Author Report Share Posted September 6, 2009 Thanks buddy. I will look for that Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 6, 2009 Author Report Share Posted September 6, 2009 I did try to apply some methods, but all is going above my head now. I guess its issue in my code. Can somebody help me out with this. Please check the CSS code and tell me whether it is inlined with good practices? I am still getting errors in IE 6 and 7. Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 6, 2009 Author Report Share Posted September 6, 2009 (edited) I've updated my page. Link is http://www.little-hearts.co.in/new/home.htm It is not showing the top buttons inline in Crome, Flock. It is not compatible for IE 5.5 to IE 7.0 also. Can somebody have a look into the CSS and tell me whats wrong with the code? Thanks. Edited September 6, 2009 by sushilbengani Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 6, 2009 Report Share Posted September 6, 2009 It is not showing the top buttons inline in Crome, Flock. I'm not actually seeing any code in the page that would make the nav elements display inline. Either you need to set that on the elements, or you need to float all of the elements. Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 7, 2009 Author Report Share Posted September 7, 2009 the css code is herehttp:// http://www.little-hearts.co.in/new/homestyle.css Quote Link to comment Share on other sites More sharing options...
virtual Posted September 7, 2009 Report Share Posted September 7, 2009 You have put the display: inline on the ul tag it needs to be on the li tag. There is only one ul tag but there are several li tags consequently they are the ones that have to display in line. ul.tabs { position:absolute; margin-left:312px; margin-top:158px; list-style:none; } ul.tabs li{ display: inline; } Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 7, 2009 Author Report Share Posted September 7, 2009 hmm, it works. But still the top navigation is not adjusted according background. It shows different than latest IE and what about the login text fields, it is also showing vary results across different browser... Quote Link to comment Share on other sites More sharing options...
virtual Posted September 7, 2009 Report Share Posted September 7, 2009 (edited) I think you might need to lose the background around your top navigation buttons and just let them "float" on top of the background. You are always going to have a few pixels difference and you have not chosen a really easy design for your first venture into CSS. P.S Your last link is still showing the top nav buttons vertically Edited September 7, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 8, 2009 Author Report Share Posted September 8, 2009 Yes, Certainly the design is a bit complicated. But it could have happned later also. I can not remove drop shadow and background in buttons. It would open solutions for future websites and many more like me. I've to update the link with ur suggestions thanks for that. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 8, 2009 Report Share Posted September 8, 2009 Two thoughts: You may try using a CSS reset stylesheet to help eliminate differences between the different browsers default settings. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ http://developer.yahoo.com/yui/reset/ Alternately, if your main issue is IE, you can try using IE Conditional comments to provide targeted CSS to specific versions of IE. Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 8, 2009 Author Report Share Posted September 8, 2009 Virtual, I've updated the link. Now it is running proper in IE below 8.0 (not in IE5.5). Result in IE 8.0 and all other browser is gone for a toss. I dont understand how to fix this. This is really a puzzle, when you fix a part, other goes mismatch. Please can some body explain me in details, how it works and what mistakes I am doing in CSS coding...that it is not being supported across browsers. Thanks. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 9, 2009 Report Share Posted September 9, 2009 It is not really a puzzle it just takes some time to get things right in non standards browsers such as IE6 and IE7. When you build your website, test it always in Firefox which is a standards compliant browser, it should then look the same in Chrome, Safari, Opera and sometimes IE8. From there you need to do what Ben and I told you in a previous post, use specific IE stylesheets to target the areas that are giving you problems. You can research this at the following links which will help you to understand the problem.http://css-tricks.com/how-to-create-an- ? tylesheet/ http://css-tricks.com/ie-css-bugs-thatl ? very-time/ You have a lot of unnecessary mark up so I modified some of the html and commented out some of the css. It now works in all the standards compliant browsers. You can see the new index page and corresponding css http://em asai.com/littlehearts/index.html I have added the links to IE6 and 7 stylesheets in the head because and will take a look at them for you later. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 9, 2009 Report Share Posted September 9, 2009 I just added the IE6 and IE7 stylesheets to the same link and have also modified the css in homestyle.css and some things in your index file. I had to change your Submit button to Send as there was absolutely no way I could get it to work in the IE6 stylesheet. You should be OK now. For example this is a simple form HTML Name Email Phone No Your Comments CSS FORM ELEMENTS .box { margin: 5px 5px; border: 1px solid #C00; } form { width: 400px; margin: 20px 100px; } label { display: block; font-weight: bold; margin: 5px 5px; } input { padding: 1px; border: 1px solid #eee; font: normal 1em Verdana, sans-serif; color: #000; } textarea { width: 400px; padding: 1px; font: normal 1em Verdana, sans-serif; border: 1px solid #eee; height: 100px; display: block; color: #000; } input.button { margin: 0; font: bold 1em Arial, Sans-serif; border: 1px solid #C00; background: #FFF; padding: 2px 3px; } Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 10, 2009 Author Report Share Posted September 10, 2009 Oh Cool ! That gives me an insight... Thanks a lot. Its helpful. Bytheway I did not find ie6.css and ie7.css file at the link given by you... because if you test it on IE 6 and IE 7, the login form goes down... Well I'll try from my side also. BTW a silly question here - what is this!important and why you added it here? Quote Link to comment Share on other sites More sharing options...
virtual Posted September 11, 2009 Report Share Posted September 11, 2009 Silly me, as usual I forgot to upload the files. Everything is there now and I have removed the !important hack because there were too many problems with IE6 so I had to do a different stylesheet for it. The !important tag is not read by IE6 so it reads the condition immediately below it. The other browsers understand that the tag is important so they use it. For example .classname { float: left; margin: 200px !important; /*--The !important; hack tells IE6 to skip this line.--*/ margin: 220px; } Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 12, 2009 Author Report Share Posted September 12, 2009 Well that was out of the way help and I got to know more. Thanks a lot... As the topic has been touched, so many more questions comes in mind (Thats always a learning curve for me.. ) I got your ie6 and ie7 styles. What i did was i wrote entire code and changed what I wanted in IE6 and IE7 to happen. But looking at ur code tells me that everything is need not to be repeated except just the difference in code. right? Another small issue I see is button length of login form in IE6. It is fixed to 40px, and as u can figure out that button looks fine in other browser but not in IE6, it cuts the text. The reason i put "fieldwrapper" class in initial code was that I wanted the text fields to appear next to "Login" and "Password" text. I think that would have resolved the button positioning issue. Still if that is desired, code is extened to few more lines. But I got to learn the otherways and solutions can come out of this structure too... Please cooment for the resolution And once again thanks a lot. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 12, 2009 Report Share Posted September 12, 2009 Quite right, you only need to change the code that will fix the problem in IE only stylesheets, the browser will read the rest of the code from the main css file. Have you updated your index file, because I am still seeing errors in the top navigation and form and I don't see the links to the IE specific stylesheets? This is the link I'm looking at http://www.little-hearts.co.in/new/home.htm Quote Link to comment Share on other sites More sharing options...
sushilbengani Posted September 13, 2009 Author Report Share Posted September 13, 2009 Yeah, it wasn't updated. It is latest version now. From previous thread: Another small issue I see is button length of login form in IE6. It is fixed to 40px, and as u can figure out that button looks fine in other browser but not in IE6, it cuts the text. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 13, 2009 Report Share Posted September 13, 2009 (edited) That is why I changed the text from "Submit" to "Send" in the html file, because it was only way for me to fit it into the space in IE6 without it sending the other button to the next line. I mentioned this in a previous post. Edited September 13, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.