|
CSS - Form Looks Off In Ie
I'm relatively new to css and i'm hoping this forum will help me get better acquainted by working out some of the problems i'm running into.
the address is: thenserenity.com/form.html this form looks fine in everything except IE. in IE there is no margin and the text starts in the top left of the div, as you can see if you check it out in ie. i have two css's, 1 general and 1 for ie. here is the ie css: --------------------------- @charset "utf-8"; /* CSS Document */ div#wrapper { background:none; filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='colhead-tl.png' ,sizingMethod='crop'); } .nav { margin-top:49px; } .rounded_STYLE { background-color: white; /* if needed */ border: 25px solid white; /* if needed */ position: relative; } .rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br { width: 750px; height: 25px; position: absolute; } .rounded_STYLE > .tl { background: url(../images/colhead-tl.jpg) top left no-repeat; top: -25px; left: -25px; } .rounded_STYLE > .tr { background: url(../images/colhead-tr.jpg) top right no-repeat; top: -25px; right: -25px; } .rounded_STYLE > .bl { background: url(../images/colhead-bl.jpg) bottom left no-repeat; bottom: -25px; left: -25px; } .rounded_STYLE > .br { background: url(../images/colhead-br.jpg) bottom right no-repeat; bottom: -25px; right: -25px; } br.clear { clear:both; } /* FORM -----------*/ .rounded_STYLEform { background-color: white; /* if needed */ border: 25px solid white; /* if needed */ position: relative; width:auto; height: 200px; } .rounded_STYLEform > .tl, .rounded_STYLEform > .tr, .rounded_STYLEform > .bl, .rounded_STYLEform > .br { width: 750px; height: 25px; position: absolute; } .rounded_STYLEform > .tl { background: url(../images/colhead-tl.jpg) top left no-repeat; top: -25px; left: -25px; } .rounded_STYLEform > .tr { background: url(../images/colhead-tr.jpg) top right no-repeat; top: -25px; right: -25px; } .rounded_STYLEform > .bl { background: url(../images/colhead-bl.jpg) bottom left no-repeat; bottom: -25px; left: -25px; } .rounded_STYLEform > .br { background: url(../images/colhead-br.jpg) bottom right no-repeat; bottom: -25px; right: -25px; } ---------------------- anyone know how to make this form look, in ie, as it does in everything else. thanks, jtn Similar TutorialsWhenever I specify <form> in an html page I find that the browser will skip a space after I'm done with the form. Overly simplified example: Code: <html> <body> <form name="input" action="html_form_action.asp" method="post"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> test (notice that this is two lines below the input box instead of one) </body> </html> Is there any way to use a <form> tag but still have the text after the form appear right after the form and not skip extra spaces? Is there a way to alter the <form> starting tag so that it doesn't add white space before and after it? I have this form tag that is really screwing with my design because of the spacing it's adding to the page ... I have found CSS to make an entire form pretty, but not something to remove the space that this tag adds to my page. how would i change the colour of a text box in css? and also not sure if this is css or javascript but how do i clear a text box when the user clicks on it to write in their username? thanks tony Hello, I am creating a form based an ordered list. I want to have two columns: - Left column with labels and 20% width. - Right column with inputs with 80% width. The total width is defined by a div that contains the list ... or by the list itself. In this moment I have a few problems: 1. The inputs don't take the total width; 2. The labels get outside of the container on the left; 3. The required icon does not take a space to the input; 4. The input button is not aligned with other inputs. Could someone please help me out in solving these problems and improving my code? I created a sample project and uploaded it to: http://www.27lamps.com/Labs/Form/Form.html Any help would be great! Thank You, Miguel Hi there, I've been battling to get this right...basically I have the following HTML setup: <input class="tboxes" type="textbox" /> <input class="tboxes2" type="textbox" /> "span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus. I have tried the following CSS code: input.tboxes:focus { color:#FF9900; } input.tboxes2:focus { color:#FF9900; } but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA! How do you keep a dropdown box on top of all other windows? Hi, I'm having difficult with learning forms and how to style them. I've gotten mostly what I am looking for just now I don't seem to be able to make adjustments: Adjusting the size of the text-window, wrapping the frame boarder around the fieldset. Those are my main issues, any help would be greatly appreciated. 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. I am not able to give a width to Label. so i tried to put a span around it and provide a width. still it doesnt work I want to shift the text fields to the right so that all are alligned at a right vertical line even if the label is of different char length. http://www.variable3.com/clients/be...gerDetails.html I need css relative positioning for a web form interface on a browser page, so it is located (Center/middle) despite browser size. Then I need each of the elements inside of the form table absolutely positioned in relation to the box. The are eight graphics that surround the table. I would actually like to get rid of the table completely if it was possible. I believe the is a cleaner and more efficient way of doing this in css, but I haven't got a clue as to where to start? I have just read that I can apply the styles to this page in the header instead of being pulled from a universal style sheet, I would like to do this as this is a login page and is page is unique from the rest of the site. Any and all help greatly appreciated. Hello, my code uses span tags within a link tag to make an html form become visible when the link is hovered. It works perfectly in everything except IE7/8. I would really appreciate it if anyone is able to help me stomp out this bug. Bug description: After text has been entered into the form, the form will then close prematurely when the cursor is moved over the fields (specifically, while crossing the tiny gap between the fields). Recipe to reproduce bug: 1. Hover the link to reveal the form, and fill the fields with text. 2. Close the form by moving the mouse off of the form. 3. Mouse back onto the link and move the cursor continuously over the text fields. If you're in IE7/8 then the form will seem to suddenly close at random. I've uploaded a stripped down version of the code for your convenience: http://mobile.sheridanc.on.ca/~goodalek/test2.htm CSS code: Code: .hyperLeft2:hover{
background-color: #E9F1F9;
text-decoration:none;
z-index:50;
}
.hyperLeft2 span{ /*CSS for enlarged image*/
text-decoration:none;
position: absolute;
background-color: #E9F1F9;
text-align:left;
left: 20px;
font-size: 13px;
color: #474747;
top: -95px;
visibility: hidden;
color: black;
width: 500px;
}
.hyperLeft2:hover span{ /*CSS for enlarged image on hover*/
background-color:#aaaaaa;
visibility: visible;
left: 20px;
top: -95px;
z-index:60;
}
HTML code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<br><br><br><br><br><br>
<a href="#" class="hyperLeft2">Request a Quote<span>
<form name="form1">
<input type="text" name="name" ><br>
<input type="text" name="custEmail" ><br>
<input type="text" name="phone" ><bR>
<input type="text" name="domain" ><br>
<input type="text" name="name2" ><br>
<input type="text" name="custEma3il" ><br>
<input type="text" name="phon4e" ><bR>
<input type="text" name="domai4n" ><br>
<input type="submit">
</form>
</span></a>
</body>
</html>
Please let me know if any further information is required. hello people, If you click the link "Search this Forum" above, a popup window appear(about 40x30) and you may now search you Thread. The popup window and the form created inside is what I wanted to do but dont know how start. Can you help? Is css behind all this or simple a script? What's best thing to use? Thanks! Hi. I'm just beginner in CSS and I'm trying to do a from that has two fields (2 label & 2 input) pair up each line. I found it hard and as I go on it seems it will have more code (HTML & CSS) than I just use html table. So is it no good to use html table for forms? I find it very easy and then code is less and same as the CSS. Just want your thoughts that's all. Not sure if I should put this here or on html side? Maybe I try this first. Thank you. I have a PayPal form tag in my html However, the form apparently creates a margin above and below the image. How do I get rid of this a(s it doesn't happen if i just use a <img> tag)? As always, thank you for your valuable time. Cheers! I just can't figure out what to define so that IE doesnt screw up my coding... here is a link to my project... if you look in IE, there is a gap above "Account Info"... it is caused because that is where my <form> tag starts, then at the bottom there is another gap, which is there my </form> tag ends. Sign Up Page Error Hi guys, Is it correct to have a <div after a <form or after a <p ?? For example, is this correct: Code: <form action="... </form> <div id="forgot_pass"> ... </div> OR Code: <p id="... </p> <div id="forgot_pass"> ... </div> Thank you I am styling some form controls with CSS but am getting some odd results. Can anybody shed any light... I have extended the input tag.. input{ color: #006633; background: #FFFFFF; height: 15px; font-size: x-small; border: 1px solid #006633; } The box is rendered differently depending on whether the type is password or text. The password box is always shorter than the username box. When i click on the Login at the loginform on www.ipan.be the form is jumping under the text, IE is good... Is there anyone who has this porblem or a solution? Hello. I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox. Not sure how or where this gets changed. It seems to be adding a thicker border or something? Here is the page: http://www.nessphysiotherapy.com/testimonials.php Suggestions? Thanks Matt |
|||||||