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.)

Code:

<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

Code:

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)

Code:

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

Code:

var ie = document.all
var ns = document.getElementById && !ie

Browser 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

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

Code:

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

**mwinter** · 08-12-2006, 10:36 PM

Originally Posted by mburt

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.

Originally Posted by Twey

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.

Originally Posted by Twey

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

I would go with the following construct, personally:

Code:

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:

Code:

var global = this;

... when window is accessible globally?

Thread: SPAN width in FF

Thread Tools

Search Thread

SPAN width in FF

Bookmarks

Bookmarks

Posting Permissions