Re: [css-d] forms
Many ways to do this, some add to html, some to css. You should be able to go to any website that has a form to inspect how they do it. Just wrap each label/input pair in a span/div and use a class of 'form-element--inline' or 'form-element--block'. Make the former display: inline-block and the latter display:block (maybe with a clearfix). As long as your HTML is structured correctly it should work fine. An alternative is to add an element level descriptive class and style each one individually. I'd have to know more about your project before recommending this. Yet another option: think in terms of 'rows' and use wrappers for each row that are display:block. And then make all labels and input elements inline/inline-block. There are more ways, I'm sure. Hope it helps! Chris On Aug 26, 2014 11:20 PM, John j...@coffeeonmars.com wrote: I am trying to build a form, like the type you fill out when you’re buying something online..billing form with all the fields including city, state, zip code, etc, where it’s great for the User if those shorter fields are on one line, with the other, longer fields each on their own line. I am googling like mad for such forms, but the word “form” no matter what other terms, brings up loads of microsoft-related things. I believe I need a mix of block and inline, but as I build my little beastie, the css is getting thick and I’d like to see examples others have built… continuing to google here..thank you for any links! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms in table
24.5.2011 6:03, bho...@aol.com wrote: Hi. I haven't had the need to use forms in a web site in several years, but when I did, I set them up in tables using strictly HTML. So now I'm using CSS to lay out the table, I guess you mean you're using a bunch of div elements and trying to make them appear in a tabular manner - instead of using CSS to style a table element. At least this is how people usually get into trouble. and no matter what I'm trying, when I have a cell with text next to a cell with a text box, the text in the left cell is lower than the text box in the right cell in everything but Internet Explorer. Any ideas? Well, as you refer to cells, maybe you _are_ using table markup... Anyway, the URL of your test page is really needed. Normally the text in a text box gets vertically aligned with the text adjacent to it, but you can change this using the valign attribute in HTML or the vertical-align property in CSS. And if you use CSS positioning, then the elements aren't adjacent in the normal sense - they get positioned independently of each other, so you need to deal with their vertical positioning using the top and bottom properties. That way, the results may be different in different browsers, due to different implementation of input elements. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
-Original Message- According to these statistics http://www.w3schools.com/browsers/browsers_stats.asp Firefox is used by about 42% of the population with IE7 and IE6 combined making up 51.7% of usage with IE7 just under 27%. I think these stats might only refer to those that access that site. Maybe FF is the predominant browser amongst web folk? I think those stats are very much skewed to the audience: web 'professionals' (I hate to use that term since I've found much on w3schools is really aimed at amateurs). I do some work for a much more general-purpose audience, and while the overall traffic is relatively low, the browser ratios are more like IE 77%, FF 17%, Safari 4%, Opera 1%. It pains me to say it, but Firefox is still really a minority browser. --- I think this may be drifting off-topic here but here is some stats from Wordpress that should be pretty accurate for the web as a whole, due to the variety of sites on there: http://ma.tt/2007/08/browser-stats/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Alan K Baker wrote: I'm sorry, I should have said that I hadn't got round to testing in Firefox yet. I only tested in IE7 for now. I tend to try to get it right in one browser first, then tweak it later for the others and yes, the float:left *does* make a difference in other browsers. Thanks for the 'fix'. It certainly makes it all stand to attention and salute. :-) You're right about the h3s, they don't work properly. This appears to be because the form is laid out in a strange fashion and try as I may, I can't make anything stay inline after the form input fields. I have come up with a really foul method of twin negative margins that will make the h3s do what I want, but I'm far from happy about the method. It's just plain wrong, and I'm not proud of it as a fix. Hi Alan According to these statistics http://www.w3schools.com/browsers/browsers_stats.asp Firefox is used by about 42% of the population with IE7 and IE6 combined making up 51.7% of usage with IE7 just under 27%. I think these stats might only refer to those that access that site. Maybe FF is the predominant browser amongst web folk? Also, just because a page displays in IE7 it doesn't guarantee it will display well in IE6 - apart from css differences the transparent png problem kept a few people busy for a while. It's fixed in IE7. I'm not saying that we shouldn't make sites cross-browser compatible or should ignore any specific browser - in fact I believe the opposite. If I have a layout problem occurring in any browser, I first validate the markup and css using http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/ . That finds any bugs fairly quickly for me :) Then I check again in at least FF, IE7 and Opera. Then I read the code to check that things are where I still think they should be. Sometimes I tweak a bit to see if that fixes the display problem. If all else fails, I either ask here and learn something or google and read. I use Linux and Windows here so prefer to make sure all displays in FF well first because that is cross-platform. I do try to avoid browser-specific tweaks because I like to be standards compliant - even if the interpretation of those standards differs. I so far have found that Firefox displays most standard markup and styling okay - collapsing margins excepted of course. Thanks to people here I have another tweak to use. This isn't going to help you in your current problem though. Regards Lesley __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
--- On Wed, 8/20/08, Lesley Binks [EMAIL PROTECTED] wrote: According to these statistics http://www.w3schools.com/browsers/browsers_stats.asp Firefox is used by about 42% of the population with IE7 and IE6 combined making up 51.7% of usage with IE7 just under 27%. I think these stats might only refer to those that access that site. Maybe FF is the predominant browser amongst web folk? I think those stats are very much skewed to the audience: web 'professionals' (I hate to use that term since I've found much on w3schools is really aimed at amateurs). I do some work for a much more general-purpose audience, and while the overall traffic is relatively low, the browser ratios are more like IE 77%, FF 17%, Safari 4%, Opera 1%. It pains me to say it, but Firefox is still really a minority browser. I do, however, wholeheartedly agree with the suggested approach: develop in a good (i.e. non-IE) browser first, to spec., then go and fix for the parts of the spec. that fail in IE. - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Bobby Jack wrote: --- On Wed, 8/20/08, Lesley Binks [EMAIL PROTECTED] wrote: According to these statistics http://www.w3schools.com/browsers/browsers_stats.asp Firefox is used by about 42% of the population with IE7 and IE6 combined making up 51.7% of usage with IE7 just under 27%. I think these stats might only refer to those that access that site. Maybe FF is the predominant browser amongst web folk? I think those stats are very much skewed to the audience: web 'professionals' (I hate to use that term since I've found much on w3schools is really aimed at amateurs). I do some work for a much more general-purpose audience, and while the overall traffic is relatively low, the browser ratios are more like IE 77%, FF 17%, Safari 4%, Opera 1%. It pains me to say it, but Firefox is still really a minority browser. I do, however, wholeheartedly agree with the suggested approach: develop in a good (i.e. non-IE) browser first, to spec., then go and fix for the parts of the spec. that fail in IE. - Bobby Well, I did wonder about those stats and they may well be skewed in favour of web folk - even if they are amateurs. Back in the late 90s - early 2000's the argument was pretty much the same ... IE is the predominant browser so design for that mostly. However then the alternative browser usage was put at about 5% with 95% being IE. The question Firefox and Opera supporters posed then was, can you or your clients afford to ignore 5% of your market? So I guess that question can now be updated to can you or your clients afford to ignore 23% of your market? From direct experience I was working on Solaris machines with Netscape and had Linux dual booting with NT way back then before going completely Linux for a few years. At that time, I tended to avoid sites that didn't display on the Linux and Solaris machines - and some of them were really bad. I still get annoyed when I find sites that fail in FF. Not, mercifully, that there are so many these days. Regards Lesley __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Lesley Binks wrote: Bobby Jack wrote: --- On Wed, 8/20/08, Lesley Binks [EMAIL PROTECTED] wrote: According to these statistics http://www.w3schools.com/browsers/browsers_stats.asp Firefox is used by about 42% of the population with IE7 and IE6 combined making up 51.7% of usage with IE7 just under 27%. I think these stats might only refer to those that access that site. Maybe FF is the predominant browser amongst web folk? I think those stats are very much skewed to the audience: web 'professionals' (I hate to use that term since I've found much on w3schools is really aimed at amateurs). I do some work for a much more general-purpose audience, and while the overall traffic is relatively low, the browser ratios are more like IE 77%, FF 17%, Safari 4%, Opera 1%. It pains me to say it, but Firefox is still really a minority browser. I do, however, wholeheartedly agree with the suggested approach: develop in a good (i.e. non-IE) browser first, to spec., then go and fix for the parts of the spec. that fail in IE. - Bobby Well, I did wonder about those stats and they may well be skewed in favour of web folk - even if they are amateurs. Back in the late 90s - early 2000's the argument was pretty much the same ... IE is the predominant browser so design for that mostly. However then the alternative browser usage was put at about 5% with 95% being IE. The question Firefox and Opera supporters posed then was, can you or your clients afford to ignore 5% of your market? So I guess that question can now be updated to can you or your clients afford to ignore 23% of your market? Percentages always need to be understood as real numbers. Multiply the percentage across the size of your market and decide if you really want to throw away that many potential customers. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
I'm sorry, I should have said that I hadn't got round to testing in Firefox
yet. I only tested in IE7 for now. I tend to try to get it right in one browser
first, then tweak it later for the others and yes, the float:left *does* make a
difference in other browsers.
Thanks for the 'fix'. It certainly makes it all stand to attention and salute.
:-)
You're right about the h3s, they don't work properly. This appears to be
because the form is laid out in a strange fashion and try as I may, I can't
make anything stay inline after the form input fields. I have come up with a
really foul method of twin negative margins that will make the h3s do what I
want, but I'm far from happy about the method. It's just plain wrong, and I'm
not proud of it as a fix.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Thierry Koblentz
To: 'Alan K Baker' ; 'css-d'
Sent: Wednesday, August 13, 2008 5:58 PM
Subject: RE: [css-d] Forms
The overflow and zoom put the backgrounds and boxes in their correct
places, but the input {float:left} makes no difference. Those fields just stay
stuck together and won't align.
It makes a difference in Firefox. You were checking with IE, I was checking
your page in FF...
This is your page with the fix for IE (keep using float for other browsers):
http://tjkdesign.com/test/alan.asp
As a side note, I'm not sure about your use of h3s in there (Maximum x
characters) and you'll have to take care of these as they do not follow floats
in IE.
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Hi Thierry.
I'm sorry, the '#' was a typo. I was using 'form' not #form' :-)
The overflow and zoom put the backgrounds and boxes in their correct places,
but the input {float:left} makes no difference. Those fields just stay stuck
together and won't align.
I have now made it work, but it's dirty. At least it validates. With use of
h3s and br /s in the HTML it lines up as it should, but I'm sure this
should be possible with CSS alone (apart from the h3s which are styled
anyway) not using br /s which implies that if someone else was writing the
HTML, they would be doing the formatting, which the CSS ought to be doing.
I've uploaded the code again if you fancy looking and are not getting too bored
with it. :-)
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Thierry Koblentz
To: 'Alan K Baker' ; 'css-d'
Sent: Wednesday, August 13, 2008 2:44 AM
Subject: RE: [css-d] Forms
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
discuss.org] On Behalf Of Alan K Baker
Sent: Tuesday, August 12, 2008 6:10 PM
To: css-d
Subject: Re: [css-d] Forms
Hi Thierry.
I set a float on #form input but it makes no difference.
If it didn't make any difference it is because you're using #form instead of
form (your form has no ID).
Adding the rules below to your CSS file should fix everything:
form {
overflow:hidden;
zoom:1;
}
input {float:left;}
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
I'm sorry, the '#' was a typo. I was using 'form' not #form' :-)
The overflow and zoom put the backgrounds and boxes in their correct
places,
but the input {float:left} makes no difference. Those fields just stay
stuck
together and won't align.
It makes a difference in Firefox. You were checking with IE, I was checking
your page in FF...
I have now made it work, but it's dirty. At least it validates. With use
of
h3s and br /s in the HTML it lines up as it should, but I'm sure this
should be possible with CSS alone (apart from the h3s which are styled
anyway) not using br /s which implies that if someone else was writing
the
HTML, they would be doing the formatting, which the CSS ought to be doing.
I've uploaded the code again if you fancy looking and are not getting too
bored with it. :-)
This is your page with the fix for IE (keep using float for other browsers):
http://tjkdesign.com/test/alan.asp
As a side note, I'm not sure about your use of h3s in there (Maximum x
characters) and you'll have to take care of these as they do not follow
floats in IE.
PS: I used the page that was in my cache last night
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Alan K Baker Sent: Tuesday, August 12, 2008 3:21 PM To: css-d Subject: [css-d] Forms Hi Gang. I've set up a simple Form at: www.webbwize.co.uk/Test_Area/Register/ with a stylesheet at:www.webbwize.co.uk/Test_Area/Register/stylesheet.css I've tried all sorts of 'tricks' but can't seem to set up the styles that I want. The labelss all line up OK and have styling, but the input fields refuse to comply. In case there's any doubt, The labels are fine and right-aligned and each input field should be to the right of its label. Each input field should line up vertically with the one (that should be) below. I know there's insufficient styling applied to the input fields right now, but I've left the code as it was at my last attempt. Can someone please take a look and hopefully point me at an elegant solution. Hi Alan. I'd float the input fields too. As a side the attribute for is for id, not name. -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Hi Thierry. I set a float on #form input but it makes no difference. You know it's amazing that a thing can stare you in the face and you don't see it until someone else points it out. I've removed all of the name tags. I hadn't noticed them! They were generated by Dreamweaver before I started to use the label tags for alignment and I forgot to remove them. :-) There is something strange occurring (certainly in IE7) where the top element is outside the colored Form background. I've also set a 1px solid black border on the 'form' and only some of the fields are being rendered within it. Strange that the two password boxes line up OK, but nothing else does. :-( The labels and fields are supposed to appear in exactly the same order as their definition in the HTML. I've reposted the files to my website. Any further ideas? Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Thierry Koblentz To: 'Alan K Baker' ; 'css-d' Sent: Wednesday, August 13, 2008 12:09 AM Subject: RE: [css-d] Forms -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Alan K Baker Sent: Tuesday, August 12, 2008 3:21 PM To: css-d Subject: [css-d] Forms Hi Gang. I've set up a simple Form at: www.webbwize.co.uk/Test_Area/Register/ with a stylesheet at:www.webbwize.co.uk/Test_Area/Register/stylesheet.css I've tried all sorts of 'tricks' but can't seem to set up the styles that I want. The labelss all line up OK and have styling, but the input fields refuse to comply. In case there's any doubt, The labels are fine and right-aligned and each input field should be to the right of its label. Each input field should line up vertically with the one (that should be) below. I know there's insufficient styling applied to the input fields right now, but I've left the code as it was at my last attempt. Can someone please take a look and hopefully point me at an elegant solution. Hi Alan. I'd float the input fields too. As a side the attribute for is for id, not name. -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
discuss.org] On Behalf Of Alan K Baker
Sent: Tuesday, August 12, 2008 6:10 PM
To: css-d
Subject: Re: [css-d] Forms
Hi Thierry.
I set a float on #form input but it makes no difference.
If it didn't make any difference it is because you're using #form instead of
form (your form has no ID).
Adding the rules below to your CSS file should fix everything:
form {
overflow:hidden;
zoom:1;
}
input {float:left;}
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms cant' be placed below eachother
So now they are placed right below eachother, but I can't move them 100px to
the right.
I've tried it by placing them both in a div, and margin this div, but that
didn't work.
http://www.speedzor.com/members.php
greetings,
jeroen
Date: Tue, 24 Jun 2008 13:08:18 -0400
From: [EMAIL PROTECTED]
Subject: Re: [css-d] forms cant' be placed below eachother
To: [EMAIL PROTECTED]
#register {
position : relative;
top : 225px;
width : 450px;
//float : left;
}
#login {
position : relative;
top : 100px;
width : 400px;
}
Jerome
- Original Message -
From: jeroen vannevel [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Tuesday, June 24, 2008 11:32 AM
Subject: [css-d] forms cant' be placed below eachother
Hi,
For some reason, my 2 forms can’t be placed underneath eachother.
I want register vertically right below the login form.
Does someone see the problem here?
http://www.speedzor.com/members.php
greetings,
jeroen
_
Even niet achter je PC? Neem je Messenger mee op je gsm!
http://www.windowslivemobile.msn.com/nl-be
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
_
Start een boeiend online leven...helemaal gratis dankzij Windows Live!
http://get.live.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms cant' be placed below eachother
jeroen vannevel wrote:
So now they are placed right below eachother, but I can't move them 100px to
the right.
I've tried it by placing them both in a div, and margin this div, but that
didn't work.
http://www.speedzor.com/members.php
greetings,
jeroen
#register {
position : relative;
top : 225px;
width : 450px;
left: 100px;---:: add this
//float : left;---:: delete this
}
#login {
position : relative;
top : 100px;
width : 400px;
left: 100px;---:: add this
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms cant' be placed below eachother
I tried this, but it still doesn't make any difference.
Date: Wed, 25 Jun 2008 15:34:18 -0400
From: [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
CC: css-d@lists.css-discuss.org
Subject: Re: [css-d] forms cant' be placed below eachother
jeroen vannevel wrote:
So now they are placed right below eachother, but I can't move them 100px
to the right.
I've tried it by placing them both in a div, and margin this div, but that
didn't work.
http://www.speedzor.com/members.php
greetings,
jeroen
#register {
position : relative;
top : 225px;
width : 450px;
left: 100px;---:: add this
//float : left;---:: delete this
}
#login {
position : relative;
top : 100px;
width : 400px;
left: 100px;---:: add this
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
_
Even niet achter je PC? Neem je Messenger mee op je gsm!
http://www.windowslivemobile.msn.com/nl-be
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms cant' be placed below eachother
jeroen vannevel wrote:
I tried this, but it still doesn't make any difference.
http://www.speedzor.com/members.php
#register {
left: 100px;---:: add this
//float : left;---:: delete this
}
#login {
left: 100px;---:: add this
}
Dunno. Working on a /local file/ this end in Mac FF/3, Opera, Safari;
and IE/6 IE/7 on Parallels.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms cant' be placed below eachother
At 5:32 PM +0200 6/24/08, jeroen vannevel wrote: Hi, For some reason, my 2 forms can't be placed underneath eachother. I want register vertically right below the login form. Does someone see the problem here? http://www.speedzor.com/members.php greetings, jeroen Take out those absolutes and clean up your margins. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms and CSS
On Dec 1, 2007, at 11:10 AM, Yoyo Etc wrote: I am about to revamp a long form I created a while ago and I want to use CSS to style it. This will be my first form styled with CSS. Does anyone have any good online resources they can point me to that show how to do this? I also found this article useful from WebAssist: http://tinyurl.com/yqxhre __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms and CSS
Hi Tina, Give Stu Nichols CSS Play a shot: http://www.cssplay.co.uk/menu/form on this page underneath the form, there are other links to different styles done to forms by other designer/authors. Elli --- Yoyo Etc [EMAIL PROTECTED] wrote: I am about to revamp a long form I created a while ago and I want to use CSS to style it. This will be my first form styled with CSS. Does anyone have any good online resources they can point me to that show how to do this? I have a book that briefly talks about it but apparently IE6 doesn't take on many of the form styles and you can't use attribute-value selectors because of IE6 - therefore, it says you have to use classes and IDs. Anyway, the examples given do not show the example with the classes and IDs. I'd like to find some examples that do show these classes and IDs AND the styling with CSS. Many thanks. Tina __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Be a better pen pal. Text or chat with friends inside Yahoo! Mail. See how. http://overview.mail.yahoo.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms not displaying correctly
Hi Phil, the sign up boxes aren't displaying correctly http://www.yourplanetneedsyou.org/ I did not check in IE7 but IE6 SP1, Opera 9.10 and Firefox 2.0.0.1 on Windows 2000. I am not quite sure how the boxes should be displayed, but on a related issue, in Opera and Firefox the page is abysmally long. Removing the following three properties from #navbox corrects these issues: margin-bottom: -32767px; padding-bottom: 32767px; overflow: hidden; Cheers Happy New Year! jens -- Jens Brueckmann http://www.yalf.de __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms not displaying correctly
On 04/01/07, Phil Turner [EMAIL PROTECTED] wrote: can someone check my site as I'm on a mac in Firefox, checked in latest IE on a pc but I have been told the sign up boxes aren't displaying correctly How are the input elements, in the form on the left hand side of the layout, meant to be displaying? -- Cheers, Sasha __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms FF2.0 vs. IE7
Raine, On Dec 11, 2006, at 7:15 PM, Raine wrote: I have a weird thing going on in a form. http://ececil.net/searchform.php In FireFox 2.0 the background color of input fields are white, but the same page in IE7 shows background color...a pale yellow as the background of the fields up in the header, and a bright green on the page. Do you have the google toolbar installed in ie? It marks fields with colors to indicate which ones can be auto-filled. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms FF2.0 vs. IE7
Raine wrote: I have a weird thing going on in a form. http://ececil.net/searchform.php In FireFox 2.0 the background color of input fields are white, but the same page in IE7 shows background color...a pale yellow as the background of the fields up in the header, and a bright green on the page. They're also white in Firefox 1.5. I have not defined the form colors in my stylesheet (yet). W3C Validator doesn't like your HTML: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fececil.net%2Fsearchform.php It's not next generation (or even current generation) HTML. Your HTML is a mess - for example, wrapping lists in spans won't work, lists are block elements, spans are not. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms in IE and FF, distances between elements when using float
Roger Roelofs wrote:
Mattias,
On Sep 13, 2006, at 4:32 PM, Mattias Brändström wrote:
This gives me the a small vertical space between the elements in FF and
a big one (perhaps 3 times larger) in IE. What I want is the FF version.
Is there some trick to get this to show the same way in IE?
The code above is a fragment of a larger piece of code.
I didn't see an answer to this, to I thought I'd give it a try...
First, the only way to really debug this is to put up the real page, or,
better yet, a stripped
down test page showing the problem. So may things can affect how the
page is rendered that a code snippet often leaves out the critical
part. Having said that, here's my guess
OK. A small page with the code I'm having trouble with can be found
here: http://keso.brasse.org/foo.html
Change
div.row input
{
display: block;
float: left;
margin-bottom: 0.3em;
}
to
div.row input
{
float: left;
margin: 0.3em 0;
}
I have tried that, and it does not have any effect on the rendering of
the page. Maybe someone has some other ideas?
If that doesn't
There seems to be parts of your email missing. =)
:.:: mattias
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms in IE and FF, distances between elements when using float
Mattias Brändström wrote:
This gives me the a small vertical space between the elements in
FF and a big one (perhaps 3 times larger) in IE. What I want is
the FF version. Is there some trick to get this to show the same
way in IE?
http://keso.brasse.org/foo.html
Some lose margins creating the gap in IE6 it seems.
Add...
div.row {height: 1%;}
...to solve that. This will probably work in a more complete layout too,
but I didn't check.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms in IE and FF, distances between elements when using float
Gunlaug Sørtun wrote:
Mattias Brändström wrote:
This gives me the a small vertical space between the elements in
FF and a big one (perhaps 3 times larger) in IE. What I want is
the FF version. Is there some trick to get this to show the same
way in IE?
http://keso.brasse.org/foo.html
Some lose margins creating the gap in IE6 it seems.
Add...
div.row {height: 1%;}
...to solve that. This will probably work in a more complete layout too,
but I didn't check.
That removed the gap completely in IE. If I increase the gap to 1em (or
more) it still render as no gap in IE. Any idea why that is?
:.:: mattias
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms in IE and FF, distances between elements when using float
Mattias Brändström wrote:
[...]Is there some trick to get this to show the same way in
IE?
http://keso.brasse.org/foo.html
div.row {height: 1%;}
That removed the gap completely in IE. If I increase the gap to 1em
(or more) it still render as no gap in IE. Any idea why that is?
Yes, it's a combination of non-contained floats, and some IE-bugs :-)
The following will give you near pixel-perfect distance-control...
div.row
{
clear: both;
float: left;
margin: 0 0 .3em 0 /* set gap here */;
}
div.row input
{
float: left;
}
...and so will the following variant - in most browsers...
div.row
{
clear: both;
height: 1%;
display: table;
margin: 0 0 .3em 0 /* set gap here */;
}
div.row input
{
float: left;
}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms background color bug IE
[EMAIL PROTECTED] wrote: here's a background color applied to a fieldset - looks good everywhere xcept IE of course... Of course... :-) - http://www.fatgraffix.com/myhl-dev/myhl-devquinn/dev04a.html One way to solve it... http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
J. Robson wrote: Hi, Which the BEST form of use FORM ELEMENTS (web standards, usability and acessibity) and flexible with CSS? Vertical Form / Column Form / Margin Form and the other layoyut. There's no best form layout. Each situation will call for something different. Just make sure you use labels correctly, and fieldsets and legends are a good idea as well. Other than that -- well, take a look at the options: http://css-discuss.incutio.com/?page=FormElements Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms Best Pratices
At 10:16 -0300 3/8/06, J. Robson wrote: Which the Best Pratices Semantic to HTML FORM (web standards, usability and acessibity) and flexible with CSS? See the answer that Zoe Gillenwater just sent to your previous nearly identical question: At 09:03 -0400 3/8/06, Zoe M. Gillenwater wrote: There's no best form layout. Each situation will call for something different. Just make sure you use labels correctly, and fieldsets and legends are a good idea as well. Other than that -- well, take a look at the options: http://css-discuss.incutio.com/?page=FormElements There's nothing to add except to point out that your question about semantics and accessibility would be better suited to a list that caters for general web development discussion, since css-d exists to discuss the practical application of css, not markup, semantics, accessibility etc http://css-discuss.incutio.com/?page=OffTopic Also, please don't post essentially the same question again if no one has answered your initial post. Just be patient. Wait a couple of days. If no one has replied after that time, think about how you might ask your question better to get the answer you seek. Alex Robinson css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms, standards accessibility vs CMS: or how I learned to start worrying and hate web apps
On 7/25/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Do you know what tables are, Mandrake? The CMSes are using tables to try and infect our precious fluid body tags. -- Gen. Jack D. Ripper I have a form. Labels off to the left, fields to the right. There additional columns of fields can be added or removed by the user. Since it's not displaying data, a table isn't really called for . . . or is it? Can you use a data table to *accept* data? If not, how can you associate multiple fields with the same label in order to maintain accessibility? Will CSS work for dynamically added and removed positioned elements? i don't believe this is a css question, but the way to associate names with controls is to use a label. tell the label the id of the control it's associated with. easy peasy! here's an example borrowed from codeproject.com: label for=FirstNameFullnbsp;Name/label input id=FirstName type=text / Gender:nbsp; label for=maleMale/label input id=male type=radio name=gender / label for=femaleFemale/label input id=female type=radio name=gender / __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms, standards accessibility vs CMS: or how I learned to start worrying and hate web apps
cj wrote: tell the label the id of the control it's associated with. easy peasy! === And if you have multiple first name fields but only one label? Can't have multiple fields with the same id. It's not merely a CSS question, no, but everything ties in to other things. If I use CSS positioning, how can I make it accessible and dynamic. If I don't, aren't I using a table for layout or is it a data table which also has layout? -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms, standards accessibility vs CMS: or how I learned to start worrying and hate web apps
At 3:43 PM -0400 7/25/06, [EMAIL PROTECTED] wrote: I have a form. Labels off to the left, fields to the right. There additional columns of fields can be added or removed by the user. Since it's not displaying data, a table isn't really called for . . . or is it? Can you use a data table to *accept* data? If not, how can you associate multiple fields with the same label in order to maintain accessibility? That's all to do with markup theory and practice, and so it's really off-topic for this list. There are a number of other venues better suited to such questions; see http://css-discuss.incutio.com/?page=OffTopic for a list. Will CSS work for dynamically added and removed positioned elements? Now that's on-topic. The answer is yes; I've done it myself. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms: tables or CSS?
On 6/11/06, pablo / silvasonic [EMAIL PROTECTED] wrote: what do you guys think? tables or CSS? and if tables, what's the best way to go about it, so that the form is still accessible. Well, personally, I tend to use a divlabel/labelinput/div markup for forms (something like this: http://test.riczho.dyndns.org/forms/). I've previously used a definition list for forms, but I think that markup sacrificed a bit of flexibility, (as do tables, in this case) Ricky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Right now it shows up under the field label. I am trying to get it to the right of the field box. For some reason it does not want to be there. Here is the address: http://pamshop.com/Template1/exp1.php I'd be happy for any suggestions. Mark, I guess this is because you have the hints in a separate class. As the font looks the same as normal text, there is not much need for that. In the php I also suppose you have an if clause and error message which is triggered by not completing the form. Just right that after each field and it should write on same line as text box. Cheers Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.7.2/349 - Release Date: 26/05/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
I moved the hints and errors text next to the label text thinking it would then be on the same line. For some odd reason though it still falls below the label text. Also, I tried increasing the width of the formcontainer with the same reaction. Is it possible that it's a problem to control because it's a PHP statement? These are the PHP statements by the way and how they are currently sitting: div class=surround label for=kt_login_passwordPassword: ?php echo $tNGs-displayFieldHint(kt_login_password);? ?php echo $tNGs-displayFieldError(custom, kt_login_password); ? /label input type=password name=kt_login_password id=kt_login_password value= size=20 / /div Here is the link: http://pamshop.com/Template1/exp1.php TIA Mark -Original Message- From: [EMAIL PROTECTED] Sent: Monday, May 29, 2006 7:32 AM -07:00 To: Mark Fellowes [EMAIL PROTECTED];CSS List [EMAIL PROTECTED] Subject: [css-d] Forms Right now it shows up under the field label. I am trying to get it to the right of the field box. For some reason it does not want to be there. Here is the address: http://pamshop.com/Template1/exp1.php I'd be happy for any suggestions. Mark, I guess this is because you have the hints in a separate class. As the font looks the same as normal text, there is not much need for that. In the php I also suppose you have an if clause and error message which is triggered by not completing the form. Just right that after each field and it should write on same line as text box. Cheers Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.7.2/349 - Release Date: 26/05/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Mark Fellowes wrote: I moved the hints and errors text next to the label text thinking it would then be on the same line. For some odd reason though it still falls below the label text. Also, I tried increasing the width of the formcontainer with the same reaction. Is it possible that it's a problem to control because it's a PHP statement? Looking at source, I noticed you have a br after label for username. Put the hint code above the br tag, and set the class for the hint to display:inline -- Joel Goldstick www.columbuswebmakers.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Mark, view the source of the parsed page in your browser, copy it to your editor and start debugging in a plain html file. plabel for=kt_login_userUsername: br class=clearfixplain / div class=KT_field_errorInvalid username./div /label/p A div cannot be a child of a label. Validate your code. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Yep, thank you. The br class is getting added after parsing. It's most likely in one of the class files. My apologies. Mark -Original Message- From: [EMAIL PROTECTED] Sent: Monday, May 29, 2006 2:29 PM -07:00 To: Cc: CSS List [EMAIL PROTECTED] Subject: [css-d] Forms Mark, view the source of the parsed page in your browser, copy it to your editor and start debugging in a plain html file. plabel for=kt_login_userUsername: br class=clearfixplain / div class=KT_field_errorInvalid username./div /label/p A div cannot be a child of a label. Validate your code. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
On 16/05/06, Steve LaBadie [EMAIL PROTECTED] wrote: Can someone tell me how to control the height of a textbox as well as the font size that appears in the textbox. With the height and font-size properties. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms vertical spacing
Any recommendations or pointers appreciated. How can I reduce the
vertical spacing between elements of the form? The goal is a tighter,
sleeker look (without images). Adjusting margin, padding and
line-height are not doing what I had hoped or I don't understand how to
use them.
See sample with CSS at: www.dottedi.biz/test.php
-Bob
The paragraphs containing your label and input pairs have the browser's
default margin-top and margin-bottom of (in Firefox, at least) 1em. Using
fieldset p {
margin: 0;
}
will remove it. As you probably want a bit of spacing, adjust the 0 to
suit (e.g. 0.25em).
Regards,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms vertical spacing
Any recommendations or pointers appreciated. How can I reduce the
vertical spacing between elements of the form? The goal is a tighter,
sleeker look (without images). Adjusting margin, padding and
line-height are not doing what I had hoped or I don't understand how to
use them.
See sample with CSS at: www.dottedi.biz/test.php
-Bob
Bob:
Try:
fieldset p
{
margin-bottom: .1em;
margin-top: .1em;
}
You may have to adjust as you need/want.
tedd
--
http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forms vertical spacing / roud corner sample
Tedd, Nick, That did the trick. It also helped fix a problem with radio
buttons not lining up in IE.
fieldset p
{
margin-bottom: .1em;
margin-top: .1em;
}
I made a sample page with rounded corners in rounded corners. I haven't gotten
into trying this with a softedged shading corners yet, but with the group's
help I have links to lots of examples. Creating the photoshop .gifs will take
more effort than the code. See my sample page at:
www.dottedi.biz/roundcorners.php
-Bob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms: Fluid layout: Best technique?
Michael Hulse wrote: What would you suggest as the best technique for laying-out forms in a fluid-width site? Any fluid-width form examples available? I plan to use fieldsets/labels... I would prefer to have the label to the left of the input, not above. Any links, tips, suggestions would be greatly appreciated. Me = googling now... I generally refer to the ideas in use here: http://www.aplus.co.yu/css/forms/?css=1 hth ;o) -- http://wiki.workalone.co.uk http://www.workalone.co.uk/ads.htm http://www.xebit.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms: Fluid layout: Best technique?
On Dec 5, 2005, at 1:27 AM, Tony Crockford wrote: I generally refer to the ideas in use here: http://www.aplus.co.yu/css/forms/?css=1 Very helpful, thanks! :) Micky -- BCC for Privacy: http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html My del.icio.us: http://del.icio.us/mhulse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
* Rob Cochrane [EMAIL PROTECTED] [2005-09-23 01:20]: Alan Gutierrez wrote: A newbie question on styling forms. A structure question... What elements do I use to markup structure? DL/DT/DD? UL/LI? For me label is a pretty logical way of marking up forms along with fieldset all are designed to work in a form. IE has some presentation issues with legend and persists in styling it blue unless you specifically alter it to another colour. Someone with a deep knowledge of Cascading may be able to say why. Display the labels as block with width and you can then flow them, clear them all along with the inputs. Here is an excellent article: http://www.themaninblue.com/experiment/InForm/index.htm That is a nice article. Thank you to everyone who sent me pointers. I'm digesting all of them. My take... Styling forms is not straightforward. Forms are interactive not passive content. It is not straightfoward because there are only a few elements in HTML to describe forms. Forms could represent a data model that is far more more complicated that fieldsets. There are many relationships to model, not simply groups inputs, but parent/child, recursive, sequences, etc. One poster said it was really markup topic, and I suppose it is a problem of limited, not terrilby descriptive, markup. Forms are not paragraphs, and definition lists are tricky since I don't know how to markup an error message... -- Patient Billing -- [Please enter a SSN in the form XXX-XX-] SSN: [FOO! ] -- -- (I like to put error message smack above the field with the error.) I don't see how document centric markup can logically express a form layout. A box model layout like in XML makes more sense for forms or dialog boxes. I think it depends on whether the form elements are part of a document, or whether they are an application in their own right. There may be a text input that is part of a paragraph, and then it's okay to mark it up as such. If it is an application, then I guess it is a problem of layout, and if it's a problem of layout, then the same tricks used to layout the page, should be used to layout a form. (That's the approach I've decided upon: jot to be shy about positioning. I'm not saying this is correct, or starting a flame war, I know this is a list of practical CSS matters. How you approach forms, when they lack a proper representation, is a practical matter for me today.) -- Alan Gutierrez - [EMAIL PROTECTED] - http://engrm.com/blogometer/index.html - http://engrm.com/blogometer/rss.2.0.xml __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Forms
No list tags; they'd be used for styling lists. ;) Try fieldset, which can be nested; legend, but use a span inside it and style that instead; and label. I get better styling mileage using label for ... before or after the form control than wrapping it around the control. Floats are definitely useful if you want to avoid adding additional structural markup. For accessibility, you get the choice of using labels and legends, or using title attributes. snip What elements do I use to markup structure? DL/DT/DD? UL/LI? (Not too interested in styling yet.) An accessiblity question... What are the usability attributes, how to use them? /snip __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
No list tags; they'd be used for styling lists. ;) Try fieldset, which can be nested; legend, but use a span inside it and style that instead; and label. I get better styling mileage using label for ... before or after the form control than wrapping it around the control. Floats are definitely useful if you want to avoid adding additional structural markup. For accessibility, you get the choice of using labels and legends, or using title attributes. This is a markup issue, not really CSS. And careful what to propagate as good styleable element and useful. - The job of fieldset and legend is to group controls that logically belong together in a unit - in the markup and on the screen - like Your Address incorporating street, house name and number, city, county and postcode (or the other localised equivalents) - The job of a label is to tell the visitor what the field it connects to (via the for attribute) is, like label for=surnameFamily name/labelinput type=text id=surname (It connects to the element's ID not the name attribute). You do not need to nest the element in it - you can, though - Title attributes are a tricky thing, and definitely NOT a valid accessibility fallback. Titles explain more than meets the eye (or the ear) on the first encounter - but not all users have title reading enabled or have the patience/aptitude to see the rendered tooltip a title attribute creates. As for laying out tables via CSS: There are several schools of thought. One claims that tables are still valid for form layout, as a label can be seen as a table header and the form field as the table cell (instead of real table data the field is the changeable data). Another uses the same analogy to advertise definition lists as a good way of laying out forms. Others see lists as the cat's pyjamas and a fourth uses plain old paragraphs. I personally had bad experience with floated labels - especially in MSIE/Mac. Links: The godfather article: Simulates tables with DIVs, probably a dated and semantically dubious approach http://www.alistapart.com/stories/practicalcss/ labels/fieldsets/paragraphs http://www.themaninblue.com/writing/perspective/2004/03/24/ http://www.themaninblue.com/experiment/InForm/index.htm Rolls Royce version discussed here some weeks ago: http://jeffhowden.com/code/css/forms/ Good overview over various techniques: http://www.bobbyvandersluis.com/articles/formlayout.php HTH Chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Forms
snip - Title attributes are a tricky thing, and definitely NOT a valid accessibility fallback. Titles explain more than meets the eye (or the ear) on the first encounter - but not all users have title reading enabled or have the patience/aptitude to see the rendered tooltip a title attribute creates. /snip Bad phrasing on my part, but in fact the WCAG 2.0 draft does actually suggest using title to label form controls that can't be individually labeled. So precisely as an accessibility fallback. However, I can't readily think of a situation where label can't be used, so it seems to be a bit of a redundant recommendation. If a label's in the way visually, it can be styled using a negative text indent and absolute positioning to hide it and take it out of the flow. snip One claims that tables are still valid for form layout, as a label can be seen as a table header and the form field as the table cell (instead of real table data the field is the changeable data). Another uses the same analogy to advertise definition lists as a good way of laying out forms. Others see lists as the cat's pyjamas and a fourth uses plain old paragraphs. /snip Hmmm. The question I have to ask is whether these perspectives would even exist if it were more straightforward to style forms with the existing semantic elements? I can buy a navigation bar as a list of links, but not a form as a series of paragraphs. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
Alan Gutierrez wrote: A newbie question on styling forms. A structure question... What elements do I use to markup structure? DL/DT/DD? UL/LI? For me label is a pretty logical way of marking up forms along with fieldset all are designed to work in a form. IE has some presentation issues with legend and persists in styling it blue unless you specifically alter it to another colour. Someone with a deep knowledge of Cascading may be able to say why. Display the labels as block with width and you can then flow them, clear them all along with the inputs. Here is an excellent article: http://www.themaninblue.com/experiment/InForm/index.htm Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms select form
On 8/4/05, Abyss Information [EMAIL PROTECTED] wrote: Hi all, Does anyone have any good select form styling code? because the code that I am using doesn't seem to work. Form elements cannott be controlled consistently across browsers. http://www.456bereastreet.com/archive/200409/styling_form_controls/ http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/ You can work around that with scripting http://icant.co.uk/forreview/tamingselect/ http://easy-designs.net/articles/replaceSelect2/ http://www.badboy.ro/articles/2005-07-23/index.php If you should (and confuse visitors as they have to find the control instead of simply using it) or if you just should use Flash to re-inven forms is up to you. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
