SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <Form> not displaying correctly in IE??

    My form is not displaying the associated CSS when viewing in IE. Works great in FF. Here is the CSS:

    http://www.stoneycreekwebdesign.com/...content_id=684


    Code:
    #mailform {
    	width:475px;
    	height:310px;
    	padding-left:12px;
    	padding-top:12px;
    	xxbackground-image: url(../images/bg_blue_fade_top_bottom.gif);
    	background-position:top left;
    	background-repeat: repeat-x;
    	margin: 15px auto 0 20px;
    	background-color: #F1F0ED;
    	border:  1px solid gray;
    	border-color:#F0F0F0;
    	color: #5E8A8A;
    	font-size:10px;
    	line-height:15px;
    	letter-spacing:1px;
    	font-family: verdana, arial, helvetica, sans-serif;
    }
    textarea {
    	padding:5px 5px 5px 5px;
    	color: #5E8A8A;
    	font-size:12px;
    	line-height:20px;
    	letter-spacing:1.1px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	background-color: #FFFFFF;
    	width:459px;
    	height:180px;
    	xxbackground-image: url(../images/bg_blue_fade_top_bottom.gif);
    }
    Here is the markup:

    Code:
    <div id="mailform">
    <form name="contact" method="post" action="sendmail.php">
    Name <input class='locator_text' name="name" type="text"  id="name" tabindex="1" size="36" />
    <br /><br />
    Email  <input name="email" type="text"   class='locator_text' tabindex="2" size="36" />
    <br /><br />
    Your Comments<br />
    <textarea name="text" cols="55" rows="5"  class='locator_text'  tabindex="4" ></textarea>	
    <input type="submit" name="Submit" tabindex="5" class="x_test" title="submitbutton" value="Submit Comments">
     </form>
    </div>
    Any suggestions on what it is that I *cannot* figure out this time? I am starting to feel woefully inadequate...thanks fellas!

    DWZ

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    All the css seems to be applied correctly as far as I can see. The spacing is out because you are using breaks instead of using margins or padding. The background image isn't working because of the xx you put in front but I assume you knew that anyway

    I would tidy that form up as its a mess of invalid code. Use labels and p tags.

    e.g.

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    #mailform {
     width:475px;
     height:310px;
     padding-left:12px;
     padding-top:12px;
     background-image: url((../images/bg_blue_fade_top_bottom.gif);
     background-position:top left;
     background-repeat: repeat-x;
     margin: 15px auto 0 20px;
     background-color: #F1F0ED;
     border:  1px solid gray;
     border-color:#F0F0F0;
     color: #5E8A8A;
     font-size:10px;
     line-height:15px;
     letter-spacing:1px;
     font-family: verdana, arial, helvetica, sans-serif;
    }
    textarea {
     padding:5px 5px 5px 5px;
     color: #5E8A8A;
     font-size:12px;
     line-height:20px;
     letter-spacing:1.1px;
     font-family: verdana, arial, helvetica, sans-serif;
     background-color: #FFFFFF;
     width:459px;
     height:180px;
     background-image: url(../images/bg_blue_fade_top_bottom.gif);
    overflow:auto;
    border:1px solid gray
    }
    #mailform p {margin-bottom:1em;}
    </style>
    </head>
    <body>
    <div id="mailform">
      <form id="contact" method="post" action="sendmail.php">
    	<p>
    	  <label for="name">Name</label>
    	  <input class='locator_text' name="name" type="text"  id="name" tabindex="1" size="36" />
    	</p>
    	<p>
    	  <label for="email">Email</label>
    	  <input name="email" type="text"   id="email" class='locator_text' tabindex="2" size="36" />
    	</p>
    	<p>
    	  <label for="text"> Your Comments</label>
    	  <textarea name="text" id="text" cols="55" rows="5"  class='locator_text'  tabindex="4" ></textarea>
    	  <input type="submit" name="Submit" tabindex="5" class="x_test" title="submitbutton" value="Submit Comments" />
    	</p>
      </form>
    </div>
    </body>
    </html>
    I expect your problem is somewhere else anyway unless it was just the spacing you were talking about.

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    When I place the CSS code in the header of the page in question, the form displays correctly in both browsers. When I rely on the code in my CSS file (same code), no formatting whatsoever gets displayed in IE - no background colors, no text size or colors - nothing.

    For the moment, I have solve the dillema, with your great help, in this fashion. But I remain annoyed at why it is not working from the CSS file in IE - I guess I will keep looking.

    Thanks.

    DWZ

  4. #4
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I gave up. But what I did do was put the markup for my forms in a seperate CSS file and then loaded that file after my standard CSS file .... naturally, it works great, without knowing what the conflict was.

    Thanks again - you have no idea how much help both your forum answers are and your website templates and suggestions, tips, etc.

    DWZ

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sounds like you were overwriting the styles somewhere but I would have needed to see all your code. It could be something simple like a missing bracket or typo that makes the code unreadable and sections get missed.

    Always validate the code first which will pick up these simple errors that you can't see for looking


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •