Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Mar 2003
    Location
    Byckeye, AZ
    Posts
    804

    HTML and CSS - looks wrong in different browsers

    I've been working on some code for a website and had it looking about how it should on Internet Explorer. When I uploaded the files, everything looked good till I tried it in Firefox and Chrome. Is there a trick to getting all the browsers to read the CSS and HTML the same way?

  2. #2
    Join Date
    Dec 2003
    Location
    3dbuzzmania
    Posts
    4,064
    Yes you can embed "if statements" that check whether a user is on IE5 for example, then change certain tag definition according to that.


    For example:
    Code:
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    #sidebar1 { width: 220px; }
    </style>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    #sidebar1 { padding-top: 30px; }
    #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    You embed this code in between your [head] and [/head]

  3. #3
    Join Date
    Nov 2003
    Location
    San Francisco, Ca
    Posts
    2,691

  4. #4
    Join Date
    Jun 2006
    Posts
    121
    welcome to the wonderful world of browser inconsistencies :P

  5. #5
    Join Date
    Mar 2003
    Location
    Denmark
    Posts
    2,882
    I would reccomend actually developing on Firefox and then after it looks right there start dealign with the way Internet Explorer displays stuff.
    In my experience firefox is much better for dev, and then you can fix any problems that IE has with (hopefully) standards compliant css you create
    Swoop - Buzzed Pirate!
    " If nobodys talking to me, im talking to me" - Swoop

    Reflection Design || Swoops Blog

    2D Tutorials Compilation

    The Speed Painting Thread || ((post your Concept Art thread))


  6. #6
    Join Date
    Mar 2006
    Location
    South Australia
    Posts
    4,521
    Having access to the web developer toolbar is reason enough to do all your developing with Firefox as far as I'm concerned

  7. #7
    Join Date
    Mar 2004
    Posts
    0
    Quote Originally Posted by mr_charisma View Post
    Having access to the web developer toolbar is reason enough to do all your developing with Firefox as far as I'm concerned
    +1

    As far as the OP: I've done many, many, many websites before and never have had to use a conditional stylehseet. Note that I specifically do not target IE6.

    You can code it so that it shows consistently, but there are many quirks you need to be aware of. A great resource for this is:

    http://quirksmode.com

    Note that you must always use a DOCTYPE. IE will *not* render things correctly without one. Other then that, using sane styles should work fine for you.

    If you post your stylsheet and markup here, I can give you pointers on how to make it render better.

  8. #8
    Join Date
    Mar 2003
    Location
    Brisbane Australia
    Posts
    1,429
    I agree with swoop. Do your developing in Firefox.

  9. #9
    Join Date
    May 2004
    Location
    UK
    Posts
    709
    Nelson is right, you don't really need to have conditional styles (styles specific depending on any particular browser) if you know what to watch out for...

    Firstly, I would recommend using a strict doctype:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    usually IE6 causes most headaches and here's a few things to keep in mind for IE:
    - Blank elements (a <div> for example) often take up physical space on the page even though they don't contain any content or have any styles telling them their height. IE(6) reserves enough space for 1 character of text. If you have a blank element on your page that you need for whatever reason, you have to set the font-size to 0 for it not to take up physical space.

    - rendering issues. Often you'll find that there's cases where things display strangely and intermittently, and sometimes when you scroll downward and back up, glitches on the page reveal themselves... scroll down and back up again and they might be worse, or they might be back to normal. You'll almost certainly notice this issue if you have, say, a div element which has a dotted border style on it (border: 1px dotted #000000, try scrolling and see the dots merge into eachother when you scroll up. Zoom: 100%; is a style you can use to solve these types of issues. The firefox error console moans that 'zoom' is not a valid style... well hey!

    - When using padding, most browsers add space INSIDE the element, but IE will often add space on the OUTSIDE. This causes many issues and the solution is to have ensure that whatever you're applying padding to, is not the outermost container. By having a container, the element you are applying padding to is forced to have the padding on the inside and all is well.

    - Margin and Padding... Use margin to apply physical spacing around elements. For example, if you want your left navigation of your site to have 20 pixels space between IT and the edge of your site, you could say: margin-left: 20px; Only use padding to pad out some text.

    - Floats. If you're using CSS for your site, no doubt you'll come across floats. Floats are great, and in almost ALL cases, it's ideal to declare the floated element as being an INLINE element... this means you should say 'display: inline; float left;' for example. Displaying INLINE on a floated element solves any problems you get in IE where adding margin actually adds two or three EXTRA pixels of margin.

    - Clearing floats : Firefox is the culprit here, but sometimes when you float an element and fill it with content, you might wonder why your background image isn't displaying the full height of the content... Firefox sometimes gets confused and doesn't know the full height of the content (which could be different any time you add text or whatever). You basically need to clear your floats before closing the container with the backround. To do this, i always declare a class specifically for clearing floated elements by having in my stylesheet, the following:

    .clearer{
    clear: both;
    margin: 0;
    padding: 0;
    font-size: 0;
    }

    I usually use a div to clear floats by saying <div class="clearer"></div>. If ever you are having issues, if you put a border around the element which SHOULD be displaying a background, you'll see the inner elements which are floated, actually spill out of the boundaries of the container (shown by the border)


    Errrm, well that's all that springs to mind, and hopefully helps you out - i'm sure you'll come across some of these things and i hope it saves you some of the headaches that i've had to deal with in the past

    Cheers

    Mat

  10. #10
    Join Date
    Mar 2004
    Posts
    14
    As the others have basically said.. Internet Explorer is absolutely NOT the one you want to be starting coding for.. work with any of the other browsers first as IE has many many errors in its handling of css in various versions. Your best resource for learning about the quirks in IE6/7/8 and how to fix them would be Jeffery Zeldman's book 'Designing With Web Standards' its in the 3rd edition now.
    I was going to link a website on browser bugs too but can't seem to find it..

    Basically do IE last as thats the one you have to add custom code for. The others (Chrome, Firefox, Safari etc) should work similarly its only IE that has stupid numbers of bugs. I'm hoping people start getting rid of IE6 so we don't have to code for it any more!

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •