Log in

View Full Version : SPAN width in FF


mburt
08-12-2006, 02:56 PM
Hi,

I'm having some trouble with this script (I'm pretty sure it has to deal with the SPAN's width.)


<html>
<head>
<style type="text/css">
.tablespan {
border:1px solid black;
padding:2px;
width:120px
}
.tablespan:hover {
background:highlight;
color:white
}
</style>
</head>
<body>
<div id="spantable"></div>
</body>
</html>

The width won't be 120px, it'll be the width of the text (in FireFox)?? Any help appreciated.
Twey
08-12-2006, 03:51 PM
<span>s are inline elements. You can only set width on block-level elements. You can try display:block, but depending on your layout it might mess things up.

Also, that :hover won't work in IE.
mburt
08-12-2006, 08:30 PM
Also, that :hover won't work in IE.

Yeah, I rigged up this script for IE :)


var ie = document.all
var ns = document.getElementById && !ie
document.onmouseover=function(e) {
var obj = ns ? e.target : event.srcElement
if (obj.className=="tablespan") {
obj.style.background="highlight"
obj.style.color="white"
obj.onmouseout=function() {
obj.style.background="white"
obj.style.color="black"
}
}
}
mburt
08-12-2006, 08:32 PM
Alright this is actually what I'm doing: (creating tables with div elements)


<html>
<head>
<script type="text/javascript">
onload=function() {
var rows=new Array
rows[0]=["Header Col 1","Col 1 Row 1","Col 1 Row 2"]
rows[1]=["Header Col 2","Col 2 Row 1","Col 2 Row 2"]
rows[2]=["Header Col 3","Col 3 Row 1","Col 3 Row 2"]

for (i=1;i<=rows.length-1;i++) {
var table=document.createElement("SPAN")
var code
code+="<span class='tablespan'>"+rows[0][i]+"</span>"+
"<span class='tablespan'>"+rows[1][i]+"</span>"+
"<span class='tablespan'>"+rows[2][i]+"</span><br>"
spantable.appendChild(table)
}
table.innerHTML="<span class='tablespan'>"+rows[0][0]+"</span>"+
"<span class='tablespan'>"+rows[1][0]+"</span>"+
"<span class='tablespan'>"+rows[2][0]+"</span>"+"<br>"+code.substring(9,code.length)
}
var ie = document.all
var ns = document.getElementById && !ie
document.onmouseover=function(e) {
var obj = ns ? e.target : event.srcElement
if (obj.className=="tablespan") {
obj.style.background="highlight"
obj.style.color="white"
obj.onmouseout=function() {
obj.style.background="white"
obj.style.color="black"
}
}
}
</script>
<style type="text/css">
.tablespan {
border:1px solid black;
padding:2px;
width:120px;
display:block
}
.tablespan:hover {
background:highlight;
color:white
}
</style>
</head>
<body>
<div id="spantable"></div>
</body>
</html>

Using display:block has the same effect as div which I don't want, I want all of the element to be on the same line.

Remove the display:block, and see what happens in IE, then in firefox.

Help please
Twey
08-12-2006, 08:46 PM
I want all of the element to be on the same line.You need to use two or three floated divs, then.

var ie = document.all
var ns = document.getElementById && !ieBrowser detection is A Bad Thing.
mburt
08-12-2006, 08:53 PM
Browser detection is A Bad Thing.

It may be, but it works. If the browser is IE the script works, and if it is FireFox or other hover:pseudo class supporting browsers it works too.
Twey
08-12-2006, 09:31 PM
But you only use it once, and you might as well replace that line with:
var obj = (e && e.target ? e.target : (window.event && window.event.srcElement ? window.event.srcElement));
mwinter
08-12-2006, 10:36 PM
Alright this is actually what I'm doing: (creating tables with div elements)

That's just daft. Stop it. If you have tabular data, use a table. If you don't, use appropriate semantic markup.





Browser detection is A Bad Thing.

It may be, but it works.

For a limited value of "works". For a start, your "test" for MSIE will match many more browsers than just IE, likewise for Netscape.

The point that is important regarding browser detection is that it doesn't tell you (the author) what you actually want to know. The question is, "Will the host support X?" Feature detection will answer that well. Unless you know the features of every single browser, past, present and future (and nobody never will), browser detection is nothing more than a maintenance burden.




var obj = (e && e.target ? e.target : (window.event && window.event.srcElement ? window.event.srcElement));

I would go with the following construct, personally:



var global = this;

function listener(event) {
if (event || (event = global.event)) {
var target = event.target || event.srcElement;

if (target /* && <feature detection, if necessary> */) {
/* ... */
}
}
}

Fewer property lookups, if nothing else.

Mike
mburt
08-12-2006, 10:46 PM
That's just daft. Stop it. If you have tabular data, use a table. If you don't, use appropriate semantic markup.
Why the hell would you want to know why I'm trying to do this? I was trying to do it, first of all. I was testing out I method I thought of. Your advice was nothing that was already said, and superfluous.

Remember, I was the one questioning, not correcting.
Twey
08-12-2006, 10:55 PM
What is the advantage of doing:
var global = this;... when window is accessible globally?
mwinter
08-12-2006, 11:29 PM
Why the hell would you want to know why I'm trying to do this?

Where did I write that I wanted to know? I couldn't care less why because it's a stupid thing to do.



I was trying to do it, first of all.

Fine. :rolleyes:



Your advice was nothing that was already said, and superfluous.

Nobody in this thread had written a word of what I did.



Remember, I was the one questioning, not correcting.

?




What is the advantage of [creating a variable referencing the global object] when window is accessible globally?

From a purely theoretical basis, there's no reason beyond convention for there to be a window property, or for it to refer to the global object, but that isn't really why I do it. Mainly, it's a conceptual thing: I'm not interested in the window, but rather properties of the global object. Using the this operator in the way shown in my previous post guarantees that I am actually using the global object in any conforming ECMAScript environment (with the blatently obvious caveat that another identifier, global, doesn't enter the scope chain with some different value).

Mike
mburt
08-19-2006, 02:19 AM
I found the answer. Combining these two properties:



float:left;
display:inline