IE7 (possibly 5 & 6) layout inconsistency

[disgracian]

Hi all,

I have a page located here:

http://redgum.bendigo.latrobe.edu.au/~mdrankin/crit/
(user/pass is "guest/guest")

When one clicks on any of the "other" operating systems, an additional input appears on the right. This consists of a text input & label inside a right-floated div. On FF2 and Opera9, the div appears correctly (label appears directly below the input) wheras on IE7 the label appears on the left margin. I am reduced to trying random incantations of CSS to no avail. Can anyone suggest something? It can be a total IE-hack for all I care.

Cheers,
D.

[Centauri]

IE doesn't seem to be able to work out the 20% width when inserted by the javascript. Setting an explicit pixel width on this particular div seems to work :div#extraOS {
background-color: #ccc;
width: 120px;
}

[disgracian]

Hah, I just realised that the problem was that it wasn't getting the "fifth" CSS class at all because I forgot to use my custom function to set the bloody thing.
function setClass( obj, cssClass ) {
if( navigator.userAgent.match( /MSIE\s[567]/ ) )
obj.className = cssClass;
else
obj.setAttribute( 'class', cssClass );
return obj;
}
IE doesn't like setAttribute().

Cheers,
D.

[disgracian]

Hmm, now that the div is fixed, the textbox for "other" is half hanging out of the div. There are no alignment or margins associated with the input element. It should be left aligned along with the label text.

Cheers,
D.

[disgracian]

After some semi-competent advice elsewhere, I have gone from this (http://redgum.bendigo.latrobe.edu.au/~mdrankin/crit/img/fail.gif) to this (http://redgum.bendigo.latrobe.edu.au/~mdrankin/crit/img/epicfail.gif).

The idea was to add #theForm li { width: 100%; }, but this messed up the numbering.

Cheers,
D.

[Centauri]

Have a look at this article (http://www.positioniseverything.net/explorer/inherited_margin.html) - maybe enclosing the input with a span may solve the problem.

[turboraketti]

function setClass( obj, cssClass ) {
if( navigator.userAgent.match( /MSIE\s[567]/ ) )
obj.className = cssClass;
else
obj.setAttribute( 'class', cssClass );
return obj;
}
IE doesn't like setAttribute().
MSIE doesn't actually have as much problem with the setAttribute method, as it has with the 'class' attribute. The word 'class' is a js reserved word, thus to get the class name of an element there is a workaround defined:
var myClassName = myElement.className;
But of course, you could also use the getAttribute method, where no workaround is needed, since the attribute name is given as a string, not a property:
var myClassName = myElement.getAttribute('class');
But here's where MSIE don't behave. It still thinks the workaround is needed, and you have to write
var myClassName = myElement.getAttribute('className');
The same holds for setAtrribute method. Naughty browser...

[disgracian]

Thanks for that article, Centauri. Owing to time constraints I ended up just replacing the floated divs with tables, but this info will come in handy next time.

turboraketti - It's interesting that even the Firefox DOM Inspector has a node's class property as 'className' so perhaps it's not IE that's being the difficult one here?

Cheers,
D.

[Kor]

className attribute is full crossbrowser, it is not an IE only, or FF only. It's just DOM 0 notation. In many cases, DOM 0 is more friendly and cross browser.

[disgracian]

I'd always avoided using it except for IE. I suppose that's what I get for listening to FF zealots.

Cheers,
D.

[Centauri]

After some semi-competent advice elsewhere, I have gone from this (http://redgum.bendigo.latrobe.edu.au/~mdrankin/crit/img/fail.gif) to this (http://redgum.bendigo.latrobe.edu.au/~mdrankin/crit/img/epicfail.gif).

The idea was to add #theForm li { width: 100%; }, but this messed up the numbering.

Cheers,
D.

Only just spotted that other exchange - seems like Paul was a bit blunt there. Surprised he didn't recognise the problem I linked in my last post - he's usually pretty cluey on that stuff..

[disgracian]

This happens to me quite often. It must be something about my demeanour.

Cheers,
D.

[turboraketti]

Sorry, double posted... see next post.

[turboraketti]

turboraketti - It's interesting that even the Firefox DOM Inspector has a node's class property as 'className' so perhaps it's not IE that's being the difficult one here?
className attribute is full crossbrowser, it is not an IE only, or FF only. It's just DOM 0 notation. In many cases, DOM 0 is more friendly and cross browser.
Let me clarify:
- myElement.className is cross browser (and according to standards)
- myElement.getAttribute('className') is not cross browser (supported by MSIE, ...?)
- myElement.getAttribute('class') is not cross browser (supported by FF, Safari, ...?), but according to standards
Do we all agree on this? :)

My point was that setAttribute is not to blame when it comes to the script that disgracian presented 02-25-2008 05:01 AM.

[Kor]

My fault. I sould have been more precise. I mean within the "DOM Level 0" notation:
element.className
className is cross browser

DOM0 notation is very similar with JSON objects handling:
element.property=value//set the value
value=element.property//get the value

element.setAttribute(attribute,value) and element.setAttributeNode(attributeNode,value) are not DOM0, they are DOM1+.