CSS - Styling Default Color Of Value= Text In Form Field

Hi, I've recently built my first site using the Magento eccomerce paltform.

I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area.

This only happens in IE.

I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it.

Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page.

Thanks, Tim

I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size)..

Is there an easy way to do this?

for example

http://member.classifieds.com/userjoin.php

the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this.

Hi There -

Just finished the tutorial from List Apart.

I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right.

Thanks for your help.

Here's the html:
Code:

<div id="tabnav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

Here's the CSS:
Code:

#tabnav {
	float:left;
	width:100%;
	background:#FFFFFF url("tab_background.png")
      repeat-x bottom;
	line-height:normal;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 13pt;
    }

#tabnav ul {
    margin:0;
    padding:10px 10px 0;
    list-style:none;
    }
#tabnav li {
	    float:left;
	    background:url("tab_inactive_right.png")
	      no-repeat right top;
	    margin:0;
	    padding:0;
		
	    }
	
#tabnav a {
    display:block;
    background:url("tab_inactive_left.png")
      no-repeat left top;
    padding:8px 15px 4px;
	}
	
#tabnav a:link{
	color:293356;
	text-decoration: none;
    }
	
#tabnav a:hover{
	color:596eba;
	text-decoration: none;
}

/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
	 
#tabnav a {float:none;}
/* End IE5-Mac hack */
	
#tabnav #current {
    background-image:url("tab_active_right.png");
    }
#tabnav #current a {
    background-image:url("tab_active_left.png");
	padding-bottom:5px;
    }

http://www.lockheed-martin.co.uk/css/full_layout_test.html

ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that?

also I was trying to align the menu to middle but margin:auto isnt working like it did for the body?

finally I want to style forms without using floats or br

but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own)

Code:

form {
        width:30%;
    }
    
    fieldset, input {
        color:green;
        border:1px solid green;
    }
    legend {
        margin-left:0.5em;
    }
    label{
        white-space:pre;
        margin:0 1em 0em 1em;
    }
    input {
        width:50%;
        margin-bottom:1em;
    }
    input[type="submit"] {
        padding:2px;
        margin-left:1em;
        width:auto;
        
    }

form:

Code:

<form action="" method="post">
            <fieldset>
                <legend>Example of a form</legend>
                <label>First Name</label>
                <input type="text" name="firstName" size="10"/>
                
                <label>Last Name</label>
                <input type="text" name="lastName" size="10"/>
                
                <label>Some options</label>
                <input type="checkbox" name=""/> Some
                <input type="checkbox" name=""/> other
                
                
                <input type="submit" name="submit" value="submit"/>
        </form>

PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements..

Im having trouble with styling a web form, im trying to manipulate the textarea width and have the following CSS code

textarea {

width: 400px;
height: 250px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;

}

The width is fine in Internet Explorer yet in Opera it seems to completely ignore the width attribute.

The form itself is in a <div> which has no width attribute.

Anyone got any ideas?

I've seen some text inputs with pretty snazzy styling, such as borders with rounded corners. How is this done?

im trying to get an effect like this one, where when a textfield or form area is selected, the div around changes bgcolor

WooFoo

I think i might be able to use the pseudo selectors but not sure if ie will take it. Anyways i would love some suggestions!

Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think).

Just one example: https://www.gmx.net (a commercial email service provider in Germany).

How can this be done?

Ciao, Meph

I have form located below the google map on this page -

http://www.hometowntrans.com/map_hours.asp

I want to style it such that it has a 3d look to it if you will, with a gray background and black text.

Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content.

I know I can do this by assigning certain elements a class but I'd prefer not to have to do this.

Thanks

I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server.

The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit.

<td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2'
onclick="javascript:mapbutt(document.commit,2)" /></td>

This is the javascript code for mapbutt

function mapbutt(myform,dex) {
myform.action.value='map';
myform.qnum.value=dex;
}

The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them.

Here is the style for button_notdone

.button_notdone {
font-family: monospace;
font-weight: bold;
width: 28px;
height: 22px;
color:#ffffff;
background:#000000;
}

The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey.
I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being.
How can I get these submits to look like what I want on safari.
Thank you.

Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS?

I'm thinking of something similar to this (but without the JS):

http://ryanfait.com/resources/custo...-radio-buttons/

Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take.

I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway.

this is a page with the menu as it shows right now....
http://www.seesawusa.com/products/

this is the page with the basic idea of what im trying to do
http://www.seesawusa.com/pages/74/

Things i'v tried
1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers.

2. put the UL and the FORM inside a table with 2 cells...
in FF, i get the result i want... except the LI and INPUT field are not aligned to the right
in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level

I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one?

Thanks for the glance.

P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented.

Hi guys,
sorry if its newbie question, don't work with CSS so long. I've just read a nice article about styling CSS forms (Fancy Form Design) and it looked really nice, so I tried to apply it immediately. However, some problems occured, things are never so easy I guess .
First problems occurs with styling of group of form elements: they are dropped one line down (below its label, resp. legend) in IE 5.5/6.0 and also moved to the right (in IE 5.5-7.0) for some reason. Also, styling of fieldsets' legends works odd: first legend is styled differently than the others (one would guess that all of them will be styled in same way).
Could you give me pls a little hint on these problems?

Here's the test page with applied form styling: http://147.32.122.251/hsh2t/index.php.
General CSS: http://147.32.122.251/hsh2t/forms.css
IE (5.5-6.0) only CSS: http://147.32.122.251/hsh2t/forms-ie.css