SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE "0ffset" in dev tool bar..what is that?

    I notice a div get pushed down only in IE7 and when I inspect it w/in Dev Tools and the Layout tab, there is a top Offset of 24 pixels.

    Switch to IE8 and it vanishes.

    What is this "offset" in the dev tool? I have the body set to margin/padding:0 so that isn't it.

    I even tried zero-ing out the root element, HTML.

    the html structure is:
    HTML Code:
    <div class="specialHdr">
       <span class="headerFormat">Basic header goes here</span>
      <div id="tools">
          <span class="fontSizeLinkS"><a href="javascript:window.print();" title="Print this Page">Print</a></span>
          |      
          <a href="#" onclick="setActiveStyleSheet('default'); return false;" class="fontSizeLinkS">A</a>
          <a href="#" onclick="setActiveStyleSheet('medium'); return false;" class="fontSizeLinkM">A</a>
          <a href="#" onclick="setActiveStyleSheet('large'); return false;" class="fontSizeLinkL">A</a>
      </div>
    </div>
    NOTE: that piping symbol is just a visual separator separating Print from the three A's for sizing...not a typo or fat-finger!

    and the relevant css:
    Code CSS:
    div.specialHdr{width:968px; color:#050505; padding:5px 0 5px 20px; margin:0 0 20px 0; background:url(images/hdr-repeat-bck.gif) repeat-x 0 0; height:31px}
    div#tools{float:right; width:75px;overflow:hidden;}
    span.headerFormat{font-size:16px; font-weight:900; height:31px}
    .fontSizeLinkS{font-size:12px}
    .fontSizeLinkM{font-size:14px}
    .fontSizeLinkL{font-size:16px;}

    The "tools" div gets pushed down by 24 which shows up only in the Offset top field of the IE Dev Bar.

    I haven't found much on what that specific term in the tool means. thanks

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I found this:
    "Using the Layout Tool
    The Layout tool offers the box model information of an element's relative positioning on a webpage. Available information includes:

    Offset: These values describe the distance between the selected object and its parent, as represented by the offsetLeft and offsetTop properties."

    Which should translate easier to: positioning.

    I fixed it by using position:absolute and then using top/right with the parent being relative.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You floated the tools element to the left and in IE7 and under floats always start on a new line so they start under the span ( <span class="headerFormat">Basic header goes here</span>).

    Other browsers only start floats on a new line when the element before is a block element and only move the float to the side on the same single line as inline content.

    Your construct is bad anyway and the span should not really bleed straight into a block level element. You've marked the span as a header so use a header tag because that's what they are there for.

    Code:
    <div class="specialHdr">
       <h2 class="headerFormat">Basic header goes here at the correct level of course</h2>
      <div id="tools">

    That will make all browsers behave the same and start on a new line so then you can just float the header left and the rows is once aligned in all browsers.


Tags for this Thread

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
  •