Text, followed by textbox, followed by icon

[brightmatter]

say i have and index file that looks like this<div id="main_box">
<div id="label_15p">Name:</div>
<div id="box_35p"><INPUT type="text" id="name" style=width:100%></div></div>and i have a css file that looks like this#main_box {
width: 100%;
float: left;
margin-bottom: 10px;
}
#label_15p {
color: rgb(0,0,180);
text-align: right;
width: 14%;
float: left;
padding-right: 1%;
}
#box_35p {
float: left;
width: 35%;
}What can I do to add a small icon to the right of the textbox? I have the icon (it is a png from FAM FAM silk...)Everything I do, just gives me a normal text followed by textbox. The icon never shows up.

Then, if I might ask a followup question, how do i effect that icon from the javascript area?<script type="text/javascript">
//blah blah
</script>

[opifex]

You might try...

input.box_35p {
background: url(images/itextboximage.png) no-repeat right center;
}

I don't understand what you want with the javascript.

[brightmatter]

I should have mentioned that I had already tried that. Sorry.

[opifex]

#box_35p input {
background: url(images/itextboximage.png) no-repeat right center;
}

this doesn't work either??? I missed that it was an ID.... whoops

[brightmatter]

Nope. That does not work. As I said, I tried that. The image will not appear. I have given you the code... Now I am sure you can see why this is so annoying. I 'should' work. It 'does' work on other sites. I is all good though. I am likely going to change it all soon and the re-arrange will likely fix whatever I have mucked up.

[aj_nsc]

If it doesn't work then the path to the image file simply isn't right. Recall that when dealing with background images with CSS you need to specify the path to the image RELATIVE TO THE CSS FILE, not relative to the file that the CSS is used to style.

[brightmatter]

Icon has the correct location because i can make the order text, followed by icon followed by textbox.

In fact all of these combinations work:
Icon -> text -> textbox
text -> icon -> textbox
textbox -> text -> icon

But the one I want is:
text -> textbox -> icon

I did get this to work
text_a -> textbox -> text_b -> icon: text_b is a period and does not show up as a glaring error but it is still annoying. Does anyone else have a work around for this problem?

BM

[brightmatter]

I think I need to clarify the question. Using this CSS
#complete {
width: 100%;
float: left;
margin-bottom: 10px;
}
#label {
color: rgb(0,0,180);
text-align: right;
width: 9%;
float: left;
padding-right: 1%;
}
#box {
float: left;
width: 80%
}
#icon {
float: left;
width: 9%;
padding-left: 1%;
background: url(../images/tick.png) no-repeat right center;
}I can get this to work :)
<div id="complete">
<div id="label">
Setting Name:
</div>
<div id="box">
<INPUT type="text" id="name" title="name" style=width:100% onblur="processTextOnBlur()" onkeyup="checkForEnterKey()" value="name">
</div>
<div id="icon">
.
</div>
</div>
BUT this will NOT work :confused:
<div id="complete">
<div id="label">
Setting Name:
</div>
<div id="box">
<INPUT type="text" id="name" title="name" style=width:100% onblur="processTextOnBlur()" onkeyup="checkForEnterKey()" value="name">
</div>
<div id="icon">
</div>
</div>

[brightmatter]

**NOTE** The solution is to not use the 'background' in the CSS. It is best to place the image directly in the HTML like this
#complete {
width: 100%;
float: left;
margin-bottom: 10px;
}
#label {
color: rgb(0,0,180);
text-align: right;
width: 9%;
float: left;
padding-right: 1%;
}
#box {
float: left;
width: 80%
}
#icon {
float: left;
width: 9%;
padding-left: 1%;
}And this
<div id="complete">
<div id="label">
Setting Name:
</div>
<div id="box">
<INPUT type="text" id="name" title="name" style=width:100% onblur="processTextOnBlur()" onkeyup="checkForEnterKey()" value="name">
</div>
<div id="icon">
<img src="../images/tick.png" id="nameIcon">
</div>
</div>

[aj_nsc]

That might work, but I wouldn't call it a solution, at least not a good one. There is no purpose for the extra div in your markup except to hold an image, which has no purpose in your markup except to give the page a certain look - which is not content, it's style. In which case, you need to use a CSS to apply it and not put it in your markup. Use it as a background applied to either your input, or the div containing your input. If you cant get it to work, then, I reiterate, it's because the path to your image isn't correct.

As for what you posted above, the reason why your first markup was working was because it had content (a .) inside the div which gave it a height. With nothing inside the div, it may have been 9% wide, but it was 0% high which means that the background was actually in fact working, the div was just not visible and it could've been fixed by specifying a height on your div, as well as a width.