Jump to content

Browser compatibility


sushilbengani

Recommended Posts

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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 by virtual
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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; 

}

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by virtual
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...