Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Need Help - Custom Text Input

    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.

    Head CSS Section
    Code:
    <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
    Code:
    <input type="text" class="search">

  • #2
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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.

  • Users who have thanked AoR Zeta for this post:

    Jakeumms (01-14-2008)

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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 in IE and then compare it to Firefox? to give you a better idea...

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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.
    Last edited by AoR Zeta; 01-13-2008 at 10:00 PM.

  • Users who have thanked AoR Zeta for this post:

    Jakeumms (01-13-2008)

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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 | After (look at them in IE)

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

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I fixed it simply by adding

    Code:
    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!

  • #7
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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.

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    What do you mean by that. How whould I implement it in both the Head and the Body> Thanks

  • #9
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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:
    Code:
    .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)
    Code:
    .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);
    }
    Last edited by Jakeumms; 01-14-2008 at 01:27 AM.

  • #10
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I simply fixed this with another css stylesheet inside of end ifs for IE.
    Code:
    <!--[if IE]>
    <style type="text/css">
    .search {
    	padding:0;
    	margin:0;
    }
    </style>
    <![endif]-->


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •