elementalgrace Posted May 3, 2006 Share Posted May 3, 2006 Hi This is my first post on the forum after a long time lurking and I'm really hoping someone can help me. I'm trying to use CSS to style a .net form (I'm not a .net developer, it just so happens that's what the form uses) so that it aligns and displays correctly in IE, firefox and opera. It's going pretty well but I've just come across a slightly weird problem and I'm not sure how to get around it. The style is applied for text boxes fine, but when text areas, check boxes and dropdowns are coded into the form, the .net code puts the label and input field into a <span> tag. I don't think there's a way to stop it doing this but surely I should be able to add a class that enables me align these spanned fields appropriately. It's someone elses code and it's starting to drive me a bit bonkers - so I'll put myself in the hands of the experts and unashamedly beg for help.The HTML looks like this: .content ul{ width: 95%; color: #000000; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.content li{ margin: 0.7em 0px;}.content label{ width: 7em; float: left; text-align: right; margin-right: 0.5em; display: block;}.content li.submit{ color: #474747; border: #474747; padding-left: 5em;}.content .buttonhov{ border-right: #1e5cdb 2px inset; border-top: #1e5cdb 2px inset; border-left: #1e5cdb 2px inset; border-bottom: #1e5cdb 2px inset;}.content input, .content textarea, .content Select{ color: #474747; background: #bcc8cf; border: 1px solid #474747; width:175px;}.content span.label{ width: 7em; float: left; text-align: right; margin-right: 0.5em; display: block;} Many thanksEG Link to comment Share on other sites More sharing options...
scott100 Posted May 3, 2006 Share Posted May 3, 2006 Ok, so you have a <textarea> within a <span> within a <li> ? <li><label for="chkContent">Allow access to Content</label><span title="Allow Access to Content Section for creating and editing page content."><textarea>Hello</textarea></span></li> you could change it's appearance like this: <style>li span textarea{color:red;}</style> Is that what you meant? Link to comment Share on other sites More sharing options...
elementalgrace Posted May 3, 2006 Author Share Posted May 3, 2006 Hi Scott,Thanks for the reply. I tried adding that to the stylesheet but it doesn't seem to have any effect. I tried adding it as .content li span textarea so that it's within the content class like the rest of the form and it's still not having an effect.The fields that have the spans in them are all indenting until I just have a big diagonal line of fields that won't align. I find this a bit weird since the label isn't inside the span but it's indenting too.I meant to say it's doing the same for checkboxes too.I don't have a copy on the web to show you though. Link to comment Share on other sites More sharing options...
scott100 Posted May 3, 2006 Share Posted May 3, 2006 I don't have a copy on the web to show you though.<{POST_SNAPBACK}> Can you post all of the code so we can examine it Link to comment Share on other sites More sharing options...
elementalgrace Posted May 3, 2006 Author Share Posted May 3, 2006 Hi ScottThanks but I got the problem sorted through trial and error in the end. It ended up being that the label width was too narrow. For some reason if the label had to go onto 2 lines, it knocked out the next field (with a knock on effect!). I just widened the label and hey presto - it works!Thanks very much for your help anyway Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now