TWSupport-Smooth,Clean Support


    CSS - Different Result in IE & FF

    Share
    avatar
    ankillien
    New User

    Age : 29
    Number of posts : 12
    Registration date : 2009-06-01

    CSS - Different Result in IE & FF

    Post by ankillien on Fri Jun 05, 2009 11:35 pm

    Hi All!

    While creating HTML pages, the biggest (and the only) problem I face is with CSS. It show a bit different positions in IE and other browsers like FF and Opera.

    I just wonder if there is a easy and handy fix for this. Or do we have to write different codes for both i.e. conditional CSS?

    Thank You Smile
    avatar
    Jalokim
    Designer
    Designer

    Age : 29
    Number of posts : 184
    Registration date : 2008-08-06
    Computer Specs : HP Pavilion || Vista Home Premium SP1
    Additional Specs : Athlon 64 X2 1,9Ghz ,GF 8400 GT, 2 MB, 250GB

    Re: CSS - Different Result in IE & FF

    Post by Jalokim on Sat Jun 06, 2009 12:04 am

    that is the problem of all designers.
    IE fixes ...

    IE is an idiotic browser that doesn't understand CSS.
    In order to make your page cross browser compatible you need to make a new CSS for IE... and use a <-if IE> code that will overwrite the default CSS.

    blame microsoft for their shit browser, and just when we thought we got the hang of IE5 and 6 fixes ... they make IE 8 that is a big piece of sh*t and is totally incompatible


    _________________
    avatar
    Placehold
    TWS Manager
    TWS Manager

    Age : 33
    Number of posts : 730
    Registration date : 2008-04-15
    Computer Specs : Windows Vista home premium :: Intel(R) Core(TM) Duo CPU
    Additional Specs : T7250 @ 2.00GHz :: 4.00 GD RAM :: NVIDIA GeForce 8400M GT

    Re: CSS - Different Result in IE & FF

    Post by Placehold on Sat Jun 06, 2009 12:09 am

    Hey,

    Unfortunately this is something that designers world wide suffer with on a regular basis, including here at TWS.

    IE displays the CSS in a standard format without regards to directional commands where as Firefox etc show the code exactly how it is requested.

    To get around this you can add smart tags that are designed to work in versions of IE such as the following examples

    For IE6:

    _background-color: url ('');




    For IE7:

    *background-color: url ('');



    Usually

    #wrapper {

    For IE7:

    html>body #wrapper {




    Personally adding these smart tags to all elements is a bit of a pain so i opt for the second CSS, You can also specify this second CSS or even a third to target certain browser versions

    For All IE Versions:

    Simply add the following to the head of your html code

    <!--[if IE]><link href="http://second.css" rel="stylesheet" type="text/css"><![endif]-->



    Targeting IE versions:

    <!--[if IE 5><link href="http://third.css" rel="stylesheet" type="text/css"><![endif]-->

    Or

    <!--[if IE 6]><link href="http://fourth.css" rel="stylesheet" type="text/css"><![endif]-->



    You can then use a sandbox such as xenocode to pull up different versions of browsers so you can adjust each CSS so that the page displays exactly how you want it to Smile

    Hopefully this will help you out Smile


    Regards








    Craig


    _________________
    avatar
    ankillien
    New User

    Age : 29
    Number of posts : 12
    Registration date : 2009-06-01

    Re: CSS - Different Result in IE & FF

    Post by ankillien on Sat Jun 06, 2009 7:09 am

    Thank for replies, Jalokim & Placehold Smile
    Nice to know I am not the only victim of IE Razz

    So, If I use <!--[if IE]> code, would it ignore my default CSS?
    Ned I use different codes for different browsers like IE5, IE6 etc. or only <!--[if IE> would work?
    avatar
    Placehold
    TWS Manager
    TWS Manager

    Age : 33
    Number of posts : 730
    Registration date : 2008-04-15
    Computer Specs : Windows Vista home premium :: Intel(R) Core(TM) Duo CPU
    Additional Specs : T7250 @ 2.00GHz :: 4.00 GD RAM :: NVIDIA GeForce 8400M GT

    Re: CSS - Different Result in IE & FF

    Post by Placehold on Sat Jun 06, 2009 11:20 am

    Not a problem at all Smile

    Well the < !--[if IE]> code detects what browser your using and then if it detects your using IE it replaces the normal CSS with the one designed to correct the issues and display for IE.

    < !--[if IE]> should fix the majority of the issues, There isn't many sites the display in all browsers as it should so i would advise not to worry too much about IE5 or IE6 Smile

    Another way to test how your forum is displaying correctly on other browsers is to visit BrowserShots, Select the browsers you want to test the forum/website in tha press 'Submit' within minutes you will have a huge list of screen shots to show how it looks in each O/S and Browser Smile

    Regards







    Craig


    _________________
    avatar
    Jalokim
    Designer
    Designer

    Age : 29
    Number of posts : 184
    Registration date : 2008-08-06
    Computer Specs : HP Pavilion || Vista Home Premium SP1
    Additional Specs : Athlon 64 X2 1,9Ghz ,GF 8400 GT, 2 MB, 250GB

    Re: CSS - Different Result in IE & FF

    Post by Jalokim on Sat Jun 06, 2009 12:15 pm

    the if IE replaces specific codes, so you don't need to copy your entire css and make it IE compatible... if lets say the header is being a nuisance than all you add to your second css is the header classes.

    I used to add IE fixes to the main CSS, and I have to when making hitskin themes, but my premium themes and testjal's has 3 CSS's that give it cross browser compatibility ... or at least its as close as possible to the desired effect.

    I learnt that its worth coding a IE fix rather then going for a compromise that automatically makes your theme/style/page look worse.


    _________________
    avatar
    Placehold
    TWS Manager
    TWS Manager

    Age : 33
    Number of posts : 730
    Registration date : 2008-04-15
    Computer Specs : Windows Vista home premium :: Intel(R) Core(TM) Duo CPU
    Additional Specs : T7250 @ 2.00GHz :: 4.00 GD RAM :: NVIDIA GeForce 8400M GT

    Re: CSS - Different Result in IE & FF

    Post by Placehold on Sat Jun 06, 2009 12:43 pm

    Hey J,

    Have you finished cross browsing it then? Smile

    Coooool, I'm gonna have a look lol

    Regards







    Craig


    _________________
    avatar
    Jalokim
    Designer
    Designer

    Age : 29
    Number of posts : 184
    Registration date : 2008-08-06
    Computer Specs : HP Pavilion || Vista Home Premium SP1
    Additional Specs : Athlon 64 X2 1,9Ghz ,GF 8400 GT, 2 MB, 250GB

    Re: CSS - Different Result in IE & FF

    Post by Jalokim on Sat Jun 06, 2009 2:24 pm

    yeah testjal is IE , FF , opera and almost chrome proof. chrome has a small problem with the nav bar... but its done.
    I have 3 CSS's functioning


    _________________
    avatar
    ankillien
    New User

    Age : 29
    Number of posts : 12
    Registration date : 2009-06-01

    Re: CSS - Different Result in IE & FF

    Post by ankillien on Sat Jun 06, 2009 8:26 pm

    Thanks for the explanation Jalokim Very Happy

    So, the < !--[if IE]> fixes only for IE, then how do you fix bugs in other browsers like opera, chrome etc?
    avatar
    Placehold
    TWS Manager
    TWS Manager

    Age : 33
    Number of posts : 730
    Registration date : 2008-04-15
    Computer Specs : Windows Vista home premium :: Intel(R) Core(TM) Duo CPU
    Additional Specs : T7250 @ 2.00GHz :: 4.00 GD RAM :: NVIDIA GeForce 8400M GT

    Re: CSS - Different Result in IE & FF

    Post by Placehold on Sat Jun 06, 2009 8:53 pm

    Hey,

    Thankfully there are some tricks we can use for those browsers,
    If you have followed the steps so far then it wont be too bad to begin with however Safari and Chrome both use Webkit which is the processing kit that displays the codes for us via the browser.

    Such tweaks for chrome will also work in Safari

    Here's some examples:

    /*\*/
    html>body*.yourclass {padding:6px;font-size:13px;}
    /**/



    Additional classes can be added to the same section like so

    /*\*/
    html>body*.yourclass {padding:6px;font-size:13px;}
    html>body*.yourborderclass {border-width:10px;}
    html>body*.yourotherclass {padding:10px;}
    /**/




    Massive Grin

    Regards







    Craig


    _________________
    avatar
    Jalokim
    Designer
    Designer

    Age : 29
    Number of posts : 184
    Registration date : 2008-08-06
    Computer Specs : HP Pavilion || Vista Home Premium SP1
    Additional Specs : Athlon 64 X2 1,9Ghz ,GF 8400 GT, 2 MB, 250GB

    Re: CSS - Different Result in IE & FF

    Post by Jalokim on Sat Jun 06, 2009 9:23 pm

    Just to add on place's comment...
    usually things that appear on ff are identical on opera and safari.
    You don't have to worry about images, borders or any other elements of your theme.
    Problems start happening with position and placement.

    this is where IE dies.
    It doesn't understand positioning settings ... apart from absolute settings.
    but to set up your site all absolute you need a load of patience , and you need to have everything identically placed.

    One thing that is also a problem (but obviously microsoft think its an improvement) IE has this ... text rendering system thing... It makes your letters smoother and "easier" to read ... but this rendering makes the letters a tiny bit thicker... in the end it adds up to a big gap,... usually you gotta fix it with paddings.


    All in all its not easy being a designer.
    i wonder how the browsers will react to CSS3


    _________________
    avatar
    ankillien
    New User

    Age : 29
    Number of posts : 12
    Registration date : 2009-06-01

    Re: CSS - Different Result in IE & FF

    Post by ankillien on Sun Jun 07, 2009 7:39 pm

    Thanks for the help friends Very Happy
    I'll use this tricks in my designs and try them myself Razz
    Thank you.

    Sponsored content

    Re: CSS - Different Result in IE & FF

    Post by Sponsored content


      Current date/time is Wed Aug 22, 2018 12:10 am