...

View Full Version : Need Help - Custom Text Input



Jakeumms
01-13-2008, 08:36 PM
I have a text input (for my search engine)
I gave it customized width, height, and background image.
In order for it to fit in the table that it is in, the text input needs to be 132*23.
When I tested this out in Firefox, the width was perfect but the height was messed up so I changed it to 21 and it worked perfectly. I would like to know why this is. Also when I look at the text input in IE 6 there is a border around it and it messes everything up. Heres the code.
LIVE EXAMPLE: Click Here. (http://teacupmedia.com/searchbox.html)

Head CSS Section

<style type="text/css">
.search {
width: 132px;
height: 21px;
border: none;
font-family: Tahoma, verdana, arial,sans-serif;
font-size: 15px;
color: #563C21;
text-decoration: none;
background-image: url(images/top_scb_searchbox.jpg);
}
</style>

Body Section

<input type="text" class="search">

AoR Zeta
01-13-2008, 08:44 PM
CSS support for form elements in all Browsers is buggy. Even all the latest Browsers have problems with it. That's true as far as my personal experience goes.

Jakeumms
01-13-2008, 08:53 PM
Because AoR, in my last post you said that there was a fix for the y-axis that only was read when IE was open. Is there some special code, where I can tell it that if IE is open, don't have a border around it or something. Also, could you look at my Live Example (http://teacupmedia.com/searchbox.html) in IE and then compare it to Firefox? to give you a better idea...

AoR Zeta
01-13-2008, 08:55 PM
To be honest, I didn't actually read your problem. I was just stating that CSS support for form elements is buggy as hell.

I'll take a look now and see what I can do.

EDIT:
It looks like you haven't set a margin or padding. Now I know that all Browsers automatically set a padding/margin for most form elements and I also know that all Browsers do it differently. For example, IE could give an input element a margin of 10px whereas Firefox might give it a margin of 12px.

So from taking a quick look at it, I'm guessing it's to do with margin and/or padding.

EDIT 2:
Another guess here, try changing border:none; to border:0 or border:0 none;. That may alleviate the IE6 problem.

EDIT 3:
You really shouldn't use tables for layout. It'd make your life a lot easier if you learned CSS. Tables are for tabular data. Semantics, dear boy.

Jakeumms
01-13-2008, 09:09 PM
Okay I changed it from none to 0 none. That helped a fair amount but theres still a little bit left. Maybe these before and after links will help you. Before (http://www.teacupmedia.com/searchbox.html) | After (http://www.teacupmedia.com/searchbox2.html) (look at them in IE)

Can you give me the exact code for what you think I should do with the margin/padding?

Jakeumms
01-13-2008, 09:27 PM
I fixed it simply by adding


margin:0px 0px 0px 0px;
padding:0px;

Thanks again AoR. There is still a little white outline and I still don't understand why it works at 21 and not 23 but at least it doesn't disturb the tables in IE anymore. Thank You!

AoR Zeta
01-13-2008, 09:30 PM
You can shorten those to margin:0; and padding:0;

Also I think the white outline you speak of may be styling on the form. Browsers style <form> elements too. So give the form an id then set some CSS (border:0;margin:0;padding:0;).

The white outline could also be something to do with cellspacing or cellpadding. You're using tables for layout like I said, it just causes problems.

Jakeumms
01-13-2008, 11:04 PM
What do you mean by that. How whould I implement it in both the Head and the Body> Thanks

Jakeumms
01-13-2008, 11:34 PM
Okay so inside ".search" I changed the padding margin and border to 0. Now it works in both Firefox and IE but there is a weird black and white border around it. It's not from the table, believe me.

Is there a way to make it so that if it opens in Firefox it does:

.search {
width: 132px;
height: 21px;
border:0;
font-family: Tahoma, verdana, arial,sans-serif;
font-size: 15px;
color: #563C21;
text-decoration: none;
background-image: url(images/top_scb_searchbox.jpg);
}
and if it opens in IE or another browser it adds the padding and margin(so that it is dependent on browser)

.search {
width: 132px;
height: 21px;
border:0;
margin:0;
padding:0;
font-family: Tahoma, verdana, arial,sans-serif;
font-size: 15px;
color: #563C21;
text-decoration: none;
background-image: url(images/top_scb_searchbox.jpg);
}

Jakeumms
01-14-2008, 03:49 AM
I simply fixed this with another css stylesheet inside of end ifs for IE.

<!--[if IE]>
<style type="text/css">
.search {
padding:0;
margin:0;
}
</style>
<![endif]-->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum