Hi there, is the following possible? I want my textbox to take up all space (100%) but leaving margin-right of say 30px, is this possible? If i set the textbox at 100% width or cols=100% then the margin-right is ignored, or pushed off the screen. If i set no width at all it goes to a default small width by the looks of it? Lastly can I add a background-image to a Radio Button! Just trying to make use of my elements here without using sanbags. I've been able to add an iffy background colour, but not an image nor any padding or margin that could make way for a potential background image.
Um, no and no. That said, it's not that you couldn't do it, but that you couldn't do it cross-browser. What I run into with text areas is that when I get them with the number of columns which makes the textarea look to be about right in width, I check in IE and it's too wide. Bah. I reduce the cols until it's ok in IE and a bit too narrow in everyone else. I check in Konqueror and see it going off out of the box. Bah. I'm not sure if you could fake it by wrapping a div or fieldset around just the textarea, background-color: #fff and a light grey border around it, and the textarea inside with no borders... problem is, take a look at textareas in every browser and they all look different (esp Safari christ, AND Safari users get to resize the textarea to their hearts' content. Bah!) Um, this is what you're up against (see his screenshot demos) http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/ As for the radio buttons, same problem... I had one where I wanted to add padding, I forget why, and it looked one way on IE and Opera and another on Saffy/FF. Yesh. Um, lessee... here's the form where I ran into the padding-radio-buttom issue, and the css related to it (not the cleanest CSS, wrote it too fast as it was dropped on my lap at the last minute and new forms were unexpectedly added.... bah!) #formAbonnement { width: 540px; float: right; background:#fff url(../../images/strandhutlang.jpg) 0 0 no-repeat; margin: 5px; } #formAbonnement fieldset { border: 2px solid #f60; padding: 4em 0 1.5mm; position: relative; /*abso-po'd child*/ } legend span { position: absolute; width: 510px; margin-top: 1.5em; /*dekt moderne browsers*/ margin-left: 1.5em; color: #000; font-size: .8em; } /*FF pukes with top: 0 while IE needs "top"... legend styling*/ /*see: http://www.tyssendesign.com.au/articles/css/legends-of-style-revised/ */ * html legend span { top: 0; } *+html legend span { top: 0; } legend span.fout { color: #f00; font-weight: bold; font-style: italic; } legend span.toegevoegd { color: #109103; font-weight: bold; font-style: italic; } form div { display: table; width: 85%; /*triggers Haslayout, dus werkt ie nog in IE*/ padding: 5px 5px 0px 40px; margin-bottom: 2px; clear: left; } fieldset div span { color: #f00; vertical-align: middle; padding-left: 2px; } label, div.checkradio p { line-height: 150%; padding: 0 5px; text-align: left; float: left; width: 10em; } div.checkradio label { line-height: 150%; float: none; padding: 0 5px; } div.checkradio label, div.checkradio input { vertical-align: middle; } [b]Here's where I tried to just style the text inputs[/b] #abonnement input, #formLoginSHL input[type=text], #formLoginSHL input[type=password] { padding: 1px 2px; background-color: #fff; line-height: 150%; border: 1px solid #015f9a; } [b]Here's where I had to undo sh*t for IE7 and Opera[/b] input[type=radio], input[type=checkbox] { /*IE is stom*/ background-color: transparent; /*maar Opera doet het ook*/ border: 0; } [b]IE6 is even dumber[/b] * html div.checkradio input { /*IE6 ook stom*/ background-color: transparent; border: 0; } #abonnement input.submit { display: block; width: 11em; /*Safari en Opera9.5 hebben groter breedte nodig... stom*/ margin: 5px auto; background-color: #c7c7c7; color: #000; font-weight: bold; border: 1px solid #646464; } #abonnement input.submit:active { border: solid #666; border-width: 1px 2px 2px 1px; } Code (markup): If you copy the code and remove the "undoing" code from the css, you can take a look in FF, Opera, and IE... the problem would not have occurred had I not tried to make the form look awesome with background colours and borders on the inputs. Though if I had used the attribute selector in the first place for #abonnement input[type=text] I wouldn't need the undoing code except for IE6 but like I said, written too fast.
Thanks for the reply, I continued experimenting yesterday and as you have illustrated there are many cross-browser problems, IE supported my backgrounds but no luck in FF. I guess it's probably best to leave the stying so that everything looks the same in all browsers. What I was trying is to have the textbox fill up 100%, but leaving room for a big rectangular Submit button next to it with a nice background on the button acting as the text for the button. Ah well I'll just shove it underneath the textbox and float it to the right instead like normal submit buttons . Meanwhile while experimenting it was quite cool however to make a radio button 500px by 500px, never knew you could do that. In evaluation, forms are poorly supported, and browsers really should be consistent with each other!!
Ah, that goes both ways I guess. While it doesn't matter how you style your page, forms have to be worked with by all sorts of people: morons, grandmas, blind people, first-time computer users. etc. so it's kinda nice that they all have some sort of sameness. However, I think you could prolly set up what you want... float the textarea left and then float the submit, and play with widths or cols (cols is required if I remember right) until it looks pretty good at least in IE, FF, Opera and Saffy/google. You can replace the submit button with an image kinda like the tomato here: http://stommepoes.nl/Pizzaatje/pizzaatje.html as the picture in the HTML is a transparent gif the size of the image and in the background CSS uses this image: http://stommepoes.nl/Pizzaatje/zoekknoppen.gif So you have SOME leeway.
Yep cols is required for XHTML, the problem is if the browser window becomes to small, there is no room for both the text area and the submit eventually. I could probably float the textarea left, and the submit button to the right, so if there is no room it will gracefully drop underneath the box and to the right. Nice thanks for the example, all I did was add a background image to my submit button with an empty value, but the addition of a hover and onclick image could come of good use, i'll definitely (took me a long time to spell that it's got an odd spelling in actual fact) try this out later.
Sorry to bring this back but i've been distracted for some time from this project. So I want a text-area that takes up all the room, apart from leaving 200px for a Submit Button. Something like this: So the textarea takes up all remaning space. I have actually got this working in FireFox but not IE, this is what I have got working in Firefox:
That can be done, you just reverse the margin trick you would for a multi-column 'content first' DIV based layout. Wrap BOTH elements in a DIV, put the 204 px right margin on the div. Then you make your textarea 100% width and float:left, and the input 200px width, float:left and margin-right:-204px; - because it's now less than zero width it will float up left of your textarea over the original margin. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Untitled Document </title> <style type="text/css"> #wrapForm div { margin-right:204px; } #wrapForm textarea { float:left; width:100%; height:198px; margin:0; padding:0; } #wrapForm #submit { float:left; width:200px; height:200px; margin-right:-204px; background:pink; border:1px solid #000; } </style> </head><body> <form action="#" id="wrapForm"> <div> <textarea></textarea> <input type="submit" id="submit" value="Submit" /> </div> </form> </body></html> Code (markup): That's what you are trying to do, right?