Tag Archives: html

HTML "name" attribute, Firefox misbehaves

Leave a reply

It's been a long time since I wrote something about web-dev, that's because I code less web-stuff recently 🙂

"id" vs. "name" attributes

so far, I thought that "id" should be used for unique IDs, and "name" can be used for non-unique names, i.e. multiple HTML tags with the same name. I've been using document.getElementsByName(str) to get an array of elements with the same name.

Today I've figured out that it's only partially legal: the name attribute can be used only for specific elements (such as INPUT), but cannot be used on many elements (such as DIV). For some reason, Firefox accepts the name tag for any HTML element, while IE follows HTML 4.01 and doesn't accept name tags for "illegal" HTML tags.

Proof of concept

The next piece of JS/HTML code, gives different results on both browsers:

<div name="foo">bla</div>
<script type="text/javascript">
alert(document.getElementsByName("foo").length)
</script>

Results:

  • Firefox 3: 1
  • IE 7: 0

Here is a nice explanation with a full list of "name"-allowed HTML tags.

How can a parent DIV get the child DIV's width?

Leave a reply

In the following code, I wanted the parent div to expand to the size of the child. But it doesn't work this way:

<div id="parent">
<div id="child" style="width: 500px">Child Text</div>
</div>

Instead, the parent takes 100% of the screen width and does not shrink to the width of the child. Quite a long googling revealed some interesting facts:

  • div is a 'block', so it always tries to take all available width. (unlike a span which is 'inline')
  • Using 'float: left' in the parent, makes it "shrink wrap" over the child, thus not trying to take all available width.
    adding 'clear: both' will prevent the float from causing the other blocks to join the same line.
  • If the parent is a <td>, then the "shrink wrap" effect takes place.. (Also with <div display="table-cell"> on firefox, but not in IE)

'onmouseout' event of a container div

Leave a reply

Today I wanted to catch a 'mouse-out' event in a div. Every time the mouse leaves the div, I want to call a function So.. there's the onmouseout event which, at first sight, does exactly what I needed.

<div id="parent" style="height: 500px; width: 500px;" onmouseout="alert('out!');">
<table id="child"><tr><td>child text</td></tr>
</div>

HOWEVER - if the div contains child elements (it usually does.. like above example), when mouse moves from the "bare naked" div directly to its child element, an 'onmouseout' event is called from the div, while the mouse is still inside the borders of the div. And the worst news is that it's not a bug! 🙂

So straight to the sad solution: onmouseleave event does exactly what I needed, but isn't standard and is IE-only (same goes for onmouseenter). As Rick summed it in the post which solved my issue today: "Bummer."

So bummer, but the good thing is that among the reads, I've found this must-read article which talks about the order browsers handle the events, and how to deal with it.

CSS position attribute

Leave a reply

I didn't fully understand it from w3schools description, so here's a simpler (IMO) explanation after digging the issue a little bit:

  • static (the default!): The browser decides where to put the element, and it's not movable (i.e. one cannot change the position attributes (top, left, bottom, right) )
  • relative: Position attributes can be changed, relatively to the 'where-the-browser-decided' position (i.e. for having an element like the static above, but 5 pixels upper, one can put top: -5px)
  • absolute: One can specify a specific position inside the document, which should be measured from the beginning of the document. (i.e. top: 100px; left: 500px) will be on the x=500, y=100 location from the document's start point (top-left in most cases).
    I've noticed that IE6 sometimes measured the location relatively to the parent element in some cases, but it seems to be fixed in IE7.
  • fixed: Similar to absolute, only that the position is relative to the WINDOW and not the DOCUMENT, thus scrolling doesn't change the position. someone said it's like a watermark.