Sorry for the title, I couldn't think of a good one.
This isn't a PHP question, but a HTML/CSS question.

The problem only shows itself in AOL browser, which is supposed to be IE, but whatever.

I have a form with a section styled something like this:

Name:
|||||||||||||| ||||||||||||||||
First Last

In code, the input box and the subtitle "first" or "last" is contained in a styled <span> tag. The span floats the two entities to the left and applies my styles and what not.
So it's like this:
<span class="name">
<input>
<label>First</label>
</span>

The problem I think is a z-index kind of thing. The span is "over" the input box, and this prevents the user from being able to click on the text box and enter text.
There are two ways to enter text in the box at this point, if you click the box on it's extreme left edge, you may be able to "get in" it. Or you click on some other box in the form that does NOT use a <span> and then TAB into the box to type. You just can't click on the box directly.

In order for z-index to work, though, it has to be absolute positioned, which I can't do because it's floated (that's what I read anyway). I can't change span into something else, I tried styling just the input boxes, I tried styling a <p> instead, no good. And I can't position absolute, it screws up the layout of the form.

So how the heck do I style the form like that, or change the z-index (if that's the problem), or in some way get stupid AOL to treat the input box right? All the other input boxes work fine, and they don't have a <span> around them.

Thanks

    First as far as cross browser compatibility goes I doubt anyone here does cross browser compatibility checks on the AOL browser. All of what .01% of internet users use it. More likely to find more using the Konquorer browser. Any AOL user can just minimize their AOL and click the "e" on their desktop and see things as they were intended (well almost as they were intended). I personally would not go through the hassle of making sure it works on AOL.

    Next any styles applied to the span tag should effect the input tag as it is part of it. Unless, you have set style to both of them by setting a position relative or such and then just remove the positioning style from the input tag. But I would recommend changing to div tag as span is more for adding style to something without breaking a continuous line.

    Hello <span style="font-size: 14pt;">World</span>

    And you can set the z-index to any element. The purpose behind positioning is in order to get something positioned behind another you have to force them into a position using absolute and relative positioning. And then z-index will dictate which is on top.

    Not sure if that code is just a quick sample but if not you need to define the "type" of input.

    <input type="text">

      I tried DIV but had same issue. Just seemed as long as there was some kind of "parent" around the input box and label, it wouldn't work.
      To fix this, I just removed the parent and use a table to position everything, and then it worked.
      I try to design tableless, but sometimes it seems you just can't get away.

      As far as AOL, I know it is less than like .5&#37; of usage, but wouldn't you know it, I have to write a script for an AOL user! So every time I do something, she's using her browser to check. Further more, she demands it work well with it because it's what she uses, and declares "most of her clients" are on AOL as well. Sheesh. But it works with tables, and that's fine with me. Not getting paid enough to care.

        Write a Reply...