Firefox incorrectly handles a chain of selectors? 2

[prex1]

Firefox(3.5.7) handles differently from others (IE,Opera,Chrome) the following chain of styles, involving the use of background images to show a pushed appearance, when hovering, of a button composed of two images.
The html

<span class=button>
  <a href="some.htm">
    <div class=button_left>Text1</div>
    <div class=button_right>Text2</div>
  </a>
</span>

and the CSS

.button_left{background:url('button_left.gif')}
.button_right{background:url('button_right.gif')}
a:hover .button_left{background:url('pushed_left.gif');cursor:pointer}
a:hover .button_right{background:url('pushed_right.gif');cursor:pointer}

In all browsers other than FF this works correctly: both background images in the left and right parts (or top and bottom, doesn't matter of course) of the button are correctly changed when hovering.
The only issue is with IE, that doesn't change the mouse pointer when hovering: that's why the [tt]cursorointer[/tt] spec.
FF doesn't recognize in any way the [tt]a:hover[/tt] parts. Any idea on how to solve this with FF?

Franco

http://www.xcalcs.com

: Online engineering calculations

http://www.megamag.it

: Magnetic brakes for fun rides

http://www.levitans.com

: Air bearing pads

 

[feherke]

Hi

Well, I have not have FireFox 3.5.7, but in FireFox 3.6 your example works as I expected & you described & other browsers does.

Feherke.

http://free.rootshell.be/~feherke/

 

[Vragabond]

First thing I would do is replace the inner divs with an inline element. Divs may not exist inside an inline element (span and a) and they may well cause problems. Otherwise, I would expect your code to work. Do you have an online example we check?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[prex1]

I later discovered that the cause was in a document.write with javascript, I didn't tell about because I didn't suspect it...
The problem was that I wrote in separate scripts the opening <a> tag and the closing </a> one, the content divs being static. After putting everything from <a> to </a> into a single script, the problem disappeared (but IE continues to not change cursor style when hovering). If that is a rule with document.write , well... I was not aware of it...
vragabond, the problem with span is that you can't set the width.

Franco

http://www.xcalcs.com

: Online engineering calculations

http://www.megamag.it

: Magnetic brakes for fun rides

http://www.levitans.com

: Air bearing pads

 

[BillyRayPreachersSon]

the problem with span is that you can't set the width.

I'm guessing you didn't try setting its display style to 'block', then...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[feherke]

Hi

the problem with span is that you can't set the width.

That is the "problem" not with the [tt]span[/tt] but with any [tt]inline[/tt] element. If you set [tt]display: block[/tt] for the [tt]span[/tt], then you can set [tt]width[/tt] and [tt]height[/tt] just as for [tt]div[/tt] or other [tt]block[/tt] element.

Divs may not exist inside an inline element (span and a) and they may well cause problems.

I would not say that for sure. Franco not shared the [tt]DOCTYPE[/tt] with us and in case it is HTML 5, the markup is valid. See “Block-level” links in HTML5 by Bruce Lawson.

Feherke.

http://free.rootshell.be/~feherke/

 

[Vragabond]

prex1, you can set the width on a span if you change it to a block-level element. While you might say that this defeats the whole purpose, it actually does make a little bit of sense.

In your original code, you have a span (inline), inside it an anchor (inline) and inside it two divs (blocks). Your CSS (I presume), changes the display setting of the span and anchor to block, meaning with the CSS applied, your code is:

span (block) -> anchor (block) -> 2 divs (block)

and that is a valid setup. However, since CSS is an addition to HTML, HTML should work without it as well. In this case, your code is:

span (inline) -> anchor (inline) -> 2 divs (block)

This structure is illegal and may cause problems. If a browser is checking the code for validity, your code (without the stylesheet) will fail. However, if you switch it up:

span (inline) -> anchor (inline) -> 2 spans (inline)

The structure is legal even without CSS. When CSS is applied, it changes to:

span (block) -> anchor (block) -> 2 spans (block)

And is still legal.

I am telling you this, because I've ran into problems with FF rendering once when I had dealt with legacy code that had a div inside an anchor. Since browsers load HTML first and apply CSS later, there were moments when divs were rendered outside the anchor, because FF believed a div (block level element) cannot exist inside an anchor (inline element) and it closed the anchor prior to the beginning of the div element. It's a very rare error, but can cause a lot of problems.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Vragabond]

feherke, true, HTML5 will accept the following as a legal code. However, HTML5 is in early draft mode and it is unclear when it will be ready for use (or properly supported). In comparison, CSS3 has been around much longer and is still a working draft mode with little to no support from browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[feherke]

Hi

There is another article by Bruce Lawson, Yes, You Can Use HTML 5 Today!.

( Note that I not read the article yet. )


Feherke.

http://free.rootshell.be/~feherke/