SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    quirks with div sizes in netscape and opera browsers

    i've designed a page, kind of a news/blog for my bands site that uses css defined div elements to format each entry. in IE6 it looks fine but in netscape6 and opera6 the .body div i've designed sticks out too far to the left. i think it has something to do with the pixel width and padding values i've given it.

    the page is here, if you want to see the code:

    www.spittingangels.com/news.php

    sorry the code is so sloppy, i'm using php to generate the code and i haven't cleaned it up yet as far as formatting.


    any ideas on how to resolve this?

  2. #2
    SitePoint Member
    Join Date
    May 2000
    Location
    Copenhagen, Denmark
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile IE get's it wrong, Opera and Mozilla gets it right

    Your problem is that IE get's it wrong, Opera and Netscape gets it right, even though it may seem to be the other way round.

    It has been explained many times on different css-weblog's, so for deeper understanding try a googlesearch with words like "css box model".

    For a quick fix, try something like this:
    Code:
    <div class="dateWrapper">
       <div class="dateContent">Some content</div>
    </div>
    and the css

    Code:
    div.dateWrapper {width: 280px}
    div.dateContent {
      border-bottom: 1px dotted #cccccc;
      font-family: arial,sans-serif;
      font-size: 10px;
      color: #cccccc;
      background-color: #444444;
      padding: 10px
    }
    The reason for all your troubles is that IE gets the css box model wrong and incorrectly calculates widths, margin, padding, etc. The trick above will work in most browsers, because the outer div only specifies width, and the padding is specified in the inner div (which fills the outer div up entirely).

    Best Regards
    Morgan Roderick
    http://roderick.dk[CODE]

  3. #3
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks...that fixed it...




    now off to fight more quirkiness...


Bookmarks

Posting Permissions

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