Domain Manage

IE vs Firefox display issues

Discussion in 'Website Design' started by admin, Oct 1, 2007.

Thread Status:
Not open for further replies.
  1. admin Spain

    admin Administrator Staff Member

    Joined:
    Jun 2004
    Posts:
    10,084
    Likes Received:
    115
    I have a pretty basic HTML template that uses Divs and CSS for its layout, it looks fine in IE but it is all over the place in Fire Fox.

    Anyone have any experience or tips on what Fire Fox interprets differently in the code?

    Thanks

    Admin
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
     
  3. tifosi United Kingdom

    tifosi Well-Known Member

    Joined:
    Oct 2004
    Posts:
    3,128
    Likes Received:
    45
    probably better to work the other way round. FF is more standards compliant. Always code for FF & hack for IE (esp 6).

    S
     
  4. philliph

    philliph Active Member

    Joined:
    Jun 2007
    Posts:
    112
    Likes Received:
    0
  5. denchomsky United Kingdom

    denchomsky Well-Known Member

    Joined:
    Dec 2005
    Posts:
    1,770
    Likes Received:
    30
    Wel there are alot of things that IE6 interprets differently and slightly less that IE7 does.

    Tifosi is right, best to work with FF then test in IE6+7 and iron out problems.

    Main concerns will be box model, spacing, margin's, padding, PNG's.

    Try always starting your CSS with a leveler, ie CSS that's sets all your margins, padding e.t.c to zero.

    I always start my CSS with this.


    Code:
    /*----------global settings----------*/
    
    body,div,br,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    	margin:0;
    	padding:0;
    	border-collapse:collapse;
    }
    table {
    	border-collapse:collapse;
    	border-spacing:0;
    }
    fieldset { 
    	border:0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
    	font-style:normal;
    	font-weight:normal;
    }
    ol,ul {
    	list-style:none;
    }
    caption,th {
    	text-align:left;
    }
    h1,h2,h3,h4,h5,h6 {
    	font-size:100%;
    	font-weight:normal;
    }
    q:before,q:after {
    	content:'';
    }
    abbr,acronym { border:0;
    }
    good luck.
     
  6. fermes

    fermes Active Member

    Joined:
    Jan 2007
    Posts:
    128
    Likes Received:
    0
    Im workin on a small site in dreamweaver and its fine in ff but spacing in IE 6 is Messed up. Any ideas?
     
  7. tifosi United Kingdom

    tifosi Well-Known Member

    Joined:
    Oct 2004
    Posts:
    3,128
    Likes Received:
    45
    It's likely to be box model issues.

    Start with a ccs default sheet like above (there's others out there as well which will clear a lot of issues)

    Add an ie specific css file using conditional comments ( <--[IE LTE 6]--> & <--[IE EQ 7]-->). Make sure it's after the others!

    Use as strict a DTD as possible.

    Use google and search for 'hacks IE CSS box model' or similar. Plenty of css sites out there.

    stop using wsywigs & hand code! (That's just me, not official!)
    S
     
  8. fermes

    fermes Active Member

    Joined:
    Jan 2007
    Posts:
    128
    Likes Received:
    0
    thanks for reply! Will check that out
     
Thread Status:
Not open for further replies.

Share This Page