www.webdeveloper.com
Results 1 to 15 of 15

Thread: help with positioning? IE vs. Netscape

  1. #1
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785

    Question help with positioning? IE vs. Netscape

    Hi, guys!

    Here's another site I need help with.

    It is my first no-tables site, a work-in-progress sketch, with no true content. It passed the validation. However, the styles are over-sized and could be simplified with one external sheet, but I left the styles on each page for other reasons and will deal with it later.

    Here is the problem: It looks beautiful in IE, of course, but there is somemis-positioning in Netscape I can't figure out.
    Meanwhile, I suspect the answer to my question is simple, but before I dig through the books, maybe someone can through me a bone.

    http://www.siriustechnology.com/sites/singletrackmind
    Absence of a result is a result, unless defined otherwise.

  2. #2
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    It's IE that interprets the element bounding rectangle incorrectly:
    for the same width/height
    according to W3C standard margin, borders are added to the outside
    IE sticks them inside.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  3. #3
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785
    "need more input"
    Johnny5, Short Circuit

    In other words, what is it I should do?
    Absence of a result is a result, unless defined otherwise.

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Read about it at:
    http://tantek.com/CSS/Examples/boxmodelhack.html

    width is width of the element (such as div)
    padding is added around the element (not inside the element)
    border is added around the padding (not inside the element)
    margin is added outside the border.

    Thus {width: 100px; padding: 5px; border: 2px; margin: 10px} means:
    -> The main <div> will be 100px wide.
    -> In addition, it will carry padding of 5px on all four sides.
    ----> So div+padding is 110px wide
    -> In addition, there will be a 2px border on all four sides
    ----> So div+padding+border is 114px wide
    -> Finally beyond border, margin is applied
    ----> So all of it is 134px wide.

    IE handles it incorrectly. For IE
    -> All of it is 100px wide
    -> Margin of 10px around means 80px available
    -> Border of 2 px means 76px available
    -> Padding of 5px means the actual contents will span 66px

    Read the tantek.com site for more details and workarounds. Simpler workaround is (but not totally proven)
    { width: 134px;
    wid\th: 100px; /* IE doesn't understand this */ }

  5. #5
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785

    Shenksh!

    Thank you!
    Absence of a result is a result, unless defined otherwise.

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Wondering, what is Shenksh!

  7. #7
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785
    It's "thanks" with candy in my mouth
    Absence of a result is a result, unless defined otherwise.

  8. #8
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    IE handles it incorrectly. For IE
    -> All of it is 100px wide
    -> Margin of 10px around means 80px available
    I was under the impression that it was only border to border that was incorrect. I thought that the margin in IE5 was interpreted correctly and doesn't need to be accounted for in the above equation.

    IE6's box model is ok in standards mode but uses the broken box model in quirks mode. Using a 4.01 transitional doctype without a URI will cause IE6 to run in quirks mode and use the broken box model. (see http://www.ericmeyeroncss.com/bonus/render-mode.html)

    Hope this is of some use.

    Paul

  9. #9
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by Paul O'B
    Yes you are right. Sorry for the error.

  10. #10
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785
    Thanks for additional correction, I'm reading up on this, great info.
    Follow-up question: my in-box border image is getting positioned inside of content area, not inside of <div>????? Is it something wrong on my part or is it the browser issues again?

    -----------------

    forgot to mention, I view it in IE6 and NS7
    Last edited by Daria; 04-16-2003 at 08:57 PM.
    Absence of a result is a result, unless defined otherwise.

  11. #11
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    What image is showed outside the box? Seems OK to me.

    Suggestion:
    Instead of
    <div class="box1" style="left:20px; top:20px; background-color: #3A5176; background-image: url(images/tll.gif)">
    Its makes more sense if you put these styles into the stylesheet. Both are correct. However, putting all the styles in a stylesheet makes it easier at a later stage:
    - changing single CSS file rather than each page. This will be true if you use external stylesheet.
    - All styles (at least most) are in a single location, making your html code easier to read.

  12. #12
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785
    Thanks for suggestion!

    re: image:

    if you see my quartered wheels - according to design plan they are supposed to fit in the box, to the pixel, into each corner. Each box (box1, box2, etc) should have a 1px black border, plus some space between each other, forming a cross. I want them to look the way they look in IE for now.

    If I take margin:10 px off, it clears up my problem with image positioning, but it looks ugly in regards to the text.

    When I was trying to adjust the settings for the correct appearance I noticed that if I take my margin: 10px off the boxes, in Netscape, too my quartered wheels are sitting nicely right in the corner.

    That lead me to believe that margin: 10px affects the positioning of the background inside the division.

    So, looking up the info via both links in the thread above, it made me think - the background image (my wheel) is fitting into the content area, not the <div>.

    Therefore my question is - is it supposed to be this way (and I can adjust by creating the background image custom fit for each box) or is it me doing something wrong with the code (which is most likely, since it's my first uneducated css attempt)


    BTW, I did not change anything on the site yet, fur the purity of experiment. I'll re-post it once I figure and fix everything up.
    Absence of a result is a result, unless defined otherwise.

  13. #13
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Try the following for all ".box"es
    Code:
    .box1 {
      border: 1pt solid black;
      position:absolute;
      color:#697C9E;
      padding:10px;
      margin-bottom:30px;
      text-align:left;
      font-size:11px;
      font-family:Verdana,Arial;
    }
    .box1 { 
      width:330px; 
      voice-family: "\"}\""; 
      voice-family:inherit;
      width:308px;
    } 
    html>body .box1 {width:308px;} 
    /* Note: 308px = 330 - 2*(10) - 2*(1)
    width+padding+border=330 */
    
    .box1 { 
      height:200px; 
      voice-family: "\"}\""; 
      voice-family:inherit;
      height:178px;
    } 
    html>body .box1 {height:178px;}
    Please let me know if that works

  14. #14
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    BTW, I'd do the following (saving filesize)
    Code:
    .box1, .box2, .box3, .box4 {
      border: 1pt solid black;
      position:absolute;
      color:#697C9E;
      padding:10px;
      margin-bottom:30px;
      text-align:left;
      font-size:11px;
      font-family:Verdana,Arial;
    }
    .box1, .box2, .box3, .box4 { 
      width:330px; 
      voice-family: "\"}\""; 
      voice-family:inherit;
      width:308px;
    } 
    html>body .box1 {width:308px;}
    html>body .box2 {width:308px;}
    html>body .box3 {width:308px;}
    html>body .box4 {width:308px;}
    /* Note: 308px = 330 - 2*(10) - 2*(1)
    width+padding+border=330 */
    
    .box1, .box2, .box3, .box4 { 
      height:200px; 
      voice-family: "\"}\""; 
      voice-family:inherit;
      height:178px;
    } 
    html>body .box1 {height:178px;}
    html>body .box2 {height:178px;}
    html>body .box3 {height:178px;}
    html>body .box4 {height:178px;}

  15. #15
    Join Date
    Nov 2002
    Location
    NJ, USA
    Posts
    785

    Smile



    yes, it works!!!!!!!!!


    THANK YOU!!!!!!!!!!!!!!!!!!!!!!

    now I'm off to analyzing...

    D.
    Absence of a result is a result, unless defined otherwise.

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