Rounded input text with image

HTML & CSS
21

Hi imaginekitty,

I use your http://imaginekitty.com/cssExamples/roundinput.2.html link as an example.
You are using label. If you dont mind, can help me convert that using table, tr, td?

In HTML:

<form method=“post”>
<table width=“100%” align=“center” border=“1”>
<tr align=“center”>
<td>Name</td>
<td>
<input type=“Text” class=“class_name” name=“input_name”>
</td>
</tr>
<tr align=“center”>
<td>Last Name</td>
<td>
<input type=“Text” class=“class_name” name=“input_name01”>
</td>
</tr>
</table>
</form>

In CSS:
???

Thanks…

22

You’d need to position it absolutely, and give the input position relative and some left and right padding for locating the generated content.

Tables are not needed there, and not the right element to be laying out something like this. A table is only meant for tabular data, and it also involves more markup than you need. The <label> element is an essential form element, so it’s not a good idea to leave it out, and it is just as good a hook for styling at a table cell, too. It would be harder to use the above approach with table cells.

23

So, basically using tables are not applicable for the example?

24

Hi ralph,

Did you try this code?

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<style type=“text/css”>
p:before
{
content:“Read this -”;
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>

<body>
<p>test 1</p>
<p>test 2</p>

</body>
</html>

I think it is not working in IE9.Can you please give me the proper code for
CSS on how to use the proper positioning between :before and <p>?

Thanks

25

No, like I said, you need to position the before and after content absolutly and give the element itself position: relative.

26

Sorry, but no. I’ll not give examples with improper code because then I’d be responsible for yet another bad google result.