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

HTML & CSS
1

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:

<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:

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

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

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.


<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.:slight_smile: