Browser compatibility

[sushilbengani]

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.

[virtual]

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/

[sushilbengani]

Thanks buddy. I will look for that

[sushilbengani]

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.

[sushilbengani]

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

[falkencreative]

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.

[sushilbengani]

the css code is herehttp:// http://www.little-hearts.co.in/new/homestyle.css

[virtual]

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;

}

[sushilbengani]

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...

[virtual]

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

[sushilbengani]

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.

[falkencreative]

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.

[sushilbengani]

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.

[virtual]

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.

[virtual]

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; 

}

[sushilbengani]

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?

[virtual]

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;

}

[sushilbengani]

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.

[virtual]

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

[sushilbengani]

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.

[virtual]

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