cross browser href inside href?

Question

i have css look like below

ul.sometclass li a {

display:inline-block;
}

my html look like

<ul class="someclass">
<li>
  <a href="outertest.html">outer test 

         <div style="display:inline; float:left;overflow: hidden;">
                   <a href="innertest.html"><div style="display:inline; float:left;">inner test</a>
                   <a href="innertest.html"><div style="display:inline; float:left;">inner test</a>
        </div>
   </a>
</li>
</ul>

1.for cross browser support, is it ok to use href inside href ?
2. is my ul.someclass li a affect inner a_href ? seem to me , it affect and on firefox, even though i put as inline, it render as block . on ie is ok

Answer 1

for cross browser support, is it ok to use href inside href ?

No, definitely not. Nested <a> elements are invalid and begging for trouble.

You should fix this first before trying to correct any other problems possibly connected with this.

Answer 2

You should not be nesting block level elements within inline elements (i.e. div nested in an a href element)

Answer 3

If you wanted to achieve the same effect, you could do something like:

<div class="outer">
   <a ... /a>
</div>
<a class="floatLink" ... /a>

Then, with some clever positioning and z-indexing, you can make the float link appear inside the outer a tag whilst retaining cross browser support.