www.webdeveloper.com
Results 1 to 3 of 3

Thread: Style issues between Firefox, IE6 and IE7

  1. #1
    Join Date
    May 2007
    Posts
    2

    Style issues between Firefox, IE6 and IE7

    I have been beating my head against the wall for the last week trying to get the alignment issues hashed out between Firefox and IE. I started working on this site using Firefox and everything was going great. That is until I looked at it under IE.

    Here is the link to the site. http://www.grdl.org/TEST/

    I want to keep the spacing between #top_menu, #header, #content_outer and #footer. When viewing the site under IE the majority of the spacing between the 4 sections disappears. Also the location of the text inside #header moves.

    I have been reading about the !important hack but either it is ignoring it or I'm not correcting the right lines in the CSS code. Here is a link to the current CSS code http://docs.google.com/Doc?id=ddth887t_0cddvjb

    I am a newbie to HTML/CSS/PHP and I am learning as I go. The Web Developer addon for Firefox has helped me decipher some of the CSS. Too bad there isn't something like that in IE.

    I'm hoping a fresh pair of eyes will be able to steer me in the right directions.

    -mcvickj
    Last edited by mcvickj; 05-31-2007 at 10:19 AM.

  2. #2
    Join Date
    May 2007
    Posts
    2
    I have found the code that I am trying to change so I can get the look to stay consistent between Firefox and IE.

    } <---LN 141
    #header {
    background-color : #FFFFFF;
    height : 58px;
    background-repeat : repeat-x;
    float : left;
    background-image : url(../images/header.jpg);
    margin-top : 10px !important;
    margin-top : 20px;
    margin-bottom : 10px !important;
    margin-bottom : 20px;
    border : 1px solid #000000;
    width: 100%;
    }



    } <---LN 193
    #content_outer {
    width : 100%;
    background-repeat : repeat-x;
    float : left;
    border : 1px solid #010101;
    background-color : #FFFFFF;
    color : #666666;
    background-image: url(../images/content_bg.gif);
    padding-bottom: 25px;
    margin-bottom: 10px !important;
    margin-bottom: 20px;
    }

    After reading up on the !important hack I am pretty certain I am using it correctly but IE6 and IE7 are still not displaying the site like I would expect. What is really strange is I used the same hack for the header to get the text aligned properly and it is working it IE6 but IE7 isn't working.

    } <---LN 626
    .maintitle {
    font-family : "Courier New", Courier, monospace;
    color : #0D1448;
    font-weight : bolder;
    float : left;
    padding-left : 20px !important;
    padding-left : 10px;
    font-size : 36px;
    padding-top: 19px !important;
    padding-top: 2px;

    }

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Very nice-looking document yo have there! You have taken much effort getting to look as close as it does between IE and Fx.

    Of the 21 cited 'warnings', all are dismissable except (see screenshot). These 3 or 4 items could contribute adversely to your layout either now, or at some future point.

    Mostly, the only thing I see is that the fonts change size very slightly between the two browsers. I typically deal with this by making all font-size and line-heights zero, and then re-stating them to a default state, something like this..

    body {font-size:0; line-height:0; font-size: 14px; line-height:1.0em; etc etc...}

    because every browser has a slightly different default size for everything, rendering to "zero" and then re-stating them helps to make things even out. Typically, removing all padding & margins helps too (that one needs to be first CSS line to be effective, else other paddings or margins are erased later on..)

    * {padding:0; margin:0;}
    body {font-size:0; line-height:0; font-size: 14px; line-height:1.0em; etc etc...}

    Myself, -not a fan of the !important hack (but understand when someone uses it).
    Attached Images Attached Images
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles