Jump to content
Stef's Coding Community
sushilbengani

Browser compatibility

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.

Share this post


Link to post
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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.
  • Share this post


    Link to post
    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;

    }

    Share this post


    Link to post
    Share on other sites

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

    Share this post


    Link to post
    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

    Share this post


    Link to post
    Share on other sites

    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.

    Share this post


    Link to post
    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.

    Share this post


    Link to post
    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.

    Share this post


    Link to post
    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.

    Share this post


    Link to post
    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; 
    
    }
    

    Share this post


    Link to post
    Share on other sites

    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?

    Share this post


    Link to post
    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;

    }

    Share this post


    Link to post
    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.

    Share this post


    Link to post
    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

    Share this post


    Link to post
    Share on other sites

    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.

    Share this post


    Link to post
    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

    Share this post


    Link to post
    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...