www.webdeveloper.com
Results 1 to 14 of 14

Thread: Spacing Problems in IE vs Firefox and Netscape

  1. #1
    Join Date
    Jun 2005
    Posts
    42

    Spacing Problems in IE vs Firefox and Netscape

    I can't find this question in the forum (I realize it may be there somewhere). I'm trying to convert an existing website to CSS, just started learning it, so please be kind. I ended up reinserting the tables in these two pages because I just can't get IE, Firefox, and Netscape to position the columns the same when I use CSS. What's frustrating is that these look perfect in all three browsers if I DON'T USE CSS and put the fonts in each cell.
    http://www.enablemobility.com/it_01020.html http://www.enablemobility.com/contactus.html

    These tables look OK in Firefox and Netscape, but IE appears to be adding a blank line, inside the borders, to all of the lines.

    Also, I also can't get all the browsers to position the header the same on this page:
    http://www.enablemobility.com/eq_adjustable_beds.html

    IE sticks the header way up at the top, the other two drop it down. I finally got it to stop slopping over into the text in Firefox and Netscape, but it doesn't really look good in any of them now.

    I spent two days coding styles in CSS and couldn't get them to work. In some cases IE doesn't seem to recognize the CSS styles, in other cases there are conflicts (such as "font-size: medium" gets the right size in IE, but it's way too small for Firefox and Netscape, and IE ignores "strong"). I'm ready to drop the whole thing, but I'd really like to switch to CSS before I add any more product pages. Any help would be appreciated.

  2. #2
    Join Date
    Dec 2005
    Location
    AZ
    Posts
    155
    If you are interested in coding correctly (and most importantly, easily) I sujest moving all of you CSS styles into a style sheet that would look like this;

    Code:
    .style1 {
       position: absolute;
       left: 320px; 
       top: 15px; 
       width: 230px;
    }
    
    .style2 {
       position: absolute;
       left: 300px;
       top: 180px;
       width: 500px;
    }
    This would all be in a CSS file you could name style.css. Then in your html file you would include the CSS with the line ...
    Code:
    <link href="style.css" rel="stylesheet" type="text/css">
    This would be in your html <head>

    Then you could link to your styles like this
    Code:
    <div class="style1">
    As for the IE and FF, in your style sheet, include a statment that looks like this;
    Code:
    body {
     margin: 0px;
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-top: 0px;
    }
    that will tell FF and NS to have no margins on the page and you can adjust the location of the header accordingly.

    And just as we declared the margins for the <BODY> tag, you can do the same for all other tags - ex, <TR> and <TD> as well as <H1> and <H2> - so you can define in your style sheet to have no margins, no borders, so everything will look alike.

    Hope that answers all you q's
    Last edited by sta12s; 03-20-2006 at 02:57 AM. Reason: seplilng

  3. #3
    Join Date
    Dec 2005
    Location
    AZ
    Posts
    155
    Also, don't use "medium" - use px sizes like 14px or 12px and use bold insted of strong
    Last edited by sta12s; 03-20-2006 at 02:56 AM. Reason: booboo

  4. #4
    Join Date
    Jun 2005
    Posts
    42
    OK, one thing at a time. I'm working on simple screens first, want to create templates to use on the more complicated ones. I don't want to put the stylesheet into a .css file until I get all the rules working. I put my CSS coding back in for the product ordering line on this page: http://www.enablemobility.com/it_01020.html

    CSS Rules:
    <style type="text/css">
    <!--
    #b1 {border-style: double; border-width: 2px; border-color: #006666;}
    #b2 {border-style: double; border-width: 2px; border-color: #006666; display: inline;}
    body {margin: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px;
    margin-right: 0px;}
    h1 {font-size: 18px; font-family: serif; color: #006666; font-weight: normal;}
    h2 {font-size: 21px; font-family: serif; color: #006666; font-weight: bold;}
    --> </style> </head>

    In the body:
    <p id="b1"> <div style="position: absolute; left: 280px; top: 460px; width: 200px; height: 21px;"> <h1> Item BB01020 </h1> </div>
    <div style="position: absolute; left: 480px; top: 460px; width: 200px; height: 21px;">
    <h1> Our price: $3,999.00 </h1> </div>
    <div style="position: absolute; left: 680px; top: 462px; width: 200px; height: 21px;">
    <a href="so_01020.html">
    <img alt="Buy Now" src="images/buy_now.gif" border="0" /></a> </div> </p>

    1) The borders are not displayed on any browser. They ignore the border rules, but they must be attempting to apply it or that black line would not have appeared across the top of the page (on all of them). Obviously I have a mistake in my coding, but it's copied straight out of a book, so I don't know how to fix it.
    2) The three elements are not in line on Firefox and Netscape, they move the "Buy Now" button up a few pixels. It aligns correctly in IE. I set all margins to 0px.
    3) The <h1> and <h2> rules work perfectly on all three.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    This may help. Alittle...

    IE totally doesn't 'get it right' when it comes to borders and margins. I recently found out on a web page I made, although this issue was present all along and as written, didn't make any difference *until* I had to re-position a main logo and guess what?! -IE kept placing it a few pixels too low and a few pixels to the right! ALL other browsers placed it exactly where I wanted it... but IE kept messin' it up!

    So, to save IE from it's own stupidity, (always, pre-emptively) add this to your STYLE sheet:
    Code:
    <style type="text/css">
        html, body {
         margin:0; padding:0;
         }
      </style>
    This levels the playing field so to speak, by 're-setting' the borders and the margins to "zero". Other browser apparently don't require this, and this doesn't do them any harm, either...

    Also (and I may be wrong about this...), I don't think that you can have an open <p> followed by a <div>, which implicitly tries to close the still-open <p>. It probably works, but I think it would throw a validation error (??).
    You'd want to have the <p>~</p>'s inside the <div>, not vice-versa. Or am I mistaken here. -Anyone?

    -Joel
    Last edited by WebJoel; 03-20-2006 at 03:27 PM.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by sta12s
    Code:
    body {
     margin: 0px;
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-top: 0px;
    }
    Opps, -didn't see this when I posted. -A bit of 'overkill' here, as "margin:0" says everything you need to say (and includes "bottom", missing here).
    And, same with "border:0" should be included too.

    You could also state "html" along with "body", -just to be sure you got'em all!
    Also, if the value is "0" ("zero"), you do not have to state "px", as zero-pixels = zero-points = zero-em = zero-ex, etc.
    -Joel

  8. #8
    Join Date
    Dec 2005
    Location
    AZ
    Posts
    155
    'over-kill" is my middle name, along with "cover your a** just in case"

    Thanks for the damage control

  9. #9
    Join Date
    Jun 2005
    Posts
    42
    No problem, I'm just grateful you're willing to help. I went back to the books, found out some of the things I'm doing wrong . . . but I'm pretty sure I'll be back with more questions! Some really strange things are happening.

  10. #10
    Join Date
    Oct 2005
    Location
    California
    Posts
    603

    Spacing Problem

    The width problem is a bug in IE. IE will calculate the width of the box as the box plus padding and border width.

    Properly, Firefox does not include padding and border width into its width calculations. So, here's one trick to get them both the same:

    Create two divs. The outer Div should have the width and margin properties. And the inner div should have the border and padding properties.

  11. #11
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The width problem is a bug in IE. IE will calculate the width of the box as the box plus padding and border width.

    Properly, Firefox does not include padding and border width into its width calculations.
    Maybe it's just me but that sounds exactly backwards.

  12. #12
    Join Date
    Oct 2005
    Location
    California
    Posts
    603
    Here's a crude example. You'll see that the IE example is smaller than the FF example. This is because IE includes the border and padding in it's width calculations. See that the content area of IE plus the padding is as wide as the content area in FF.

    For an actual example see my test at: http://www.sitehatchery.com/boxsize.html

    PHP Code:
    Heres a box in IE:
            
               ************************
               *        
    Padding       *         
               *   ****************   *
               *   *    
    Content   *   *
               *   *              *   *
               *   *              *   *
               *   ****************   *
               *                      *
               ************************ 

    Same box in FF:
       
           
           ********************************
           *           
    pADDING            *
           *   ************************   *
           *   *                      *   *       
           *   *                      *   *
           *   *        
    Content       *   *
           *   *                      *   *
           *   *                      *   *
           *   ************************   *
           *                              *
           ******************************** 

  13. #13
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Boy, are we esoteric or what? Yeah, we're in agreement about how IE fails to properly calculate the box size but I don't think of that as "including ..." in its calculation. To me it's "excluding" it from the calculation. POV is everything ain't it?

  14. #14
    Join Date
    Jun 2005
    Posts
    42
    Thank you all! My reference book does not include complex coding examples, so I made several mistakes (which you helped me find). My original problem was caused by the differences in the way IE and FF handle padding and borders, complicated by my coding errors. I standardized the pages using CSS style rules and found positioning that looks OK on all of them.

    I will continue to use HTML tables when what I am building is REALLY a table (such as the item number and pricing rows on the product pages). I guess that make sense. CSS doesn't line up the columns easily (they vary between products), and it's hopeless if I want compact borders because of the IE spacing problem. I'll live with that, at least I'm getting rid of most of my spacers and font statements, finally got the page display size stabilized (we want the blank on the right hand side reserved for future use), and have learned a LOT about CSS.

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