Internet explorer 7 display bugs

[co.ador]

I have this form and it's CSS style, above it display in the center in firefox but in other browser it won't can anybody help me to display in the center for all the browsers?

 

<style type="text/css">
#form23 { width: 400px;  margin: 0 auto; }
#left-side { width: 200px; float: left; }
#right-side { width: 200px; float: right;}
#form input,select { margin-bottom: 10px; }
</style>
<div id='form'>
<form name='yourformname' action=''>
<div id='right-side'>
  <input type='checkbox' name='example' value='delivery' />Delivery<br />
  <input type='checkbox' name='example' value='eat-in' />Eat-in<br />
  <input type='checkbox' name='example' value='wifi' />Wi-Fi<br />
  <input type='checkbox' name='example' value='buffet' />Buffet<br />
  <input type='checkbox' name='example' value='tv' />Tv<br />
  <input type='checkbox' name='example' value='parking' />Parking<br />
  <input type='checkbox' name='example' value='catering' />Catering<br />
  <input type='checkbox' name='example' value='take-out' />Take Out
</div>
<div id='left-side'>
  Name: <br />
  <input type='text' name='name' /><br />
  Zip Code: <br />
  <input type='text' name='zipcode' /><br />
  County: <br />
  <select name='county'>
   <option value='Bronx'>Bronx</option>
  </select><br />
  Type of Food: <br />
  <select name='food-type'>
   <option value='spanish'>Spanish Food</option>
  </select> 
</div>
</div>

[sticks464]

Since there is no form with an id of form23, change

#form23 { width: 400px;  margin: 0 auto; }

to

#form { width: 400px;  margin: 0 auto; }

and it will center in all browsers.

[co.ador]

Thank you stick the problem stills remains

 

Do you have any other input?

[haku]

It's probably because you are using single quotes instead of double quotes on your tag attributes. IE sometimes doesn't like that.

[sticks464]

I tested this code in IE7 & 8, FF, Safari, Chrome and Opera. It centers in all browsers.

Is there some code your not including that could affect this code?

<style type="text/css">
#form { width: 400px;  margin: 0 auto; }
#left-side { width: 200px; float: left; }
#right-side { width: 200px; float: right;}
#form input,select { margin-bottom: 10px; }
</style>
<div id='form'>
<form name='yourformname' action=''>
<div id='right-side'>
  <input type='checkbox' name='example' value='delivery' />Delivery<br />
  <input type='checkbox' name='example' value='eat-in' />Eat-in<br />
  <input type='checkbox' name='example' value='wifi' />Wi-Fi<br />
  <input type='checkbox' name='example' value='buffet' />Buffet<br />
  <input type='checkbox' name='example' value='tv' />Tv<br />
  <input type='checkbox' name='example' value='parking' />Parking<br />
  <input type='checkbox' name='example' value='catering' />Catering<br />
  <input type='checkbox' name='example' value='take-out' />Take Out
</div>
<div id='left-side'>
  Name: <br />
  <input type='text' name='name' /><br />
  Zip Code: <br />
  <input type='text' name='zipcode' /><br />
  County: <br />
  <select name='county'>
   <option value='Bronx'>Bronx</option>
  </select><br />
  Type of Food: <br />
  <select name='food-type'>
   <option value='spanish'>Spanish Food</option>
  </select>
</div>
</div>

[co.ador]

I will try that Huku

 

Thank you..

 

 

 

 

[co.ador]

Hey guys

 

The W3 Validator worked the problem around, now I have fixed and Internet 7 is working...

 

There were a couple misplaced tags and it was causing some conflict.

 

Now i have a question how can I style the search boxes

<div id="left-side"> Name: <br />
      <input type="text" name="name" />
      <br />
      Zip Code: <br />
      <input type="text" name="zipcode" />
      <br />
      County: <br />
      <select name="county">
        <option value="Bronx">Bronx</option>
      </select>
      <br />
      Type of Food: <br />
      <select name="food-type">
        <option value="spanish">Spanish Food</option>
      </select>
    </div>

That instead of having the heading Name, Zip code, county, and Type of food on top of the rectangular boxes like below

 

 

Have it to the left of the rectangular boxes, exactly as in the example below:

 

http://zip4.usps.com/zip4/welcome.jsp

 

Thank you guys

 

PS - I have tried in <tables> tags but I don't know if semantically speaking the most correct way to go....

[co.ador]

I am having some issues in IE7 displaying the code below looks like:

 

 

CSS

.abajo {  width: 1000px; height:360px; position:relative;  top:160px; left:100px; }
.abajo fieldset{
margin: 1.5em 20px 0 20px;  
padding: 0;
float:left;

}

.abajo fieldset legend {  
margin-left: 1em;  
color: #000000;  
font-weight: bold;  
}  
.abajo fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;
width:340px;  
} 
  

.abajo fieldset li {  
padding-bottom: 1em;  
}
.abajo fieldset label {
text-align:right;
float: left;    
width: 10em;    
margin-right: 1em;    
text-align: right; } 

.abajo .primero .tercero ol{  
padding: 0.8em 1em 0 5em;  
list-style: none;
width:200px; ; 
}
.tercero {  width:200px; height:224px; }
.primero {width:850px; height:360px; background-image:url(../images/fieldsetfront2.gif); }

<form class="abajo" action=""> 
<fieldset class="primero">
<legend>Search For a store</legend> <fieldset class="tercero" style="border-color:#FFFFFF" >
<legend>Services</legend> 
<ol>
<li>
  <input type="checkbox" name="example" value="delivery" />Delivery<br />
  <input type="checkbox" name="example" value="eat-in" />Eat-in<br />
  <input type="checkbox" name="example" value="wifi" />Wi-Fi<br />
  <input type="checkbox" name="example" value="buffet" />Buffet<br />
  <input type="checkbox" name="example" value="tv" />Tv<br />
  <input type="checkbox" name="example" value="parking" />Parking<br />
  <input type="checkbox" name="example" value="catering" />Catering<br />
  <input type="checkbox" name="example" value="take-out" />Take Out
</li></ol>
</fieldset> 
</fieldset>
</form>

 

What's happening here is that the top boder of the fieldset services is overlapping the right boder and goes across it. pluse the input check boxes and it's text are overlapping the right fieldset boder.

 

some help please.

[Dorky]

for the first prob on here i have to say i have that issue if i dont use

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

for doctype.

for the later issue, ie renders margins automatically and firefox does not.