CODEWITHSUNDEEP
htmlcssinternet-explorer
Joe Riggs
Joe Riggs

Reputation: 1324

html not displaying same in IE8

The 'required' text is showing up to the left of the input box. Similar problem in Opera except is displays on the next line (creates a line break). Looks as expected in FF3.1 and chrome. Any suggestions? Eventually I would like to use the display:none attribute on the 'required' span and show this span as necessary with javascript.

<html>
<head>
<title></title>

<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }

div.row {
  clear: both;
  padding-top: 5px;
   }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
 // float: right;
  width: 235px;
  text-align: left;
  padding-right: 0px;
  padding-left: 45px;

  } 

div.spacer {
  clear: both;
 }

.container{
  width: 425px; 
  background-color: #ccc;
  border: 1px dotted #333;
  padding: 5px 5px 5px 5px; 
 margin: 0px auto;
 }

 .error{
    color: #ff0000;
  }

 .required{
  color: #ff0000;
  float: right;
 // display:none;
//  display:inline;
  }
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">

<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>


<div class="container">

    <div class="row">
      <span class="label">Name:</span>
      <span class="formw"><input size="30"  maxlength="30" name="name" id="name" value=""></span>
    </div>

  <div class="row">
      <span class="label">Email:</span>
      <span class="formw"><input size="30"  maxlength="30" name="email" id="email" value=""></span>
      <span id="email_error" class="required">(required)</span>
    </div>

    <div class="row">
      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
        <span class="formw">
      <input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>

</div>

<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>          

</form>
</div>
</body>
</html>

IE really makes me hate web dev sometimes.

Upvotes: 0

Views: 1037

Answers (6)

Archit Baweja
Archit Baweja

Reputation: 983

jriggs, since IE8 is still not completely stable, for some projects you can have IE8 revert to IE7 rendering rules. One of the benefits is that this doesn't give the user the compatibility view button on the right of the location bar.

For more info and specifics see http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

Upvotes: 0

Shawn Steward
Shawn Steward

Reputation: 6825

You probably should start by adding the proper DocType tag at the top of your file.

EDIT: After looking at your code, it appears you are not using your floats properly. First off - // does NOT comment out lines in a CSS file. You need to wrap it in /* and */ to comment it out. So your SPAN.formw style is floating to the right, which is before your SPAN.required, which also floats right. Since you're using SPAN tags, you really don't need to float anything here. If you remove all of those it should just fall into place for you.

Upvotes: 3

graphicdivine
graphicdivine

Reputation: 11211

Using double slash "//" is not valid CSS commenting. So this float right rule:

div.row span.formw { // float: right;

Is being applied.

Use:

/* comment */

When commenting CSS.

Upvotes: 3

Guffa
Guffa

Reputation: 700302

Float all the boxes in the row to the left, instead of mixing floating and inline elements:

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: left;
  width: 235px;
  padding-left: 45px;
  }

.required{
  float: left;
  color: #ff0000;
  // display:none;
  }

Upvotes: 0

AJM
AJM

Reputation: 32490

Put a float:left on the formW class

Upvotes: 0

Wookai
Wookai

Reputation: 21723

Which doctype are you using ? A strict one may prevent that kind of problem... Also, I usually start my CSS design with a reset file to get rid of all those kind of annoyances : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Upvotes: 3

Related Questions