Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Placing A Img Element Below A Text Input Element

This is a discussion on Placing A Img Element Below A Text Input Element, within the CSS section. This forum and the thread "Placing A Img Element Below A Text Input Element" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Placing A Img Element Below A Text Input Element
djeyewater
post Jun 6 2008, 11:46 AM
Post #1


Squeezing
***

Group: Members
Posts: 58
Joined: 18-February 08
Member No.: 169
I'm trying to get a text input element to have an inner glow (or maybe outerglow). I want the effect to be scalable so I'm using an image element underneath the text element rather than giving the input a background-image. Problem is, the image overlays the text element (so you can't click in the text element) rather than underlaying it.

You can see the page here.

Here's the code:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image below input element test</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
padding: 1em;
}
.text{
vertical-align: text-top;
z-index: 2;
width: 15em;
height: 1.4em;
font-size: 1em;
border: 0.1em solid #000;
}
.txtImg{
vertical-align: text-top;
z-index: 1;
margin-top: 0.1em;
margin-left: -15.1em;
width: 15em;
height: 1.4em;
}
</style>
</head>

<body>
<form action="" method="post">
<p><input type="text" class="text" name="textfield"><img src="Safari style form buttons/textbox_innerglow.png" class="txtImg" alt="innerglow"></p>
</form>
</body>
</html>


It seems to work as I want in Safari 3 for Windows but not in IE Opera or FF.

Can anyone help?

Thanks

Dave
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 6 2008, 03:31 PM
Post #2


Squeeze Machine
*****

Group: Mentor
Posts: 600
Joined: 15-February 08
From: UK
Member No.: 143
It works for me on Firefox/Win. However, there are problems with your code:

  • You have spaces in your image file name!
  • You should not use alt="innerglow". The alt should be left blank: alt="".


Better yet, do the whole thing with CSS backgrounds. Yes, these can scale: check out the orange/yellow pull-out box on my site, for example: http://www.badmintonbible.com/

I also wrote a tutorial for this: http://creativecoding.webforumz.com/editio...the-glamour.php
Go to the top of the page
 
+Quote Post
djeyewater
post Jun 7 2008, 01:28 PM
Post #3


Squeezing
***

Group: Members
Posts: 58
Joined: 18-February 08
Member No.: 169
QUOTE (MikeHopley @ Jun 6 2008, 03:31 PM) *
I also wrote a tutorial for this: http://creativecoding.webforumz.com/editio...the-glamour.php


Thanks for the help, I tried following your tutorial and got to the step before adding the corners. I think it looks okay without the corners in all the browsers I tried except IE6. The problem is that in IE7 you can't click on the text input element. I tried setting onclicks for the different divs containing the text input and the only one that would register was the div that contains the label and all the other divs.

The page is here and code below.

I guess I could set the div containing the label and other divs and the text input to focus on the text input when clicked, but wondered if you or anyone else had any better ideas or knows what the problem is here.

Thanks

Dave

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image below input element test</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
outline: none;
}
body{
padding: 1em;
font: 1.1em Verdana, Arial, Helvetica, sans-serif;
}
.txtBorder{
position: absolute;
display: inline;
border-top: 0.1em solid #000;
border-left: 0.1em solid #000;
border-bottom: 0.1em solid #CCC;
border-right: 0.1em solid #999;
}
.text{
vertical-align: text-top;
padding: 0.2em;
font-size: 1em;
width: 15em;
height: 1.4em;
background: none;
}
div.txtImg {
background: url(Safari%20style%20form%20buttons/textbox_innerglowTopEdge.png) repeat-x;
}
div.txtImg div {
background: url(Safari%20style%20form%20buttons/textbox_innerglowRightEdge.png) right repeat-y;
}
div.txtImg div div {
background: url(Safari%20style%20form%20buttons/textbox_innerglowLeftEdge.png) repeat-y;
}
div.txtImg div div div {
background: url(Safari%20style%20form%20buttons/textbox_innerglowBottomEdge.png) bottom repeat-x;
}
.text2{
border: 1px solid #000;
font-size: 1em;
width: 15em;
height: 1.4em;
}
</style>
</head>

<body>
<form action="" method="post">
<div><label for="textfield">blah blah blah</label><div class="txtBorder">
<div class="txtImg"><div><div><div>
<input type="text" class="text" name="textfield" id="textfield">
</div></div></div></div>
</div></div>
<p><br>
<input type="text" name="textfield2" class="text2" id="textfield2"></p>
</form>
</body>
</html>
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 7 2008, 02:48 PM
Post #4


Squeeze Machine
*****

Group: Mentor
Posts: 600
Joined: 15-February 08
From: UK
Member No.: 143
**EDIT**

Scratch that, you have actually followed my code order. Hmm. Not sure what's going wrong, then. sad.gif

Just try this magic bullet. It might work:

CODE
div.txtImg input {
    zoom: 1;    /* trigger hasLayout */
}


You could also try applying the same CSS to some of the other elements.
Go to the top of the page
 
+Quote Post
djeyewater
post Jun 9 2008, 04:52 AM
Post #5


Squeezing
***

Group: Members
Posts: 58
Joined: 18-February 08
Member No.: 169
QUOTE (MikeHopley @ Jun 7 2008, 03:48 PM) *
Just try this magic bullet. It might work:

CODE
div.txtImg input {
       zoom: 1;    /* trigger hasLayout */
   }


You could also try applying the same CSS to some of the other elements.


It works! Just needed to apply it to div.txtImg rather than div.txtImg input. Thanks!

Dave
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 9 2008, 05:11 AM
Post #6


Squeeze Machine
*****

Group: Mentor
Posts: 600
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (djeyewater @ Jun 9 2008, 10:52 AM) *
It works! Just needed to apply it to div.txtImg rather than div.txtImg input. Thanks!

Dave


Hurrah!

Now, to make your main style sheet validate, I suggest you take that "magic bullet CSS" and put it in a separate, IE7-only stylesheet. Then serve it to IE7 using conditional comments.

For more information about such hacks, see the this vernerable article on hasLayout.
Go to the top of the page
 
+Quote Post
unitedcraig
post Jun 9 2008, 05:18 AM
Post #7


Rapid Squeezer
****

Group: Advisors
Posts: 479
Joined: 14-February 08
From: Stockport
Member No.: 75
There's also a great article on The Web Squeeze which explains conditional comments lol wink.gif

http://www.thewebsqueeze.com/articles/cond...t-are-they.html
http://www.thewebsqueeze.com/articles/cond...re-they.html/2/


--------------------

Working progress
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   5 Jason 166 23rd March 2008 - 11:07 AM
Last post by: Ryan
No New Posts   2 jackfranklin 158 25th March 2008 - 05:26 PM
Last post by: Linda
No New Posts   11 jamesicus 348 12th April 2008 - 01:48 PM
Last post by: jamesicus
No New Posts   3 Jason 177 2nd April 2008 - 01:41 PM
Last post by: karinne
No New Posts   2 Jason 199 6th May 2008 - 07:33 AM
Last post by: Rakuli